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

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

第 1 步：创建回调函数

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

function foo(data) {
  // Do something with the JSON response here
}

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

接下来，创建一个

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

第 3 步：将 Script 元素附加到 DOM

一旦

document.getElementsByTagName('head')[0].appendChild(script);

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

document.head.appendChild(script);

示例

将这些步骤放在一起，下面是一个在没有外部库的情况下在 JavaScript 中发出 JSONP 请求的完整示例:

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);