Comment utiliser JSONP pour la communication entre domaines en JavaScript ?

Comment créer du JSONP en JavaScript pour la communication entre domaines

Lors du traitement des requêtes d'origine croisée, la fameuse politique de même origine peut devenir un obstacle. Cependant, JSONP (JSON with Padding) a été conçu comme une solution intelligente pour contourner cette restriction.

Comment fonctionne JSONP ?

JSONP exploite intelligemment le comportement des navigateurs Web. . En fournissant un paramètre appelé callback dans la requête GET, vous autorisez le serveur à encapsuler les données JSON dans un appel de fonction JavaScript. Le navigateur exécute ensuite la fonction, en transmettant les données JSON comme argument.

Création de l'API de rappel côté serveur en PHP

Si vous utilisez PHP sur le serveur, implémentez les étapes suivantes :

1. Acceptez le paramètre de rappel dans la requête GET.
2. Définissez les en-têtes HTTP appropriés, y compris les en-têtes Content-Type et Access-Control.
3. Enveloppez la fonction JavaScript de rappel autour des données JSON.

<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>

Utilisation du service JSONP côté client

Pour utiliser le JSONP service côté client, suivez cet exemple :

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

Ce script crée une fonction de récepteur pour gérer les données JSON entrantes, puis charge dynamiquement le fichier data-service.php, fournissant la fonction de rappel en tant que argument.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!