js手写实现jsonp

跨域指的是在一个域名下的网页去请求另一个域名下的资源。同源策略是浏览器的一种安全限制，如果不同源，就不能直接进行通信。但是在实际开发中，经常需要跨域请求资源，这时就需要采取一些方法来解决这个问题。

常见的跨域解决方案包括：

1.CORS(Cross-Origin Resource Sharing)跨域资源共享：这是一种官方推荐的跨域解决方案，需要在服务端设置响应头，允许客户端跨域请求资源。

2.JSONP(JSON with Padding)跨域请求：这是一种兼容性比较好的跨域解决方案，它的原理是利用 script 标签没有跨域限制的特性，通过动态创建 script 标签，再将请求的数据作为回调函数的参数返回给客户端。

JSONP的实现原理是：客户端通过动态创建 script 标签，将需要跨域请求的 URL 作为 script 标签的 src 属性值，并在 URL 中携带一个回调函数的名称(一般为 callback 或 cb)，服务端收到请求后，根据参数进行处理，并将处理结果作为一个参数传递给客户端指定的回调函数，最后返回给客户端的内容为回调函数的调用，并将处理结果作为参数传递进去，这样客户端就可以获取到跨域请求的数据了。

1.将传入的data数据转化为url字符串形式
2.处理url中的回调函数
3.创建一个script标签并插入到页面中
4.挂载回调函数

(function (window,document) {
    "use strict";
    var jsonp = function (url,data,callback) {

        // 1.将传入的data数据转化为url字符串形式
        // {id:1,name:'jack'} => id=1&name=jack
        var dataString = url.indexof('?') == -1? '?': '&';
        for(var key in data){
            dataString += key + '=' + data[key] + '&';
        };

        // 2 处理url中的回调函数
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
        dataString += 'callback=' + cbFuncName;

        // 3.创建一个script标签并插入到页面中
        var scriptEle = document.createElement('script');
        scriptEle.src = url + dataString;

        // 4.挂载回调函数
        window[cbFuncName] = function (data) {
            callback(data);
            // 处理完回调函数的数据之后，删除jsonp的script标签
            document.body.removeChild(scriptEle);
        }

        document.body.appendChild(scriptEle);
    }

    window.$jsonp = jsonp;

})(window,document)