原生Javascript实现JSONP

/*

封装一个jsonp方法，可以使用如下方式调用：

jsonp(url,[,data],[,callbackName])

*/

jsonp('http://photo.sina.cn/aj/index',

{page:1, cate:'recommend'},'jsoncallback')

.then(data => {

console.log(data);

})

function jsonp(url,data,callback){

     return new Promise((resolve, reject) => {

        let _url = url + '?page=' + data.page + '&cate=' + data.cate+'&callback='+callback;  //一定要有一个回调函数

        const callbackName = callback;

        let head = document.getElementsByTagName('head')[0];

        //设置传递给后台的回调参数名

        let script = document.createElement('script');

        head.appendChild(script);

        //创建jsonp回调函数

        window[callbackName] = json =>{

            resolve(json)

            head.removeChild(script);

            clearTimeout(script.timer);

            window[callbackName] = null;

        }

        //发送请求

        script.src = _url;

     })

};

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是一种非常常用的跨域请求方法。主要原理是利用script标签可以跨域请求的特性，由其src属性发送请求到服务器，服务器返回javascript代码，浏览器接收响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的

JSONP由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般在请求中指定。当服务器响应时，服务器端就会把函数和数据拼成字符串返回。

JSONP的请求过程：

请求阶段：浏览器创建一个script标签，并给其src赋值（类似http://example.com/api?callback=jsonCallback）

发送请求：当给script的src赋值时，浏览器就会发起一个请求

数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起返回。当浏览器接收到了响应数据，由于发起请求的是script，所以相当于直接调用jsonCallback方法，并且传入一个参数