Lösung für eine domänenübergreifende Ajax-Anfrage: Verwenden Sie JSONP, um JSON-Daten abzurufen

Aufgrund von Browsereinschränkungen erlaubt Ajax keine domänenübergreifende Kommunikation. Wenn Sie versuchen, Daten von einer anderen Domäne anzufordern, tritt ein Sicherheitsfehler auf. Diese Sicherheitsfehler können vermieden werden, wenn Sie den Remote-Server kontrollieren können, auf dem sich die Daten befinden, und wenn jede Anfrage an dieselbe Domäne geht. Doch was nützt eine Webanwendung, wenn sie einfach auf dem eigenen Server bleibt? Was ist, wenn Sie Daten von mehreren Drittanbieterservern sammeln müssen?

Informationen zu den Einschränkungen der Same-Origin-Richtlinie

Die Same-Origin-Richtlinie verhindert, dass aus einer Domäne geladene Skripts Dokumenteigenschaften in einer anderen Domäne abrufen oder manipulieren. Das heißt, die Domäne der angeforderten URL muss mit der Domäne der aktuellen Webseite übereinstimmen. Das bedeutet, dass der Browser Inhalte aus verschiedenen Quellen isoliert, um Vorgänge zwischen ihnen zu verhindern. Diese Browserrichtlinie ist alt und existiert seit Netscape Navigator Version 2.0.

Eine relativ einfache Möglichkeit, diese Einschränkung zu überwinden, besteht darin, dass die Webseite Daten von dem Webserver anfordert, von dem sie stammt, und dass der Webserver wie ein Proxy fungiert und die Anfrage an den eigentlichen Drittanbieterserver weiterleitet . Obwohl diese Technologie weit verbreitet ist, ist sie nicht skalierbar. Eine andere Möglichkeit besteht darin, Frame-Elemente zu verwenden, um einen neuen Bereich innerhalb der aktuellen Webseite zu erstellen und GET-Anfragen zu verwenden, um etwaige Ressourcen von Drittanbietern abzurufen. Nach Erhalt der Ressourcen wird der Inhalt im Frame jedoch durch die Same-Origin-Richtlinie eingeschränkt.

Eine idealere Möglichkeit, diese Einschränkung zu überwinden, besteht darin, ein dynamisches Skriptelement in eine Webseite einzufügen, dessen Quelle auf eine Dienst-URL in einer anderen Domäne verweist und die Daten in einem eigenen Skript abruft. Die Ausführung beginnt, wenn das Skript geladen wird. Dieser Ansatz funktioniert, weil die Same-Origin-Richtlinie das dynamische Einfügen von Skripten nicht verhindert und Skripte so behandelt werden, als ob sie von der Domäne geladen würden, die die Webseite bereitstellt. Wenn das Skript jedoch versucht, das Dokument aus einer anderen Domäne zu laden, gelingt es nicht. Glücklicherweise kann diese Technik durch Hinzufügen von JavaScript Object Notation (JSON) verbessert werden.

Was ist JSONP?

Um JSONP zu verstehen, müssen wir JSON erwähnen. Was ist JSON?

JSONP (JSON with Padding) ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff durch Javascript-Callback ermöglicht (dies ist nur eine einfache Implementierung von JSONP). .

Wofür wird JSONP verwendet?

Aufgrund der Einschränkung der Same-Origin-Richtlinie erlaubt XmlHttpRequest nur Anfragen für Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port). Um domänenübergreifende Anfragen zu implementieren, können Sie domänenübergreifende Anfragen implementieren. Domänenanfragen über das Skript-Tag, dann JSON-Daten auf dem Server ausgeben und die Rückruffunktion ausführen, um domänenübergreifende Datenanfragen zu lösen.

Wie verwende ich JSONP?

Die folgende DEMO ist eigentlich eine einfache Darstellung von JSONP. Nachdem der Client die Rückruffunktion deklariert hat, fordert der Client über das Skript-Tag Daten vom Server an, und dann gibt der Server die entsprechenden Daten zurück und führt sie dynamisch aus die Callback-Funktion.

1. HTML-Code (beliebiger):

<meta content=“text/html; charset=utf-8″ http-equiv=“Content-Type” />  
<script type=“text/javascript”>  
    function jsonpCallback(result) {  
        //alert(result);  
        for(var i in result) {  
            alert(i+”:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
    var JSONP=document.createElement(“script”);  
    JSONP.type=“text/javascript”;  
    JSONP.src=“http://crossdomain.com/services.php?callback=jsonpCallback”;  
    document.getElementsByTagName(“head”)[0].appendChild(JSONP);  
</script>

oder

<meta content=“text/html; charset=utf-8″ http-equiv=“Content-Type” />  
<script type=“text/javascript”>  
    function jsonpCallback(result) {  
        alert(result.a);  
        alert(result.b);  
        alert(result.c);  
        for(var i in result) {  
            alert(i+”:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type=“text/javascript” src=“http://crossdomain.com/services.php?callback=jsonpCallback”>    </script>

JavaScript-Link muss sich unterhalb der Funktion befinden.

2. Serverseitiger PHP-Code

<?php  
//服务端返回JSON数据  
$arr=array(‘a’=>1,‘b’=>2,‘c’=>3,‘d’=>4,‘e’=>5);  
$result=json_encode($arr);  
//echo $_GET[&#39;callback&#39;].’(“Hello,World!”)’;  
//echo $_GET[&#39;callback&#39;].”($result)”;  
//动态执行回调函数  
$callback=$_GET[‘callback’];  
echo $callback.“($result)”;

3. jQuery-Implementierung

Clientseitige JS-Code-Implementierung in jQuery 1:

<script type=“text/javascript” src=“jquery.js”></script>  
<script type=“text/javascript”>  
    $.getJSON(“http://crossdomain.com/services.php?callback=?”,  
    function(result) {  
        for(var i in result) {  
            alert(i+“:”+result[i]);//循环输出a:1,b:2,etc.  
        }  
    });  
</script>

Implementierungsmethode 2 des Client-JS-Codes in jQuery:

<script type=“text/javascript” src=“jquery.js”></script>  
<script type=“text/javascript”>  
    $.ajax({  
        url:“http://crossdomain.com/services.php”,  
        dataType:‘jsonp’,  
        data:”,  
        jsonp:‘callback’,  
        success:function(result) {  
            for(var i in result) {  
                alert(i+“:”+result[i]);//循环输出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>

Implementierungsmethode 3 des Client-JS-Codes in jQuery:

<script type=&#39;text/javascript&#39; src=&#39;jquery.js&#39;></script>  
<script type=&#39;text/javascript&#39;>  
    $.get(&#39;http://crossdomain.com/services.php?callback=?&#39;, 
        {name: encodeURIComponent(&#39;tester&#39;)},         
        function (json) { for(var i in json) alert(i+&#39;:&#39;+json[i]); }, &#39;jsonp&#39;);  
</script>

wobei jsonCallback die Client-Registrierung und die Rückruffunktion danach ist Abrufen der JSON-Daten auf dem domänenübergreifenden Server.

http://crossdomain.com/services.php?callback=jsonpCallback

Diese URL ist eine Schnittstelle zum Abrufen von JSON-Daten von domänenübergreifenden Servern. Der Parameter ist der Name der Rückruffunktion. Das zurückgegebene Format ist

jsonpCallback({msg:'this is json data'})

jsonp-Prinzip.

Registrieren Sie zunächst einen Rückruf auf dem Client und übergeben Sie dann den Rückrufnamen an den Server.

Zu diesem Zeitpunkt generiert der Server zunächst JSON-Daten.

Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren.

Fügen Sie schließlich die JSON-Daten direkt als Parameter in die Funktion ein, sodass ein js-Syntaxdokument erstellt wird wird generiert und an den Client zurückgegeben.

Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus. Zu diesem Zeitpunkt werden die Daten als Parameter an die vom Client vordefinierte Rückruffunktion übergeben (dynamische Ausführung der Rückruffunktion). >

Der Vorteil der Verwendung von JSON ist:

Es ist viel leichter als XML und enthält nicht so viele redundante Dinge.

JSON ist ebenfalls gut lesbar, wird aber meist komprimiert zurückgegeben. Im Gegensatz zu XML, das direkt von Browsern angezeigt werden kann, müssen Browser einige Plug-Ins verwenden, um JSON zu formatieren.

Der Umgang mit JSON in JavaScript ist einfach.

Andere Sprachen wie PHP unterstützen JSON ebenfalls gut.

JSON hat auch einige Nachteile:

Die serverseitige Sprachunterstützung von JSON ist nicht so umfangreich wie XML, aber JSON.org stellt Bibliotheken für viele Sprachen bereit.

Wenn Sie eval() zum Parsen verwenden, können leicht Sicherheitsprobleme auftreten.

Trotzdem liegen die Vorteile von JSON immer noch auf der Hand. Es ist ein ideales Datenformat für die Ajax-Dateninteraktion.

Wichtiger Tipp:

JSONP ist eine leistungsstarke Technologie zum Erstellen von Mashups, aber leider ist es kein Allheilmittel für alle domänenübergreifenden Kommunikationsanforderungen. Es weist einige Mängel auf, die sorgfältig geprüft werden müssen, bevor Ressourcen für die Entwicklung bereitgestellt werden.

Erstens und das Wichtigste: Es gibt keine Fehlerbehandlung für JSONP-Aufrufe. Wenn die dynamische Skripteinfügung gültig ist, wird der Aufruf ausgeführt; wenn sie ungültig ist, schlägt er stillschweigend fehl. Es gibt keine Aufforderung zum Scheitern. Beispielsweise können 404-Fehler vom Server nicht abgefangen werden und Anfragen können nicht abgebrochen oder neu gestartet werden. Wenn Sie jedoch nach einer Weile keine Antwort erhalten, ignorieren Sie diese. (Zukünftige Versionen von jQuery verfügen möglicherweise über Funktionen zum Beenden von JSONP-Anfragen.)

Ein weiterer großer Nachteil von JSONP besteht darin, dass es gefährlich sein kann, wenn es von nicht vertrauenswürdigen Diensten verwendet wird. Da der JSONP-Dienst eine JSON-Antwort zurückgibt, die in einen vom Browser ausgeführten Funktionsaufruf eingeschlossen ist, wird die Host-Webanwendung anfälliger für eine Vielzahl von Angriffen. Wenn Sie planen, einen JSONP-Dienst zu verwenden, ist es wichtig, die Bedrohungen zu verstehen, die er darstellen kann.