玩转跨域调用，jQuery JSONP让你轻松搞定

2023-05-14 17:39:44

JSONP：一种简单的跨域调用技术

什么是 JSONP？

JSONP（JSON with Padding）是一种跨域调用技术，允许浏览器从其他域获取数据。它利用了<script>标签的跨域特性，将数据包装成一个 JavaScript 函数，以便在浏览器中执行。

JSONP 的工作原理

当使用 JSONP 进行跨域调用时，jQuery 会动态创建一个<script>标签，并将其添加到当前文档的<head>中。<script>标签的src属性指向 JSONP 服务端的 URL，而 URL 中包含了一个回调函数的名称。

JSONP 服务端在收到请求后，将数据包装成一个 JavaScript 函数，并将其作为<script>标签的响应内容返回。浏览器在收到<script>标签的响应内容后，会自动执行该 JavaScript 函数，并将数据传递给回调函数。

如何使用 jQuery 进行 JSONP 调用？

使用 jQuery 进行 JSONP 调用非常简单，只需按照以下步骤：

在<head>中添加<script>标签，加载 jQuery 库。
编写 JSONP 回调函数。
调用 JSONP 请求，并指定 JSONP 服务端的 URL、数据类型、回调函数名称等参数。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <script>
    function myCallback(data) {
      console.log(data);
    }

    $.ajax({
      url: 'https://example.com/jsonp',
      dataType: 'jsonp',
      jsonp: 'callback',
      jsonpCallback: 'myCallback',
      success: function(data) {
        console.log(data);
      }
    });
  </script>
</body>
</html>