suchen

Heim >Web-Frontend >js-Tutorial >Was ist JSONP? Detaillierte Erklärung des Prinzips von JSONP

Was ist JSONP? Detaillierte Erklärung des Prinzips von JSONP

不言
不言Original
2018-10-15 10:51:574404Durchsuche

Was ist JSONP? Was ist der Nutzen? In diesem Artikel erfahren Sie mehr über JSONP und das Verständnis der JSONP-Prinzipien. Freunde in Not können sich darauf beziehen.

Lassen Sie uns ohne weitere Umschweife direkt zum Text übergehen~

Was ist JSONP?

Die Definition von JSONP finden Sie im Internet: JSONP (JSON with Padding) ist ein „Nutzungsmodus“ von JSON, der zur Lösung des domänenübergreifenden Datenzugriffs durch den Mainstream verwendet werden kann Frage des Browsers. Aufgrund der Same-Origin-Richtlinie, im Allgemeinen in Die Webseite server1.example.com kann nicht mit einem anderen Server als server1.example.com und HTML kommunizieren Eine Ausnahme bildet das 3f1c4e4b6b16bbbd69b2ee476dc4f83a Mithilfe dieser offenen Richtlinie des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Elements können Webseiten dynamisch generierte Skripte aus anderen Quellen abrufen. JSON-Daten, und dieses Nutzungsmuster wird JSONP genannt. Um es einfach auszudrücken: JSONP ist ein leichtes Datenübertragungsformat, das zur Lösung domänenübergreifender Anforderungsprobleme verwendet wird.

Lassen Sie uns das Prinzip von jsonp

Ajax-Anfragen analysieren, die von der Same-Origin-Richtlinie betroffen sind und keine domänenübergreifenden Anfragen und das Skript-Tag zulassen src-Attribut Die Links in können auf domänenübergreifende JS-Skripte zugreifen. Mit dieser Funktion gibt der Server keine Daten mehr im JSON-Format zurück, sondern einen JS-Code, der eine bestimmte Funktion aufruft, die in src aufgerufen wird, wodurch domänenübergreifende Skripte erreicht werden.

Sehen wir uns ein Beispiel für jsonp an: 

<!DOCTYPE html>
 <html> 
 <head> 
 <title>GoJSONP</title> 
 </head> 
 <body> <
 script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $(&#39;<script><\/script>&#39;);
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>
 </body> 
 </html>

Hier wird dynamisch ein Skript-Tag hinzugefügt, src zeigt auf ein domänenübergreifendes PHP-Skript und der obige js-Funktionsname wird als Rückruf übergeben Geben Sie den Parameter ein, dann schauen wir uns an, wie der PHP-Code geschrieben ist: 

<?php 
$data = array( &#39;age&#39; => 20, &#39;name&#39; => &#39;张三&#39;, ); 
$callback = $_GET[&#39;callback&#39;]; 
echo $callback."(".json_encode($data).")"; 
return;

Der PHP-Code gibt eine JS-Anweisung zurück, d. h.

Beim Zugriff auf die Seite zu diesem Zeitpunkt ein Skript Das Tag wird dynamisch hinzugefügt und src zeigt auf PHP-Skript. Führen Sie den zurückgegebenen JS-Code aus und ein Eingabeaufforderungsfeld wird erfolgreich angezeigt.
So verwandelt JSONP den Zugriff auf domänenübergreifende Anforderungen in die Ausführung von Remote-JS-Code. Der Server gibt Daten nicht mehr im JSON-Format zurück, sondern einen Funktionsausführungscode, der JSON-Daten als eingehenden Parameter verwendet.

Dieser Artikel endet hier. Weitere JSONP-bezogene Inhalte finden Sie auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas ist JSONP? Detaillierte Erklärung des Prinzips von JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang)Nächster Artikel：Teilen Sie den einfachsten JavaScript-Countdown-Code (vollständiger Code im Anhang)

In Verbindung stehende Artikel

Mehr sehen