深入浅析Jsonp解决ajax跨域问题

什么是Jsonp

Jsonp（JSON with Padding）是一种跨域数据交互的技术，它的原理是利用 script 标签的跨域特性。Jsonp的工作流程大致如下：

• 前端页面创建一个 script 标签，其中 src 属性值为要访问的跨域地址url，并在url中传递一个回调函数的参数；
• 后端服务器解析请求，并在返回结果中包含一个回调函数和需要返回的数据，回调函数的参数即为需要返回的数据；
• 前端页面接收到数据后执行回调函数，并根据需要对返回的数据进行处理。

Jsonp的优缺点

优点

• 跨域请求，支持在客户端获取跨域数据；
• 兼容性良好，不受浏览器限制；
• 可以向多个域名请求数据；

缺点

• 只支持 get 请求；
• 存在安全问题，容易受到 XSS 攻击（需要后端进行特殊处理）；
• 需要服务器端的支持。

Jsonp的实现步骤

前端实现

在前端页面中创建一个 script 标签，请求一个跨域的url并传递一个回调函数名作为参数：

<script>
  function callback(data) {
    console.log(data);
  }

  var script = document.createElement("script");
  script.src = "http://example.com/jsonp?callback=callback";
  document.head.appendChild(script)
</script>

后端实现

后端服务器在解析请求时获取到参数 callback，将数据与该参数拼接成可执行的js代码返回给前端：

// Express示例
app.get('/jsonp', (req, res) => {
  const data = {name: 'test', age: 20};
  const { callback } = req.query
  res.send(`${callback}(${JSON.stringify(data)})`)
})

这里注意回调函数一定是仅包含字母、数字或下划线的Javascript标识符，不能使用其他的特殊字符。

示例一：使用jQuery的jsonp方法请求数据

jQuery为我们提供了一个jsonp的方法，可以快速地访问跨域数据。以下是一个通过jQuery实现jsonp方法访问跨域数据的例子：

$.ajax({
  type: "get",
  url: "http://example.com/jsonp",
  dataType: "jsonp",
  jsonp: "callback",
  success: function(data) {
    console.log(data);
  }
});

其中dataType: "jsonp"表示通过jsonp方式请求数据，jsonp: "callback"表示回调函数名称为callback。

示例二：使用原生JavaScript实现jsonp

以下是一个通过原生JavaScript实现jsonp的例子：

function jsonp(url, callback) {
  const script = document.createElement("script");
  script.src = `${url}&callback=${callback}`;
  document.head.appendChild(script);
  const removeScript = function () {
    document.head.removeChild(script);
  }

  window[callback] = function (data) {
    console.log(data);
    window[callback] = undefined;
    setTimeout(removeScript, 0);
  }
}

jsonp("http://example.com/jsonp", "callback");

其中jsonp函数接收一个url和一个回调函数名称作为参数，通过正则表达式将回调函数名称拼接到url上，创建一个script标签并插入到document中，在全局定义回调函数，接收并处理返回结果。最后在回调函数中删除创建的script标签，并将全局定义的回调函数设为undefined。

这是一个基础的jsonp实现，仅供学习参考。实际使用时应该对安全性进行进一步的考虑和优化。