Comment JSONP résout-il les problèmes de requêtes multi-origines ?

Requêtes d'origine croisée avec JSONP : un exemple pratique

Lorsque vous rencontrez des restrictions de politique d'origine croisée, JSONP (JSON avec rembourrage) offre une solution pratique. Cependant, les détails peuvent être déroutants à comprendre au départ. Démystifions le processus avec un exemple simple de jQuery, PHP et JSONP.

Implémentation de JSONP pour les requêtes d'origine croisée

Considérez l'extrait de code incorrect suivant :

// jQuery
$.post('http://MySite.com/MyHandler.php', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res);
});

// PHP
<?php
$fname = $_POST['firstname'];
if ($fname == 'Jeff') {
  echo 'Jeff Hansen';
}
?>

Pour activer les requêtes multi-origines, nous exploiterons JSONP. Voici comment :

jQuery :

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP :

<?php
$fname = $_GET['firstname'];
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({' . "'fullname' : 'Jeff Hansen'" . '})';
}
?>

Clé Points :

• ?callback=? : ce paramètre demande au serveur d'ajouter le nom de la fonction de rappel à la réponse JSON.
• res.fullname : En JavaScript, nous accédons à la valeur de la propriété en utilisant la notation par points. Cependant, dans ce cas, nous devons ajouter un préfixe pour traiter la réponse comme un objet JSON.

Renvoi du HTML dans les réponses JSONP

Oui, vous pouvez stocker du HTML dans les réponses JSONP. Modifiez le code PHP comme suit :

<?php
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({
    'name': 'Jeff Hansen',
    'html': '<span>This is some HTML</span>'
  })';
}
?>

En JavaScript, vous pouvez ensuite accéder au HTML en utilisant res.html.

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!