在前端开发中，我们经常需要从不同的域名下获取数据。然而，由于浏览器的同源策略限制，直接通过 Ajax 请求跨域资源是被禁止的。这时候，JSONP（JSON with Padding）就派上用场了。
JSONP 是一种通过动态创建 script 标签来实现跨域请求的技术。与普通的 Ajax 相比，JSONP 可以跨域请求数据，因为 script 标签可以加载任何域名下的 JavaScript 文件。JSONP 通过约定返回的数据格式，使得客户端能够获取到目标数据。
在本文中，我们将学习如何使用 jQuery 来创建 JSONP 请求，并展示一个简单的示例代码。
创建JSONP请求
首先，我们需要使用 jQuery 的 $.ajax() 函数来创建请求：
$.ajax({
url: "http://example.com/data",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});在以上代码中，我们传入了三个参数：
- url: 要请求的 URL。
- dataType: 指定请求数据的类型为 JSONP。
- success: 请求成功时执行的回调函数。
处理JSONP响应
当服务器返回 JSONP 响应时，它应该是一个普通的 JavaScript 函数调用，该函数的参数即为要返回的数据。例如，当我们请求以下 URL 时：
http://example.com/data?callback=handleData
服务器将返回以下内容：
handleData({"name": "John", "age": 30})这里的 handleData 是客户端预定义的一个回调函数名，用于接收服务器返回的数据。在请求中，我们需要通过 jsonpCallback 参数来指定该回调函数的名称：
$.ajax({
url: "http://example.com/data",
dataType: "jsonp",
jsonpCallback: "handleData",
success: function(data){
console.log(data);
}
});注意，在以上代码中，我们指定了 jsonpCallback 参数为 handleData，这个参数会被 jQuery 自动转换成 callback=handleData 的形式添加到 URL 后面，以告诉服务器客户端想要使用哪个回调函数。
示例代码
以下是一个简单的示例代码，展示了如何通过 JSONP 请求从外部 API 获取数据：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
------- -----------------------------------------------------------
--------
-------- ------------------------
----------------------
----------------------------------------------------
-
-----------------------------
--------
---- --------------------------------------------------------------------------------
--------- --------
-------------- ---------------
---
---
---------
-------
------
------------ ------------
---- -------------------
-------
-------在此示例中，我们通过 OpenWeatherMap API 获取伦敦的天气信息，并将返回结果展示在页面上。
总结
JSONP 是一种简单、有效的跨域数据交互方式。通过 jQuery 的帮助，我们可以轻松地创建和处理 JSONP 请求。在实际开发中，要注意服务器端返回的数据格式和回调函数名称，以确保客户端能够正确解析数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28422