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

AJAX inter-domaines avec jQuery

La fonctionnalité AJAX de jQuery est un outil essentiel pour le développement Web dynamique. Cependant, lors de l'exécution de requêtes AJAX sur différents domaines, vous pouvez rencontrer des problèmes de partage de ressources d'origine croisée (CORS).

L'un de ces problèmes survient lorsque test.php et testserver.php résident sur des serveurs distincts, ce qui entraîne un message " Alerte "Erreur" déclenchée. En effet, les mesures de sécurité du navigateur limitent par défaut les requêtes AJAX provenant de différentes origines.

Solution : JSONP

Pour surmonter CORS, JSONP (JSON with Padding) peut être utilisé. JSONP utilise une approche différente en chargeant dynamiquement un script depuis le serveur distant, évitant ainsi le CORS restrictions.

Mise en œuvre

jQuery :

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Specify JSONP data type
  success:function(json){
    // Process JSON data
    alert("Success");
  },
  error:function(){
    alert("Error");
  }      
});

PHP :

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

Notez que l'instruction echo de PHP est conçue pour envelopper les données JSON dans la fonction de rappel fournie par jQuery, y compris les guillemets appropriés.

Alternativement, $.getJSON() de jQuery peut être utilisé comme méthode abrégée, en ajoutant "callback=?" en tant que paramètre GET de l'URL. jQuery générera automatiquement la fonction de rappel appropriée en fonction de ce paramètre.

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!