如何使用 JSONP 在 JavaScript 中发出跨域 HTTP 请求？
- Mary-Kate Olsen原创
- 2024-10-31 04:46:30474浏览
使用 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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn