Maison > interface Web > js tutoriel > Comment JSONP peut-il résoudre les problèmes inter-domaines de jQuery AJAX ?

Comment JSONP peut-il résoudre les problèmes inter-domaines de jQuery AJAX ?

DDD
Libérer: 2024-12-22 22:15:13
original
301 Les gens l'ont consulté

How Can JSONP Solve jQuery AJAX Cross-Domain Issues?

Problème inter-domaines jQuery AJAX

Dans le scénario fourni, où deux fichiers PHP (test.php et testserver.php) communiquent en utilisant AJAX de jQuery, des restrictions inter-domaines surviennent lorsqu'elles résident sur des serveurs distincts. Le serveur A héberge test.php (par exemple, localhost), tandis que le serveur B héberge testserver.php (par exemple, serveur Web).

Problème :
Malgré l'exécution réussie de la requête AJAX lorsque les fichiers se trouvent sur le même serveur, le système échoue avec une erreur lorsqu'ils se trouvent sur des serveurs différents. Cela est dû à la politique de même origine (SOP).

Solution :
Pour résoudre ce problème inter-domaines, JSONP (JSON avec rembourrage) est utilisé. JSONP exploite les rappels pour contourner les restrictions du navigateur.

Mise en œuvre :

jQuery (test.php) :

$.ajax({
    url: "http://domain.example/path/to/file/testserver.php",
    dataType: 'jsonp', // Notice! JSONP (lowercase 'P')
    success: function(json){
        // Handle JSON response (an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }      
});
Copier après la connexion

PHP (testserver.php) :

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
$callbackName = $_GET['callback']; // Get the callback name from GET params
echo $callbackName."(".json_encode($arr).");";
?>
Copier après la connexion

Explication :

  1. La méthode $.ajax() de jQuery est modifiée pour utiliser 'jsonp' comme le dataType.
  2. La fonction de rappel passée à $.ajax() est affectée à la variable PHP $callbackName.
  3. Le script PHP intègre les données JSON dans l'appel de fonction, en utilisant la valeur callbackName.
  4. Cela permet au navigateur de générer dynamiquement un
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal