jQuery JSONP 学习笔记

什么是 JSONP？

JSONP（JSON with Padding）是一种解决跨域问题的方法，其原理是利用 script 标签的 src 属性可以访问不同源的资源的特性。具体来说，当我们在网页中插入一个指向跨域的资源的 script 标签时，浏览器会像普通的 script 标签一样执行它的内容，并且在执行完成后会将该资源的内容作为参数传递给指定的回调函数。这个回调函数通常会处理从跨域的资源获取到的数据。

如何使用 jQuery 实现 JSONP

使用 jQuery 实现 JSONP 非常简单。我们只需要通过 $.ajax() 方法发送一个 GET 请求，并且设置 dataType 为 "jsonp"，同时指定回调函数名和回调函数即可：

javascriptCopy Code
$.ajax({
   url: "http://example.com/api",
   dataType: "jsonp",
   jsonpCallback: "myCallback",
   success: function(data) {
     // 处理获取到的数据
   }
 });

其中，url 参数表示跨域的资源地址，dataType 参数表示数据类型为 JSONP，jsonpCallback 参数表示指定的回调函数名，success 参数则表示请求成功后执行的回调函数。

jQuery JSONP 实例

假设我们要从 https://api.github.com/users/octocat 获取 octocat 的用户信息。我们可以通过以下代码实现：

javascriptCopy Code
$.ajax({
    url: "https://api.github.com/users/octocat",
    dataType: "jsonp",
    jsonpCallback: "myCallback",
    success: function(data) {
        console.log("用户名：" + data.login);
        console.log("头像：" + data.avatar_url);
        console.log("URL：" + data.html_url);
    }
});

function myCallback(data) {
    // do nothing
}

在这个例子中，我们通过调用 GitHub 的 API 接口获取了 octocat 的用户信息，并且在成功获取到数据后，我们在控制台中输出了获取到的用户名、头像和 URL 信息。

注意，我们必须提供一个名为 myCallback 的回调函数，该函数会在跨域的资源加载完成并且执行完成后被调用，否则 jQuery 将会自动生成一个随机的函数名作为回调函数名。