在沒有外部庫的情況下從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);