Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，用于get请求，只能请求支持jsonp的跨域的资源（即跨域读取数据），因为同源策略，所以我们需要使用JSONP。

1、JSONP的产生：

• 我们都知道Ajax拒绝一切的跨域请求（通过服务端代理可以实现跨域）。但是，Web页面上在调用js文件时则不受是否能跨域的影响，还有凡是拥有 "src"这个属性的标签都拥有跨域的能力，比如< script>、< img>；

• 所以我们可以在远程服务器上想办法把数据写进JavaScript格式的文件里，供客户端调用和处理；

• 这个时候出现了jsonp，jsonp是一种方式或者说非强制性协议，其核心是动态添加< script>标签来调用服务器提供的js脚本，原理是请求一个url，然后把服务器返回的数据进行处理；

• jsonp允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据；

• jsonp的纯字符数据格式还可以简洁的描述复杂数据，而且还被原生js支持，所以在客户端可以对这种格式的数据进行随心所欲的操作；

• 所以web客户端可以采取调用的方式，来调用跨域服务器上动态生成的js格式文件（一般以json为后缀）。 但jsonp也不一定非要用json格式来传递数据，如果我们愿意，字符串都行，但是这样不利于用jsonp提供公开的服务，存在一定的弊端；

• 最后，客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行展现和处理。

2、JSONP的封装：

function jsonp(url,success,data){
    data = data || {};
    let str = "";
    for(var key in data){
        str += `${key}=${data[key]}&`;
    }
    let t = new Date().getTime();
    str = str + "__hft="+t;
    var script = document.createElement("script");
    script.src = url + "?" + str;
    document.body.appendChild(script);
    window[data[data.fieldName]] = function(res){
        success(res);
    }
}