自定义原生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) {}   // 请求失败的回调函数*/
    });