Wie verwende ich JSONP für die domänenübergreifende Kommunikation in JavaScript?

So erstellen Sie JSONP in JavaScript für die domänenübergreifende Kommunikation

Beim Umgang mit Cross-Origin-Anfragen kann die berüchtigte Same-Origin-Richtlinie dies tun zum Hindernis werden. JSONP (JSON with Padding) wurde jedoch als clevere Lösung entwickelt, um diese Einschränkung zu umgehen.

Wie funktioniert JSONP?

JSONP nutzt geschickt das Verhalten von Webbrowsern . Durch die Bereitstellung eines Parameters namens „Callback“ in der GET-Anfrage ermöglichen Sie dem Server, die JSON-Daten in einen JavaScript-Funktionsaufruf einzubinden. Der Browser führt dann die Funktion aus und übergibt die JSON-Daten als Argument.

Erstellen der serverseitigen Callback-API in PHP

Wenn Sie PHP verwenden Führen Sie auf dem Server die folgenden Schritte aus:

1. Akzeptieren Sie den Callback-Parameter in der GET-Anfrage.
2. Legen Sie die entsprechenden HTTP-Header fest, einschließlich Content-Type- und Access-Control-Header.
3. Umschließen Sie die JSON-Daten mit der Rückruf-JavaScript-Funktion.

<code class="php"><?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

Verwenden des JSONP-Dienstes auf der Clientseite

Zur Nutzung von JSONP Folgen Sie diesem Beispiel für den Dienst auf der Clientseite:

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script></code>

Dieses Skript erstellt eine Empfängerfunktion zur Verarbeitung der eingehenden JSON-Daten, lädt dann dynamisch die Datei data-service.php und stellt die Rückruffunktion als bereit Argument.

Das obige ist der detaillierte Inhalt vonWie verwende ich JSONP für die domänenübergreifende Kommunikation in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!