Detaillierte Erklärung von JSON und JSONP in JS-js-Tutorial-php.cn

Die einfache Verwendung von JSON kann keine domänenübergreifenden Ressourcenanforderungen unterstützen. Um dieses Problem zu lösen, muss das JSONP-Dateninteraktionsprotokoll übernommen werden. Wie wir alle wissen, ist der Aufruf von js-Dateien nicht dadurch eingeschränkt, ob sie domänenübergreifend sind oder nicht. Wenn Sie also über die reine Webseite auf Daten domänenübergreifend zugreifen möchten, können Sie nur versuchen, die JSON-Daten einzukapseln Eine Datei im JS-Format auf dem Remote-Server, die der Client aufrufen und weiterverarbeiten kann. Dies ist das Prinzip des JSONP-Protokolls.

JSON und JSONP

JSONP ist eine Möglichkeit, JSON-Daten zu senden, ohne sich über domänenübergreifende Probleme Gedanken machen zu müssen. JSONP verwendet das XMLHttpRequest-Objekt nicht. JSONP verwendet stattdessen das -Tag. Aufgrund der domänenübergreifenden Richtlinie kann das Anfordern von Dateien von einer anderen Domäne zu Problemen führen. Beim Anfordern eines externen Skripts von einer anderen Domäne tritt dieses Problem nicht auf. JSONP nutzt dies aus und fordert Dateien mithilfe von Skript-Tags anstelle von XMLHttpRequest-Objekten an.

Nach dem Login kopieren Serverdatei

Die Datei auf dem Server verpackt das Ergebnis in einen Funktionsaufruf:

Nach dem Login kopieren Das Ergebnis gibt einen Aufruf einer Funktion namens „myFunc“ mit JSON-Daten als Parameter zurück. Stellen Sie sicher, dass die Funktionalität auf dem Client vorhanden ist.

JavaScript-Funktion

Die Funktion namens „myFunc“ befindet sich auf der Clientseite und ist bereit, JSON-Daten zu verarbeiten:

function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.send("x=" + dbParam); Nach dem Login kopieren Erstellen Sie ein dynamisches Skript-Tag

Je nachdem, wo Sie das platzieren Skript-Tag oben Das Beispiel führt die Funktion „myFunc“ aus, wenn die Seite geladen wird, was nicht sehr zufriedenstellend ist. Das Skript-Tag sollte nur bei Bedarf erstellt werden: Erstellen Sie das -Tag und fügen Sie es ein, wenn auf die Schaltfläche geklickt wird:

function clickButton() { var s = document.createElement("script"); s.src = "demo_jsonp.php"; document.body.appendChild(s); } Nach dem Login kopieren Dynamische JSONP-Ergebnisse

Das obige Beispiel ist immer noch sehr statisch. Gestalten Sie das Beispiel dynamisch, indem Sie JSON an eine PHP-Datei senden und die PHP-Datei ein JSON-Objekt basierend auf den erhaltenen Informationen zurückgeben lassen. PHP-Datei

query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC);echo "myFunc(".json_encode($outp).")"; ?> Nach dem Login kopieren PHP-Dateierklärung: Verwenden Sie die PHP-Funktion json_decode(), um die Anfrage in ein Objekt umzuwandeln. Greifen Sie auf die Datenbank zu und füllen Sie das Array mit den angeforderten Daten. Fügen Sie einem Objekt ein Array hinzu. Konvertieren Sie das Array mit der Funktion json_encode() in JSON. Wrap „myFunc()“ um das Rückgabeobjekt

JavaScript-Beispiel:

Wie bringt man eine Serverdatei dazu, die richtige Funktion aufzurufen, wenn man keine Kontrolle darüber hat? Manchmal stellt die Serverdatei eine Rückruffunktion als Parameter bereit: php-Datei ruft die Funktion auf, die Sie als Rückrufparameter übergeben: PHP-Datei:

Nach dem Login kopieren javascript :

function clickButton() { var s = document.createElement("script"); s.src = "jsonp_demo_db.php?callback=myDisplayFunction"; document.body.appendChild(s); } Nach dem Login kopieren Weitere Programmierkenntnisse finden Sie unter: Einführung in Programmieren ! !

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Detaillierte Erklärung von JSON und JSONP in JS