如何在没有外部库的情况下使用 JavaScript 进行跨域 JSONP 请求？-js教程-PHP中文网

如何在没有外部库的情况下使用 JavaScript 进行跨域 JSONP 请求？

Susan Sarandon

发布： 2024-10-28 00:09:01

原创

1024 人浏览过

How to Make Cross-Domain JSONP Requests in JavaScript Without External Libraries?

在没有外部库的情况下从 JavaScript 发出 JSONP 请求

对于 JavaScript 中的跨域 JSONP 请求，并不总是需要像 jQuery 这样的外部库。以下是使用纯 JavaScript 实现此目的的指南：

第 1 步：创建回调函数

首先定义一个回调函数来接收和处理 JSONP 响应。在提供的示例中，foo 函数执行此任务：

<code class="javascript">function foo(data) {
  // Do something with the JSON response here
}</code>

登录后复制

第 2 步：动态创建脚本元素

接下来，创建一个 <script>元素并将其 src 属性设置为 JSONP 端点。确保将回调函数名称包含为查询参数：</script>

<code class="javascript">var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';</code>

登录后复制

第 3 步：将脚本元素附加到 DOM

一旦 <script>创建元素后，将其附加到 <head> 中该文件的。这将启动 JSONP 请求：</script>

<code class="javascript">document.getElementsByTagName('head')[0].appendChild(script);</code>

登录后复制

对于现代浏览器，您可以将此行简化为：

<code class="javascript">document.head.appendChild(script);</code>

登录后复制

示例

将这些步骤组合在一起，这是一个完整的在没有外部库的情况下使用 JavaScript 发出 JSONP 请求的示例：

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

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

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

登录后复制

以上是如何在没有外部库的情况下使用 JavaScript 进行跨域 JSONP 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！