Comment créer des rappels JSONP en JavaScript pour les requêtes inter-domaines ?

Création de rappels JSONP en JavaScript

Les requêtes inter-domaines peuvent poser un défi dans le développement JavaScript. Cependant, JSONP (JSON with Padding) offre une solution à ce problème.

Modification de votre API JSON pour JSONP

Pour activer les fonctionnalités JSONP dans votre API JSON, suivez les étapes simples ci-dessous :

1. Accepter un paramètre de « rappel » dans la requête GET :

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

2. Enveloppez la fonction de rappel autour de vos données :

   $callback.'('.$data.');';

En utilisant PHP comme exemple, le code ci-dessous illustre ces étapes :

<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

Pour utiliser le service JSONP, vous pouvez utiliser la balise de script HTML :

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>

<script src="data-service.php?callback=receiver"></script></code>

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!