如何使用 JSONP 在 JavaScript 中发出跨域 HTTP 请求？-js教程-PHP中文网

如何使用 JSONP 在 JavaScript 中发出跨域 HTTP 请求？

Mary-Kate Olsen

发布： 2024-10-31 04:46:30

原创

470 人浏览过

How to Make Cross-Domain HTTP Requests in JavaScript Using JSONP?

使用 Native API 在 JavaScript 中进行 JSONP 请求

跨域 HTTP 请求经常会遇到同源策略，该策略会限制来自以下来源的请求不同的域或不安全 (HTTP) 域与安全 (HTTPS) 域。 JSONP（带填充的 JSON）是一种用于规避此限制的技术，允许 JavaScript 代码从不同域检索数据。

创建 JSONP 请求

使没有外部库的 JSONP 请求，请按照以下步骤操作：

创建回调函数： 定义一个将处理响应数据的 JavaScript 函数。该函数的名称将用作 JSONP 请求中的回调参数。
构造请求 URL： JSONP 请求 URL 应包含以下参数：
- 托管数据的服务器 URL
- 设置为回调函数名称的回调参数
- 要发送的数据（可选）
创建脚本元素：创建<script>元素并将其 src 属性设置为请求 URL。浏览器将执行此脚本并发送 JSONP 请求。</script>
附加脚本元素： 添加 <script>元素到 <head>或<正文>您的 HTML 文档的内容，这将触发请求。</script>

示例：

<code class="javascript">function foo(data) {
  // do stuff with data
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';

document.head.appendChild(script);</code>

登录后复制

解析响应数据：

收到响应数据后，将以数据作为参数调用回调函数。您可以使用 JavaScript 的内置 JSON.parse() 方法解析 JSON 响应，并在代码中使用生成的对象。

以上是如何使用 JSONP 在 JavaScript 中发出跨域 HTTP 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！