Bei der Begegnung mit Cross-Domänen-Problemen in der Projektentwicklung werden sie im Allgemeinen über JSONP gelöst. Aber was ist JSONP und was ist das Prinzip der Umsetzung? Sie können es während der Freizeit des Projekts sorgfältig untersuchen.
1. Was ist JSONP?
Um JSONP zu verstehen, muss ich JSON erwähnen, also was ist JSON?
JSON ist eine Untergruppe der Objektwörtlernotation von JavaScript. Da JSON eine Untergruppe von JavaScript ist, kann es in der Sprache ohne Muskus oder Aufregung verwendet werden.
JSONP (JSON With Padding) ist ein inoffizielles Protokoll, mit dem die Integration von Skript-Tags auf der Serverseite zum Client zurückkehren kann, und der Cross-Domain-Zugriff wird durch die Form des JavaScript-Rückrufs erreicht (dies ist nur eine einfache Implementierung von JSONP).
2. Wie nutzt JSONP?
Aufgrund der Einschränkung der gleichorientierten Richtlinie erlaubt XMLHTTPrequest nur die Ressourcen der aktuellen Quelle (Domänenname, Protokoll, Port). Um Cross-Domain-Anforderungen zu implementieren, können Cross-Domain-Anforderungen über Skript-Tags implementiert werden und dann JSON-Daten auf dem Server ausgeben und Callback-Funktionen ausführen, wodurch Cross-Domänen-Datenanforderungen gelöst werden.
Die Generation von JSONPP
1. Wie wir alle wissen, werden AJAX -Anfragenressourcen durch dieselbe Domäne eingeschränkt, unabhängig davon, ob es sich um statische Ressourcen, dynamische Seiten oder Webdienste handelt.
2. Gleichzeitig haben wir festgestellt, dass sie beim Aufrufen von JS-Dateien auf der Webseite nicht von der Cross-Domain betroffen sind (nicht nur das, wir haben auch festgestellt
3.. Es kann vorgestellt werden, dass, wenn Sie derzeit über das Web auf Daten über die Domänen zugreifen möchten (ActiveX -Steuerelemente, Serveragenten, HTML5 WebSockets usw.). Es gibt nur eine Möglichkeit, dh der Server lädt die Daten in eine JS -Formatdatei, damit Client anrufen und prozessiert
4. Datenübertragung. Wir wissen, dass ein reines Charakterdatenformat namens JSON präzise komplexe Datenstrukturen beschreiben kann und auch von JS nativ unterstützt wird. Es kann Daten in diesem Format auf dem Client problemlos verarbeiten.
5. Die Lösung ist auf einen Blick klar. Die Webseite ruft die dynamisch generierten JS-Dateien auf dem Cross-Domain-Server auf die gleiche Weise wie das aufrufende Skript auf. Der Grund, warum der Server JS -Dateien dynamisch generieren möchte, besteht darin, den Namen des Client -Rückrufs des Clients zu erhalten und die vom Client erforderlichen Daten in das JSON -Format (oder reine Zeichenfolge) zu übergeben.
6. Nachdem der Client die JS -Datei erfolgreich aufgerufen hat, werden die Parameter in der Rückruffunktion erhalten. Der Rest ist die Verarbeitung der Daten. Diese Methode sieht Ajax sehr ähnlich, ist aber nicht dasselbe (JQuery verkaps JSONP und AJAX zusammen, und wenn Sie nicht verstehen, werden Sie sie verwirren).
7. Um dem Kunden die Verwendung von Daten zu erleichtern, wurde allmählich ein informelles Übertragungsprotokoll gebildet. Die Leute nennen es JSONP. Einer der wichtigsten Punkte dieses Protokolls besteht darin, dass Benutzer einen Rückrufparameter an den Server übergeben können. Wenn der Server Daten zurückgibt, wird der Rückrufparameter als Funktionsname zum Wickeln der JSON -Daten verwendet, damit der Client seine eigenen Funktionen anpassen kann, um die Rückgabedaten automatisch zu verarbeiten.
Ok, ich weiß nicht, ob Sie JSONP verstehen. Wenn nicht, werde ich es zusammenfassen. Wenn Sie es nicht haben, schlagen Sie mich nicht.
Tatsächlich ist das Prinzip, dass der Client einen Link anfordert und die erforderlichen Parameter hinzufügt. Rückruf bedeutet, dass es sich um eine JSONP-Anfrage handelt (das Front-End und das Back-End können von sich selbst einheitlich sein). Der Hintergrund analysiert den Anforderungslink und stellt fest, dass es sich um eine JSONP -Anfrage handelt. Erzeugt dann eine Anrufmethode und generiert dynamisch eine Zeichenfolge (kann JSON oder Pure String sein) gemäß den Anforderungsparametern. Auf diese Weise kann der Client auf die Daten zugreifen und eine anschließende Verarbeitung durchführen.
Trotzdem ist es nicht mein Stil, keinen Code hinzuzufügen, sondern ich füge Code hinzu. .
Funktionstest (Daten) {console.log (Daten)} var url = "http://www.x.com/test?a=1&callback=test" // den Parameter ein Wert von 1 von 1 an x.com/test, und ihm sagen, dass der Funktionsname "test" // testen "testen". Die Hintergrundverarbeitung erzeugt den folgenden (Datenfiktiven) Test ("AAAAAA") Test ({A: 1, B: 2}) // Dann greift das Front -End zu und führt sie durch das Skript -Tag, das obige var script = document.createelement ('script'); ssetattribute ('src', url). document.getElementsByTagName ('head') [0] .AppendChild (script); // dann wird die Seitentestmethode aufgerufen, was das Implementierungsprinzip von JSONP ist.Über die Realität von JSONP in JQuery
$ .ajax ({type: "get", url: "http: //xdcn/asych/adv.html? loc = 8 & callback =?", // Sagen Sie dem Hintergrund, dass dies eine JSONP -Anfrage ist. Welche Methode muss ein JQ erstellen. Ausgelöst auf Erfolg) Typ: "post", // JSONP kann nur GET -Anforderungen senden, auch wenn ich den Anforderungsart auf Postdatatyp einstellte: "JSONP", // Sagen Sie JQuery, dass dies ein JSONP -Daten ist. $ ("body"). append (data);},*/fehler: function (xmlhttprequest, textStatus, errorthrown) {//alert(errorthrown);})Nachdem ich den obigen Code und Kommentare gelesen habe, glaube ich, dass jeder ihn versteht. Obwohl JQuery JSONP in Ajax zusammenfasst, ist es im Wesentlichen unterschiedlich.
Der Kern von AJAX besteht darin, andere Inhalte als diese Seite über XMLHTTPrequest zu erhalten, während der Kern von JSONP darin besteht, <script> -Tags dynamisch hinzuzufügen, um die vom Server bereitgestellten JS -Skripte aufzurufen.
Daher besteht der Unterschied zwischen Ajax und JSONP nicht, ob es sich um eine Domäne handelt. AJAX kann auch durch serverseitigem Proxy eine Cross-Domäne erreichen, und JSONP selbst schließt die Erfassung von Daten in derselben Domäne nicht aus.
Wie oben erwähnt, müssen die Datenformate von JSONP und AJAX nicht JSON sein, sondern können auch reine Saiten sein.
Kurz gesagt, JSONP ist keine Untergruppe von Ajax, und selbst wenn JQuery JSONP in Ajax verkapelt, kann es dies nicht ändern.
Das obige ist eine detaillierte Erklärung des Cross-Domain-Anfragebeispiels von JS JSOP, das Ihnen vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!