jQuery jsonp跨域请求数据 的封装(渡一)

@渡一教育 2019 4 21

浏览器的同源策略：限制从一个源加载的文档或脚本与来自另一个源的资源进互。同源策略：协议 域名 端口号 相对于两个页面是相同的 则为同源 ,否则就为非同源 —浏览器提出安全策略

我们一般通过 js 发起jsonp的跨域请求对请求的数据进行处理，或者把自己的请求的数据发送到后台 后台处理之后的数据返给前端

jquery 的 jsonp 如何发起跨域请求及其原理：
ajax: async javaScript and xml （异步加载js和xml） 是一种快速创建动态网页的技术
ajax请求的限制：同源策略

我们先思考一个问题 ：我们在外部引入jquery 是通过这种方式

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

实际上这里用到了jsonp的跨域请求方式 ，我们再来理解一下 这种方式

 <script src="./index.txt?cb=callback"> </script>
```这块代码是们在另一个文件中创建的txt文件(可以是excel、word等格式）

 <script src="./index.txt?cb=callback">
        //  实际上index.txt中的文本会被放在在这里来当作js语句来解析
        callback({
            wd: '渡一',
            age: 123456
        })   **//这里callback就是index.txt中的文本**
    </script>



      // 我们来封装jsonp函数
        function jsonp(obj) {
            var oScript = document.createElement('script');                      // 动态创建script标签
            var dataStr = '';                                                  // 地址中拼接的要传给后端的数据  （字符串）
            if (typeof obj.data == 'object') {                                // 如果传入进来的数据是对象的格式 那么需要拼接这个对象的每一项
                for (var prop in obj.data) {
                    dataStr += prop + '=' + obj.data[prop] + '&';
                }
            } else {
                dataStr = data;                                             // 如果传进来的是字符串  直接赋值就好
            }
            // 判断页面上是否有回调函数, 如果没有  则需要创建一个函数
            window[obj.jsonpCallback] ? "" : window[obj.jsonpCallback] = function (res) { 
            // 如果页面里面没有回调函数  则看看传入的对象里面有没有成功的回调函数，若有则执行 没有则打印数据
                obj.success ? obj.success(res) : console.log(res);
            }
            oScript.src = obj.url + '?' + dataStr;                            // 为script添加地址   
            document.body.appendChild(oScript);                             // 将script标签插入到页面中
            document.body.removeChild(oScript);                        // 每次插入完script标签就会执行里面的script代码  然后删除标签  为了使页面里面的标签不那么多
        }
        jsonp({
            url: './index.txt',
            //  url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
            data: {
                wd: '渡一'
            },
            jsonpCallback: 'callback',  // 回调函数 如果有回调函数就在./index.txt 中执行回调
            jsonp: 'cb',
            success: function (res) {
                console.log(res);
            }
        });