jQuery JSONP 示例

JSONP（JSON with Padding）是一种传统的跨域通信技术，它利用 <script> 标签的特性来绕过同源策略限制。在使用 jQuery 进行 JSONP 请求时，您可以使用 $.ajax 方法，并设置 dataType 为 "jsonp"。jQuery 会自动处理 JSONP 请求的细节，包括动态创建 <script> 标签和处理返回的数据。

以下是一个使用 jQuery 进行 JSONP 请求的示例代码：

$(document).ready(function(){
    // 定义回调函数
    function jsonpCallback(data) {
        console.log("Received data:", data);
    }

    // 使用 jQuery 发起 JSONP 请求
    $.ajax({
        url: "http://yourdomain.com/api/data", // API 的 URL
        dataType: "jsonp", // 指定数据类型为 JSONP
        jsonp: "callback", // 服务器期望的 JSONP 回调参数名
        jsonpCallback: "jsonpCallback", // 指定本地回调函数名
        success: function(response) {
            // 处理返回的数据
            console.log("Successful JSONP call:", response);
        },
        error: function(xhr, textStatus, errorThrown) {
            // 处理错误情况
            console.error("Error in JSONP call:", textStatus, errorThrown);
        }
    });
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

在上述代码中，jsonpCallback 函数是在客户端定义的，用于处理服务器返回的数据。$.ajax 方法中的 jsonp 选项指定了服务器端期待的 JSONP 回调参数名，通常这个参数名是 "callback"。jsonpCallback 选项则指定了实际在客户端使用的回调函数名。

服务器端需要准备好对应的接口，能够接收 JSONP 请求，并返回一个符合 JSONP 格式的响应。响应的结构通常是将客户端传递的回调函数名作为函数调用的一部分，后跟实际的 JSON 数据。

请注意，JSONP 只能用于 GET 请求，并且依赖于外部服务器支持 JSONP 响应。此外，由于 JSONP 涉及动态插入 <script> 标签，因此不能像常规 AJAX 请求那样设置请求头或处理响应头。