Heim > Artikel > Web-Frontend > Das Prinzip von Jsonp und seine einfache Implementierungsmethode

Das Prinzip von Jsonp und seine einfache Implementierungsmethode

一个新手Original: 2017-09-27 10:19:162281Durchsuche

Funktion

Jsonp是json的一种使用模式，用来解决主流浏览器的跨域数据访问的问题.因为同源策略，页面是无法直接与其他不同源的页面沟通的.利用Script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

Gleicher Ursprung: bezieht sich auf dasselbe Protokoll, denselben Domänennamen und denselben Port. Wenn die Browserseite ein Skript ausführt, prüft sie, welche Seite Das Skript gehört zu. Ja, es werden nur Skripte mit demselben Ursprung wie diese Seite ausgeführt, andernfalls meldet die Konsole einen Fehler.

Prinzip

Verwenden Sie zum Abrufen das Skript-Tag Daten im JSONP-Format (mit JSONP abfangen. Die Daten sind nicht JSON, sondern beliebiges JavaScript, das mit einem JavaScript-Interpreter ausgeführt wird, anstatt mit einem JSON-Parser analysiert zu werden) und führt gleichzeitig eine JSONP-Rückruffunktion aus Zuerst muss die Callback-Funktion auf dem Client definiert werden.

Einfache Implementierung

Dies ist eine relativ einfache Implementierung, die ich gefunden habe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Top Customers with Callback</title></head><body>
    <p id="pCustomers">
    </p>
    <script type="text/javascript">
        function onCustomerLoaded(result, methodName) {
            var html = &#39;<ul>&#39;;            for (var i = 0; i < result.length; i++) {
                html += &#39;<li>&#39; + result[i] + &#39;</li>&#39;;
            }
            html += &#39;</ul>&#39;;
            document.getElementById(&#39;pCustomers&#39;).innerHTML = html;
        }    </script>    <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script></body></html>

Zum Beispiel möchte der Kunde http://www.yiwuku.com/ besuchen. myService. aspx?jsonp=callbackFunction
Angenommen, der Kunde erwartet, JSON-Daten zurückzugeben: ["customername1", "customername2"]
Dann werden die Skript-Tags tatsächlich an den Client zurückgegeben: callbackFunction(["customername1"," Kundenname2"])

Das obige ist der detaillierte Inhalt vonDas Prinzip von Jsonp und seine einfache Implementierungsmethode. 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：So erstellen Sie ein neues Vue-ProjektNächster Artikel：So erstellen Sie ein neues Vue-Projekt

In Verbindung stehende Artikel

Mehr sehen