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

Défi de communication inter-domaines jQuery AJAX

Lorsque vous rencontrez des requêtes AJAX inter-domaines, où un document HTML d'un domaine tente de créer un demande vers un domaine différent, des difficultés surviennent. Explorons un scénario avec deux fichiers PHP, test.php et testserver.php :

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php :

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

Lorsque les deux fichiers sont hébergés sur le même serveur, la requête AJAX réussit. Cependant, lorsqu'ils sont placés sur des serveurs différents, la requête échoue, déclenchant l'alerte « Erreur ». Cela est dû à la politique de même origine (SOP) du navigateur, qui restreint le partage de données entre domaines.

Solution : utiliser JSONP

Pour surmonter la SOP, nous pouvons utilisez JSONP (JSON avec rembourrage). JSONP permet d'envoyer des données sous forme d'appel de fonction, contournant ainsi les restrictions imposées par le SOP.

jQuery :

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Notice! JSONP < - P (lowercase)
  success: function(json){
    // do stuff with json (in this case an array)
    alert("Success");
  },
  error: function(){
    alert("Error");
  }
});

PHP :

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback'] . "(" . json_encode($arr) . ");";
?>

Dans ce code modifié, la requête JavaScript inclut 'dataType: 'jsonp'' pour indiquer l'utilisation de JSONP. Le script PHP récupère le nom de la fonction de rappel envoyé par jQuery via '$_GET['callback']' et l'utilise pour former la sortie. La sortie du script PHP doit apparaître sous la forme d'une fonction de rappel suivie des données JSON, garantissant que les données sont transférées sous forme d'appel de fonction.

Alternativement, jQuery fournit la méthode $.getJSON(), un raccourci pour la gestion Requêtes JSONP. Cependant, l'URL doit inclure « callback=? » en tant que paramètre GET, où jQuery insère dynamiquement sa propre méthode de rappel.

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!