如何实现一个优秀的 JSONP 接口？

16 min read

实现一个 JSONP 需要以下步骤：

  1. 创建一个可以接受回调函数作为参数的 URL。
  2. 创建一个函数来处理 JSON 数据并执行回调函数。
  3. 在 HTML 页面中创建一个 <script> 标签，将 JSONP URL 作为其 src 属性的值。
  4. 在 HTML 页面中定义一个回调函数，该函数与 JSONP URL 中的回调函数名称匹配。
  5. 当 JSON 数据被响应并加载后，JSONP 函数会开始执行回调函数。

下面是一个实现 JSONP 的示例代码：

// 设置 JSONP URL 和回调函数名称
var url = 'http://example.com/data?callback=handleData';
var callbackName = 'handleData';

// 创建 JSONP 函数并定义回调函数
function jsonp(url, callbackName, callback) {
  // 在全局对象 window 中创建一个与回调函数名称相同的函数
  window[callbackName] = function(data) {
    // 执行回调函数
    callback(data);
    // 删除全局对象中创建的函数
    delete window[callbackName];
  };
  
  // 创建一个新的 Script 元素
  var script = document.createElement('script');
  script.src = url;
  // 将 Script 元素添加至文档头部
  document.head.appendChild(script);
}

// 调用 JSONP 函数并定义回调函数
jsonp(url, callbackName, function(data) {
  console.log(data);
});

在调用 JSONP 函数时，需要传入 URL、回调函数名称和回调函数。上述代码通过在全局对象中创建一个与回调函数名称相同的函数，并使用 Script 元素将 JSONP URL 添加到文档头部来实现 JSONP。当 JSON 数据被响应并加载后，全局对象中创建的函数会执行，并执行定义的回调函数。