在Web开发中，跨域请求是很常见的需求，而JSONP是实现跨域请求的一种方式。本文将介绍JSONP的原理、优劣势以及使用步骤。
JSONP原理
JSONP(JSON with Padding) 是一种跨域数据交互的技术方案。它利用了 HTML 标签（script） 和 DOM 元素（img）在 web 页面间的跨域访问特性。JSONP 的原理可以概括为：
- 客户端通过 script 标签发起一个 GET 请求，URL 中包含一个回调函数名（callback）和其他参数。
- 服务器接收到请求后，生成相应内容并将回调函数名和响应数据作为参数包裹在回调函数中返回给客户端。
- 客户端接收到响应后，自动执行回调函数，从而实现跨域数据交互。
下面是一个简单的 JSONP 示例：
-- -------------------- ---- ------- -- --- -------- ------------- - ------------------ - --- ------ - --------------------------------- ---------- - ------------------------------------------ ---------------------------------- -- --- --------- ----- ----- ---- -- ---
在这个示例中，客户端通过创建一个 script 标签来请求服务端的数据。由于 URL 中包含 callback 参数，因此服务端返回的数据将被包裹在回调函数中。客户端在 script 标签加载完毕后会自动执行 getData 函数，并将获取到的数据作为参数传入。
JSONP优劣势
JSONP 作为跨域请求的一种实现方式，具有以下优点和缺点：
优点：
- 兼容性好：JSONP 的实现基于浏览器对 script 标签的支持，因此兼容性非常好，可以在几乎所有浏览器上使用。
- 简单易用：JSONP 的使用非常简单，只需要在 URL 中添加 callback 参数，并定义一个回调函数即可。
- 可以跨域访问任意数据类型：由于 JSONP 是通过 script 标签来获取数据的，因此它不受 XMLHttpRequest 对数据类型（比如 JSON）的限制，可以访问任何数据类型的资源。
缺点：
- 安全问题：JSONP存在安全隐患，因为它将服务器返回的数据直接插入到页面中，如果返回的数据中包含恶意脚本，就会被执行。
- 仅支持 GET 请求：由于 JSONP 的实现是通过创建 script 标签并设置其 src 属性来发送 GET 请求的，因此它只支持 GET 请求，不支持 POST 请求等其他类型的 HTTP 请求。
JSONP使用步骤
使用 JSONP 实现跨域请求的步骤如下：
- 在 HTML 页面中定义一个回调函数，并将其作为参数添加到请求 URL 中。
- 创建一个 script 标签，并将请求 URL 赋值给它的 src 属性。
- 在回调函数中处理返回的数据。
下面是一个使用 JSONP 实现跨域请求的完整示例：
-- -------------------- ---- ------- -- --- -------- -------------------- - --------------------- ------ - --- ------ - --------------------------------- ---------- - ------------------------------------------------- ---------------------------------- -- --- ---------------- ----- ----- ---- -- ---
在这个示例中，客户端定义了一个名为 handleResponse 的回调函数，并将其作为 callback 参数添加到了请求 URL 中。服务端返回的数据会被包裹在这个回调函数中，然后被自动执行。
总结
JSONP 是一种简单易用的实现跨域请求的方案，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2748