Ausführliche Erklärung basierend auf dem JSONP-Prinzip

Dieser Artikel empfiehlt hauptsächlich eine auf JSONP-Prinzipien basierende Analyse. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Das erste Projekt, mit dem ich seit meiner Arbeit in Kontakt kam, war die Trennung von Front-End und Back-End. Die statischen Front-End-Dateien haben ihre eigenen unabhängigen Domänennamen Daten werden über die Schnittstelle zum Rendern und für andere Vorgänge abgerufen.

Es besteht keine Notwendigkeit, näher auf domänenübergreifende Methoden einzugehen. Suchen Sie einfach und es wird viele geben, aber die am häufigsten verwendeten Methoden sind JSONP und CORS. JSONP konzentriert sich auf das Front-End, was als Front-End-Hack-Fähigkeiten angesehen werden kann, die wichtiger sind als das Back-End, und der Server muss stärker konfiguriert werden.

Dieser Artikel analysiert das Implementierungsprinzip von JSONP.

Grundprinzip

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.

Skript-Tag erstellen

Dynamische Skriptelemente werden in „Hochleistungs-JavaScript“ erwähnt:

1 Der Download der Datei beginnt, wenn das Element hinzugefügt wird Seite. . 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 darauf warten, dass alle vorherigen dynamischen Skriptknoten die Ausführung abschließen). selbst, dieser Mechanismus Es funktioniert gut.

Zitat 1 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 dem Empfang 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. Wenn beispielsweise die folgende Anfrage initiiert wird:

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

, dann gibt der Server den folgenden Inhalt zurück:

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

Natürlich, da dies der Inhalt ist, der im dynamisch geladenen Skript enthalten ist Tag, Dann ist dies ein Stück selbstausführender Code. In diesem Code wird nur eine Funktion 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 ist 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 , wird die jsonp0-Funktion ausgeführt und der darin enthaltene successCallback-Rückruf wird ebenfalls ausgeführt.

Verbessern Sie es

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

Da jsonp0 unsere Anforderungen erfüllen kann, fragen wir uns oft, warum Was ist mit den Codes, die nacheinander jsonp1, jsonp2 usw. hinzufügen?

Das liegt daran, dass die Anfragen asynchron erfolgen können. 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.

Wir müssen also im Namen des Rückrufs unterscheiden, und die Akkumulation kann den Bedarf decken.

Ä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 gibt es noch einen wichtigen Punkt, mit dem Sie sich befassen müssen, nämlich den 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 Implementierung 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 müssen möglicherweise einige kompatible Änderungen vorgenommen werden Wird als vollständige JSONP-Methode betrachtet.

REFER

"High Performance JavaScript"

Eine JSONP-Implementierung auf npm, JSONP

Verwandte Empfehlungen:

Zusammenfassung zur Verwendung von Ajax und JSONP

Wie natives JS AJAX, JSONP implementiert

Jsonp-Prinzipien und einfache Implementierungsmethoden

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung basierend auf dem JSONP-Prinzip. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!