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

Dilemme inter-domaines jQuery AJAX : contourner CORS avec JSONP

Interagir avec des données sur différents domaines pose des défis en raison du partage de ressources d'origine croisée (CORS). Lorsque vous tentez d'effectuer une requête AJAX d'un domaine à un autre, telle que test.php sur localhost et testserver.php sur un serveur distant, les navigateurs appliquent ces restrictions, entraînant des alertes « Erreur ».

Pour surmonter ce problème obstacle, JSONP (JSON with Padding) apparaît comme une solution de contournement viable. Il exploite la flexibilité des éléments de script pour récupérer des données sur plusieurs domaines.

Modifications jQuery :
Modifiez test.php pour utiliser JSONP en changeant le paramètre dataType en 'jsonp'.

Modifications PHP :
Ajustez testserver.php pour faire écho à la réponse JSONP avec le rappel fourni par jQuery.

Mise en œuvre :

jQuery (test.php) :

$.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 (testserver.php) :

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

Méthode simplifiée utilisant $.getJSON() :
Vous pouvez également utiliser la méthode abrégée $.getJSON(), qui automatiquement ajoute 'callback=?' à l'URL en tant que paramètre GET.

$.getJSON("testserver.php", function(json){
    // do stuff with json (in this case an array)
    alert("Success");
});

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!