Implementierungsprinzip von JSONP

Dieses Mal werde ich Ihnen die Implementierungsprinzipien von JSONP und die Vorsichtsmaßnahmen bei der Verwendung von JSONP vorstellen. Hier sind praktische Fälle, schauen wir uns das an.

Das Implementierungsprinzip von JSONP

Ich glaube, dass viele Menschen, die sich mit der Front-End- und Back-End-Trennung beschäftigen, oft JSONP ausgesetzt sind. Viele Anfänger wissen es jedoch nicht Wie Sie JSONP und dessen Implementierungsprinzip implementieren, wird Ihnen in diesem Artikel ausführlich vorgestellt. Wenn Sie interessiert sind, werfen Sie einen Blick darauf.

Grundprinzipien

Das Grundprinzip ist leicht zu erklären. Es gibt einige Tags in HTML-Seiten, die keinen domänenübergreifenden Einschränkungen unterliegen, wie z. B. img, script, link usw. Wenn wir die benötigten Daten in eine js-Datei einfügen, können wir die Same-Origin-Beschränkung des Browsers durchbrechen.

Erstellen Sie ein Skript-Tag

Dynamische Skriptelemente werden in „High Performance JavaScript“ erwähnt und der Autor schreibt:

1. Der Download der Datei beginnt, wenn das Element zur Seite hinzugefügt wird. Der entscheidende Punkt dieser Technik besteht darin, dass bei jedem initiierten Download der Download und die Ausführung der Datei andere Prozesse auf der Seite nicht blockieren.

2. Wenn Sie dynamische Skriptknoten zum Herunterladen von Dateien verwenden, wird der zurückgegebene Code normalerweise sofort ausgeführt (mit Ausnahme von Firefox und Oprea, die warten, bis alle vorherigen dynamischen Skriptknoten die Ausführung abgeschlossen haben). Wenn das Skript selbst ausgeführt wird, funktioniert dieser Mechanismus normal .

Zitat1 stellt sicher, dass der Hauptthread nicht blockiert wird, wenn JSONP-Anfragen gestellt werden. Zitat 2 stellt sicher, dass es keine Fehler gibt, wenn der JSONP-Code unmittelbar nach Abschluss des Ladevorgangs selbst ausgeführt wird.

Rückruf

Nach Erhalt der GET-Anfrage ermittelt der Server normalerweise, ob ein Rückrufparameter vorhanden ist. Wenn ja, muss er außerhalb der zurückgegebenen Daten einen Methodennamen und Klammern hinzufügen. Leiten Sie beispielsweise die folgende Anfrage ein:

http://www.a.com/getSomething?callback=jsonp0

Dann gibt der Server den folgenden Inhalt zurück:

jsonp0({code:200,data:{}})

Da dies der Inhalt des dynamisch geladenen Skript-Tags ist, handelt es sich offensichtlich um einen selbstausführenden Code, und nur eine Funktion dieses Codes wird aufgerufen – jsonp0.

Wenn es eine Ausführung gibt, muss diese natürlich zuerst erstellt werden, sonst wird ein Fehler gemeldet. Dieser Erstellungsschritt muss vor dem Aufruf ausgeführt werden.

Die spezifische Implementierung lautet wie folgt:

function jsonp (url, successCallback, errorCallback, completeCallback) {
 // 声明对象，需要将函数声明至全局作用域
 window.jsonp0 = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
}

Das Obige vervollständigt im Grunde den Kern einer JSONP-Methode. Zu diesem Zeitpunkt ist JSONP0 eine Funktion, die wir deklariert haben. Wenn der Server normal zurückkehrt, wird die JSONP0-Funktion ausgeführt, und der darin enthaltene SuccessCallback-Rückruf wird ebenfalls ausgeführt.

Verbessere es

In tatsächlichen Situationen werden normalerweise viele JSONP-Anfragen gleichzeitig aufgerufen,

Da jsonp0 unsere Anforderungen erfüllen kann, warum sehen wir dann oft, dass der Code von jsonp1, jsonp2 usw. nacheinander akkumuliert wird?

Dies liegt daran, dass viele Anfragen möglicherweise asynchron gestellt werden. Wenn die JSONP-Methode zum ersten Mal ausgeführt wird, ist window.jsonp0 die Funktion A. Zu diesem Zeitpunkt wird die JS-Datei geladen. Wenn JS nicht geladen wird, wird die JSONP-Methode erneut aufgerufen Funktion B. Nachdem die beiden js geladen wurden, wird der zweite Rückruf ausgeführt.

Daher müssen wir im Namen des Rückrufs unterscheiden, und die Akkumulation kann den Anforderungen gerecht werden.

Ändern Sie den Code:

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
 var jsId = 'jsonp' + jsonpCounter++;
 // 声明对象，需要将函数声明至全局作用域
 window[jsId] = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
  clean();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
 //在执行完我们这个方法以后，会有很多script标签出现在head之前，我们需要手动的删除掉他们。
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
 }
}

Nach dem Hinzufügen von Akkumulation und Bereinigung muss noch ein weiterer wichtiger Punkt behandelt werden, nämlich der Fehlerrückruf. Wenn wir JSONP anfordern, legen wir normalerweise eine Zeitüberschreitung fest. Wenn diese Zeit überschritten wird, wird eine Zeitüberschreitungsausnahme ausgelöst.

Die Umsetzung ist wie folgt:

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
 // 略去上面写过的代码
 var 
  timeout = timeout || 10000
  , timer
 ;
 if (timeout) {
  timer = setTimeout(function () {
   if (errorCallback) {
    errorCallback(new Error('timeout'));
   }
   clean();
  }, timeout)
 }
 function clean () {
  script.parentNode.removeChild(script);
  window[jsId] = function(){};
  if (timer) clearTimeout(timer);
 }
}

Auf diese Weise sind grundsätzlich alle Funktionen von JSONP abgeschlossen, und für den Rest sind möglicherweise einige kompatible Änderungen erforderlich, um als vollständige JSONP-Methode betrachtet zu werden.

REFERENZ

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Methoden zum Übergeben von Parametern zwischen Vue-Router-Komponenten

Vue.js mobile Komponentenbibliothek Anleitung Verwenden Sie

Das obige ist der detaillierte Inhalt vonImplementierungsprinzip von JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!