JSONP

JSONP 是一种跨域技术，其全称为 JSON with padding。

JSONP 由两部分组成：

• 回调函数：当响应到来时应该在页面中调用的函数。函数名称一般是在请求中指定。
• 数据：传入回调函数中的 JSON 数据。

JSOPN 是通过动态 <script> 元素使用的，<script> 标签能够不受限制地从其他域加载资源。

一个 JSONP 请求的格式为 url?callback=handleResponse，handleResponse 为回调函数名称。下面举一个使用 JSOPN 的例子：

<script>
  function handleResponse(data) {
    console.log("data", data);
  }
  function handleError(event) {
    cosnole.log("event", event);
  }
  const script = document.createElement("script");
  script.src =
    "https://jsonplaceholder.typicode.com/todos/1?callback=handleResponse";
  script.onerror = handleResponse;
  document.body.insertBefore(script, document.body.firstChild);
</script>

上面的例子中，向 script 添加了一个 onerror 事件处理函数，来确定 JSONP 请求是否失败。

需要注意的是 JSONP 仅支持 GET 请求，其优势在于对老的浏览器兼容性好。

JSONP 相关库：

• jsonp