Detaillierte Interpretation der JSONP-Prinzipien

Der unten stehende Herausgeber empfiehlt eine auf JSONP-Prinzipien basierende Analyse, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Vorwort

Das erste Projekt, mit dem ich seit Beginn meiner Arbeit in Berührung kam, ist die Front- End- und Back-End-Trennung, und das Front-End ist statisch. Die Datei verfügt über einen eigenen unabhängigen Domänennamen, und Daten werden über die Schnittstelle für Rendering und 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 es nicht sind Domain-Einschränkungen wie IMG, Skript, Link usw. dürfen überschritten werden. 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 „High Performance JavaScript“ erwähnt. Der Autor schreibt:

Die Datei befindet sich hier Element Beim Hinzufügen zur Seite mit dem Herunterladen beginnen. Der entscheidende Punkt dieser Technologie 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 muss der Server normalerweise feststellen, ob ein Rückrufparameter vorhanden ist. Wenn ja, muss er dies tun in den zurückgegebenen Daten enthalten sein. Fügen Sie einen Methodennamen und Klammern außerhalb der Daten hinzu. Wenn Sie beispielsweise die folgende Anfrage initiieren:

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

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

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

Da dies natürlich der Inhalt ist, der im dynamisch geladenen Skript-Tag enthalten ist, dann dies ist ein Absatz Selbstausführender Code, dieser Code hat nur eine Funktion namens 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 Der Server ist normal. Bei der Rückkehr 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,

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

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 sind möglicherweise einige kompatible Änderungen erforderlich, um als vollständige JSONP-Methode betrachtet zu werden.

REFER

《Hochleistungs-JavaScript》

Eine JSONP-Implementierung auf npm, JSONP

Die Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie explizite Konvertierung und implizite Konvertierung in Javascript

So verwenden Sie die Redux-Architektur in ReactNative

Welche Probleme treten bei der Verwendung von MathJax in Angular auf?

NodeJS zum Schreiben von Crawler-Beispielen verwenden

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