通过 JSONP 获取 JSON 数据实现 AJAX 跨域请求
在前端开发中，AJAX 是一种常见的技术手段，可以通过异步请求获取服务器上动态生成的数据，而不必刷新整个页面。然而，由于同源策略的限制，AJAX 请求通常只能向与当前网页具有相同原点的服务器发送请求。为了解决这个问题，我们可以使用 JSONP 技术来实现跨域请求。
JSONP 的原理
JSONP 全称是 JSON with Padding，它是一种利用 <script> 标签实现跨域请求的技术。与 AJAX 不同，JSONP 并不是通过 XMLHttpRequest 对象发送请求，而是通过动态创建 <script> 标签的方式来获取数据。具体来说，JSONP 在客户端创建一个新的 <script> 标签，该标签的 src 属性指向一个服务器上的 URL，同时在该 URL 后面添加一个回调函数的名称作为参数。服务器在处理请求时，会将需要返回的数据包装在这个回调函数中，最后将整个结果以字符串的形式返回给客户端。当客户端接收到响应时，浏览器会自动执行这个回调函数，从而实现对返回数据的处理。
由于 JSONP 请求是通过 <script> 标签实现的，因此不受同源策略的限制，可以从任何域名下获取数据。但是，JSONP 只支持 GET 请求，因为浏览器在动态添加 <script> 标签时只能使用 GET 方法。
JSONP 的示例
下面是一个简单的 JSONP 示例代码：
-------- ------------------------ - ---------------------- - --- ------ - --------------------------------- ---------- - ------------------------------------------------------- ----------------------------------
在这个示例中，我们通过创建一个新的 <script> 标签来获取 https://example.com/api/data 这个 URL 返回的数据。其中，回调函数名称为 handleResponse，将作为参数传递给服务器。当服务器返回数据时，它会以以下形式的 JavaScript 代码的形式返回：
---------------- ------- ------- ------ --- ------- ---- ----- ---
浏览器会直接将这段代码插入到页面中，并自动执行其中的 handleResponse 函数，从而将返回数据打印到控制台上。
JSONP 的注意事项
- 回调函数名必须是合法的 JavaScript 标识符，并且不能与全局变量重名；
- 回调函数必须在发送请求之前就定义好，以便服务器能正确地将数据包装在其中；
- 使用 JSONP 请求时，请务必确保服务器返回的数据不会引起安全问题，不要轻易地信任第三方网站返回的数据；
- 如果服务器返回的数据格式不是预期的 JSON 格式，浏览器会抛出异常并导致代码无法执行。
结语
JSONP 技术虽然已经有些过时，但在某些情况下仍然非常有用。通过了解 JSONP 的原理和注意事项，我们可以更好地使用它来实现 AJAX 跨域请求，并避免一些常见的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/870