recherche

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
DDDoriginal
2024-12-22 22:15:13304parcourir

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");
    }      
});

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).");";
?>

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