JavaScript学习 -- jsonp跨域请求

在现代 Web 应用程序的开发中,由于跨域访问的限制,经常需要在不同的域之间传输 JSON 数据。但是,浏览器强制遵循同源策略,限制了浏览器从一个域向另一个域请求数据的能力。为此,我们可以使用 JSONP(JSON with Padding)技术,它通过动态创建 script 标签实现了跨域传输 JSON 数据。

JSONP 实现了一个简单但非正式的协议,在客户端发出一个 GET 请求时,服务端返回一些 JavaScript 代码,使客户端能够利用这些代码执行回调。JSONP 非常适合用于构建跨域的 JSON 数据请求,但不能用于 POST 请求等其他类型的 Ajax 请求。本文将介绍如何在JavaScript中使用JSONP,并提供一个实际的例子。

实现JSONP

JSONP 可以通过以下代码实现:

function jsonp(url, callbackName, callback) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;

  window[callbackName] = (data) => {
    callback(data);
    document.body.removeChild(script);
  };

  document.body.appendChild(script);
}

我们可以看到,这个函数有三个参数:

  • url: JSONP 数据请求的 URL。

  • callbackName: 在服务端接受回调函数名的参数名。

  • callback: 接收 JSONP 数据的回调函数。

这个函数会动态地创建一个新的 script 标签,为获取 JSONP 数据请求 URL 添加一个查询参数 callback=callbackName。回调函数的名字将保留在查询参数中,以便服务端能够读取。

然后,在全局命名空间中,我们暴露这个名为 callbackName 的回调函数,并在脚本标签的 load 事件处理函数上执行这个函数。核心代码如下:

window[callbackName] = (data) => {
    callback(data);
    document.body.removeChild(script);
};

最后,我们再将新创建的 script 标签添加到文档中。因为该代码是通过

你可能感兴趣的:(JS逆向,javascript,学习,网络)