一、使用jsonp解决同源限制问题

1.将不同源的服务器端请求地址写在 script 标签的 src 属性中

<script src="www.example.com"></script>

2. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name: "张三", age: "20"})';
res.send(data);

3. 在客户端全局作用域下定义函数 fn

function fn (data) { }

4. 在 fn 函数内部对服务器端返回的数据进行处理

function fn (data) { console.log(data); }

二、jsonp封装

function jsonp (options) {
  // 动态创建script标签
  var script = document.createElement('script');
  // 拼接字符串的变量
  var params = '';

  for (var attr in options.data) {
    params += '&' + attr + '=' + options.data[attr];
  }

  // myJsonp0124741
  var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
  // 它已经不是一个全局函数了
  // 我们要想办法将它变成全局函数
  window[fnName] = options.success;
  // 为script标签添加src属性
  script.src = options.url + '?callback=' + fnName + params;
  // 将script标签追加到页面中
  document.body.appendChild(script);
  // 为script标签添加onload事件
  script.onload = function () {
    document.body.removeChild(script);
  }
}

三、jsonp 优缺点

1. 优点

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

2.缺点

它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

四、总结

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

jsonp的简单封装