JSONP-Anfragen aus JavaScript ohne externe Bibliotheken erstellen

Für domänenübergreifende JSONP-Anfragen in JavaScript sind externe Bibliotheken wie jQuery nicht immer erforderlich. Hier ist eine Anleitung, wie Sie dies mit reinem JavaScript erreichen:

Schritt 1: Erstellen Sie eine Rückruffunktion

Beginnen Sie mit der Definition einer Rückruffunktion zum Empfangen und Verarbeiten der JSONP-Antwort. Im bereitgestellten Beispiel führt die Funktion foo diese Aufgabe aus:

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

Schritt 2: Dynamisch ein Skriptelement erstellen

Als nächstes erstellen Sie ein

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

Schritt 3: Skriptelement an das DOM anhängen

Einmal das

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

Für moderne Browser können Sie diese Zeile wie folgt vereinfachen:

document.head.appendChild(script);

Beispiel

Zusammenfassend sehen Sie hier ein vollständiges Beispiel für die Erstellung einer JSONP-Anfrage in JavaScript ohne externe Bibliothek :

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