自定义原生jsonp跨域请求

  由于同源策略,跨域(协议、域名、端口均相同的为同域)之间是不允许请求资源的,但是scrapt标签不收跨域约束,如论是jQuery中的jsonp还是angularjs中的jsonp都是通过script来实现跨域请求的。

注意:

  1、跨域请求是通过get方式进行的,参数会连到url后;

  2、jsonp需要设置回调函数,前端需要定义回调函数,后端也需要有回调函数的相关处理,否则请求不会成功。

jsonp自定义方法一(简易版):

var ajax = function(params) {
        var callbackName = params.jsonp;
        window[callbackName] = function (json) {
            console.log("callback:");
            console.log(json);
        };
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = params.url+params.jsonp;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
    }
    ajax({
        "url":"/userInvite/saveLog.do?regKey=eUa%252Fv70AeBC2QolRKlUNJA%253D%253D&refererUrl=www.baidu.com&guid=&callback=",    // 请求地址
        "jsonp":"success_jsonpCallback",  // 回调函数名为"success_jsonpCallback",可以设置为合法的字符串
    })

jsonp自定义方法二:

var ajax = function ajax(params) {
        params = params || {};
        params.data = params.data || {};
        jsonp(params);
        // 定义jsonp方法
        function jsonp(params) {
            //创建script标签并加入到页面中
            var callbackName = params.jsonp;
            var head = document.getElementsByTagName('head')[0];
            // 设置传递给后台的回调参数名,可以自定义回调函数名
            params.data['callback'] = callbackName;
            var data = formatParams(params.data);
            var script = document.createElement('script');
            head.appendChild(script);
            //发送请求
            script.src = params.url + '?' + data;
             //创建jsonp回调函数(发送请求后会得到后台结果,然后调用该回调函数)
            window[callbackName] = function (json) {
          //json为后台返回的请求结果,后台已完成该次请求的响应,之后将创建的script移除
                head.removeChild(script);
                clearTimeout(script.timer);
                window[callbackName] = null;
           //成功响应后做的处理
                params.success && params.success(json);
            };
            //为了得知此次请求是否成功,设置超时处理
            if (params.time) {
                script.timer = setTimeout(function () {
                    window[callbackName] = null;
                    head.removeChild(script);
                    params.error && params.error({
                        message: '超时'
                    });
                }, time);
            }
        };
        //格式化参数
        function formatParams(data) {
            var arr = [];
            for (var name in data) {
                arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
            }
            // 添加一个随机数,防止缓存
            arr.push('v=' + random());
            return arr.join('&');
        }
        // 获取随机数
        function random() {
            return Math.floor(Math.random() * 10000 + 500);
        }
    };    

//使用实例
ajax({
        "url":"/userInvite/saveLog.show",    // 请求地址
        "jsonp":"success_jsonpCallback",  // 回调函数名为"success_jsonpCallback"
        "data": {
            "regKey":sourceType,  
            "refererUrl":referUrl|| "",
            "regGuid":cookieTest
        },
        success:function(res){   // 请求成功的回调函数
            if(res != null){
                console.log("跨域请求成功!");
            }

        },
        error: function(error) {}   // 请求失败的回调函数*/
    });
原文地址:https://www.cnblogs.com/huangxingquan/p/7778202.html