Auf einen Blick verstehen: Detaillierte Erklärung von jsonp_jquery

Ich glaube, dass jeder JSON häufig verwendet. Ich hatte noch nie die Gelegenheit, JSONP zu verwenden, aber ich weiß oft, dass es „für domänenübergreifende Zwecke“ verwendet wird, und ich weiß nie, was es ist. Heute habe ich es endlich herausgefunden. Lassen Sie uns Schritt für Schritt herausfinden, was JSONP ist.

Richtlinie zum gleichen Ursprung

Zuallererst verfügen Browser aus Sicherheitsgründen über einen Mechanismus namens Same-Origin-Richtlinie. Die Same-Origin-Richtlinie verhindert, dass Dokumente oder Skripte, die aus einer Quelle geladen werden, die Attribute von Dokumenten erhalten oder festlegen, die aus einer anderen Quelle geladen werden. Es scheint, dass ich nicht weiß, was es bedeutet, aber Sie werden es wissen, nachdem Sie es geübt haben.

1. Erstellen Sie nach Belieben zwei Webseiten

Ein Port ist 2698 und der andere ist 2701. Per Definition stammen sie aus unterschiedlichen Quellen.

2. Verwenden Sie jQuery, um Anfragen aus verschiedenen Quellen zu initiieren
Fügen Sie der Webseite auf Port 2698 eine Schaltfläche hinzu, und das Click-Ereignis initiiert zwei Anfragen an die Domäne mit Port 2701.

Code kopieren Der Code lautet wie folgt:

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", Funktion (Daten) {
console.log(data)
})

$.get("http://localhost:2701/home/index", Funktion (Daten) {
console.log(data)
})
})

Nach der Same-Origin-Politik wird es offensichtlich tragisch sein. Der Browser blockiert die Anfrage und initiiert sie überhaupt nicht. (nicht erlaubt durch Access-Control-Allow-Origin)

OK, es stellt sich heraus, dass JSONP dieses Problem lösen soll.

Domänenübergreifende Fähigkeit des Skript-Tags
Ich weiß nicht, ob Sie sich mit CDN auskennen, z. B. dem CDN von Microsoft. Wenn Sie es verwenden, müssen unsere Webseiten kein jQuery bereitstellen, und die Website von Microsoft stellt es für uns bereit:

Code kopieren Der Code lautet wie folgt:

Zurück zu unserer 2698-Port-Webseite: Oben haben wir eine Anfrage für die jQuery-Datei in der 2701-Port-Domäne im Click-Ereignis, diesmal mit dem Skript-Tag zum Anfordern.

Code kopieren Der Code lautet wie folgt:

Natürlich, 200, OK

Die gleiche Webseite mit Port 2698 initiiert eine Anfrage für die Domäne 2701. Das Setzen des scr-Attributs im Skript ist in Ordnung, aber der andere Weg ist tragisch. Dies ist die Grundlage von JSONP, indem es die domänenübergreifenden Funktionen von Skripten nutzt.

Verwenden Sie ein Skript, um JSON aus verschiedenen Quellen abzurufen
Da es JSONP heißt, ist es offensichtlich, dass der Zweck immer noch JSON ist und es domänenübergreifend abgerufen wird. Basierend auf der obigen Analyse ist es leicht vorstellbar: Verwenden Sie js, um ein Skript-Tag zu erstellen, weisen Sie die JSON-URL dem scr-Attribut des Skripts zu, fügen Sie das Skript in den Dom ein und lassen Sie es vom Browser abrufen. Üben:

Code kopieren Der Code lautet wie folgt:

Funktion CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")<br> }<br> </div> <br> Fügen Sie ein Schaltflächenereignis hinzu, um es auszuprobieren: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="4331" class="copybut" id="copybut4331" onclick="doCopy('code4331')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code4331"> <br> $("#getOtherDomainJson").click(function () {<br> $.get('http://localhost:2701/home/somejson', Funktion (Daten) {<br> console.log(data)<br> })<br> })<br> </div> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201506/20156190709927.png?2015519722" class="lazy" alt=""></p> <p>Zuallererst verfügt die URL http://localhost:2701/home/somejson im ersten Browser über einen JSON, und die Verwendung des Skript-Tags auf der 2698-Webseite zum Anfordern der 2701-URL ist ebenfalls in Ordnung. aber unten wird ein js-Syntaxfehler gemeldet. Es stellt sich heraus, dass die Antwort nach dem Laden mit dem Skript-Tag sofort als js ausgeführt wird. Offensichtlich ist {"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"} rechtliche js-Anweisung. </p> <p>Verwenden Sie ein Skript, um fremdes JSONP zu erhalten</p> <p>Natürlich ist es am einfachsten, den oben genannten JSON in eine Rückrufmethode einzufügen. Es sieht zum Beispiel so aus: </p> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201506/20156190730417.png?2015519738" class="lazy" alt=""></p> <p>Wenn die jsonpcallback-Methode existiert, dann ist jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"}) eine legale js-Anweisung. </p> <p>Da der Server den Rückruf des Clients nicht kennt, ist es unmöglich, ihn fest in jsonpcallback zu codieren. Daher wird ein QueryString mitgebracht, damit der Client dem Server mitteilen kann, was die Rückrufmethode ist muss der Vereinbarung des Servers entsprechen, wie oben beschrieben. Es handelt sich um einen „Rückruf“. </p> <p>Rückruffunktion hinzufügen: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="86577" class="copybut" id="copybut86577" onclick="doCopy('code86577')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code86577"> <br> Funktion jsonpcallback(json) {<br> console.log(json)<br> }<br> </div> <br> Ändern Sie die Parameter der vorherigen Methode leicht: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="13280" class="copybut" id="copybut13280" onclick="doCopy('code13280')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code13280"> <br> $("#getJsonpByHand").click(function () {<br> CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")<br> })<br> </div> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201506/20156190749818.png?2015519756" class="lazy" alt=""></p> <p>200OK, der Server gibt jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"} zurück. Wir haben auch die jsonpcallback-Methode geschrieben, was natürlich der Fall sein wird hingerichtet. OK, ich habe JSON erfolgreich erhalten. Das ist richtig, hier dreht sich alles um JSONP. </p> <p><strong>Verwenden Sie jQuery, um JSONP zu erhalten</strong><br> Bei der obigen Methode müssen Sie ein Skript-Tag einfügen und einen Rückruf definieren, was etwas mühsam ist. Sie können jQuery verwenden, um die gewünschten JSON-Daten direkt abzurufen, genau wie das obige JSONP: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="33170" class="copybut" id="copybut33170" onclick="doCopy('code33170')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code33170"> <br> $("#getJsonpByJquery").click(function () {<br> $.ajax({<br> ​ ​ URL: 'http://localhost:2701/home/somejsonp',<br>          dataType: „jsonp“,<br>          jsonp: "callback",<br> Erfolg: Funktion (Daten) {<br> console.log(data)<br> }<br> })<br> })<br> </div> <br> Die erhaltenen Ergebnisse ähneln den oben genannten. <p><strong>Zusammenfassung</strong></p> <p>In einem Satz können Sie das Skript-Tag verwenden, um die Same-Origin-Richtlinie zu umgehen und Daten wie folgt abzurufen: jsonpcallback ist die Rückrufmethode, die auf der Seite vorhanden ist, und der Parameter ist der gewünschte JSON. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="58" class="copybut" id="copybut58" onclick="doCopy('code58')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code58"> <br> jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"})<br> </div> <p>Native js HINZUFÜGEN:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99395" class="copybut" id="copybut99395" onclick="doCopy('code99395')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code99395"> <br> <button id="btn">click</button><br> <script type="text/javascript"><br>     Funktion $(str){<br>         Rückkehr document.getElementById(str)<br>     }<br>     Funktion CreateScript(src) {<br>         var Scrip=document.createElement('script');<br>         Scrip.src=src;<br>         document.body.appendChild(Scrip);<br>     }<br>     Funktion jsonpcallback(json) {<br>             console.log(json);//Object { email="中国", email2="中国222"}<br>     }<br>     $('btn').onclick=function(){<br>       CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    <br>     }<br> </script>