zoukankan      html  css  js  c++  java
  • 自定义原生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) {}   // 请求失败的回调函数*/
        });
  • 相关阅读:
    Java高并发秒时啊API之Service层
    Junit测试类生成
    Java高并发秒时啊API之业务分析与Dao层2
    Java高并发秒时啊API之业务分析与Dao层1
    JSP知识_EL表达式
    Maven_3_webAPP
    Maven_2_核心知识
    添加bean的监听
    异步上传文件
    ACTIVITI工作流的集成记录
  • 原文地址:https://www.cnblogs.com/huangxingquan/p/7778202.html
Copyright © 2011-2022 走看看