Eingehende Analyse des JSONP-Protokolls „principle

Eingehende Analyse des JSONP-Protokolls „principle_json'.

WBOY

Freigeben： 2016-05-16 15:38:02

Original

1985 Leute haben es durchsucht

Heute müssen wir bei der Entwicklung des gemeinsamen Debuggens Daten über Domänen hinweg abrufen. Da jquery verwendet wird, kann das Problem natürlich leicht durch die Verwendung von dataType:'jsonp' gelöst werden.
Da das Backend zu diesem Zeitpunkt jedoch keinen JSONP-Zugriff unterstützte, fragte er mich später bei der Implementierung dieser Funktion: Welches Format wird im JSONP-Format zurückgegeben? Ich wusste nur, wie man es benutzt, aber ich konnte die Antwort nicht herausfinden. . .

Obwohl es später gelöst wurde, machte ich mir, der ich gerne Probleme löse, immer Sorgen darüber. Ich musste dies gründlich recherchieren, also begann ich, die Informationen zu lesen, und nachdem ich sie gesehen hatte, verspürte ich eine plötzliche Erleuchtung Ich hatte vor, Notizen zu machen, die ich mit allen teilen kann.

Der Unterschied zwischen JSON und JSONP

Obwohl es nur einen Buchstabenunterschied zwischen JSON und JSONP gibt, sind sie eigentlich überhaupt nicht dasselbe: JSON ist ein Datenaustauschformat und JSONP ist ein domänenübergreifendes Dateninteraktionsprotokoll. Was Sie mit der JSONP-Methode erhalten ist immer noch Es handelt sich um Daten im JSON-Format.

Um es ganz klar auszudrücken: 用JSON来传数据，靠JSONP来跨域.

JSONP im Detail erklärt

Wir alle wissen: 一个页面的ajax只能获取和此页面同域的数据。 Wenn wir also Daten über Domänen hinweg abrufen müssen, müssen wir die JSONP-Methode verwenden, um sie abzurufen.

Wie in der Abbildung unten gezeigt, handelt es sich um die Fehlermeldung, die bei Verwendung des JSON-Formats zum Abrufen domänenübergreifender Daten zurückgegeben wird:

Wie lässt sich das Problem lösen? Front-End-Kinderschuhe, die Frameworks verwenden, verfügen möglicherweise über eigene entsprechende Methoden. Jquery kann das Problem beispielsweise durch einfaches Hinzufügen von dataType设为jsonp lösen. Haben wir jedoch jemals darüber nachgedacht, warum es auf diese Weise gelöst werden kann? Was ist die zentrale Idee?

Das Folgende ist eine detaillierte Erklärung für Sie. Die erste Idee besteht darin, scipt-Tags zu verwenden, um domänenübergreifende Daten einzuführen. Lassen Sie uns langsam von Anfang an in den JSONP-Prozess einsteigen.

Leitfaden Schritt 1

Schreibenb.com/b.js Inhalt:

Code kopieren Der Code lautet wie folgt:

alert('hello');

Dann schreiben Sie a.com/a.htmlInhalt:

Code kopieren Der Code lautet wie folgt:

Neueste Artikel des Autors