Wie löst JSONP Probleme beim ursprungsübergreifenden Datenabruf?

JSONP: Cross-Origin Data Retrieval Vereinfacht

Beim Umgang mit Cross-Origin-Webanfragen kann die Same-Origin-Richtlinie eine Herausforderung darstellen . JSONP (JSON with Padding) erwies sich als Lösung für dieses Problem. Hier finden Sie eine Schritt-für-Schritt-Erklärung zur Implementierung einer einfachen jQuery-, PHP- und JSONP-Anfrage zum Abrufen von Daten aus einer anderen Domäne:

jQuery-Anfrage

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

PHP-Antwort

<?php
  $fname = $_GET['firstname'];
  if ($fname == 'Jeff') {
    echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
  }
?>

Schlüssel Änderungen:

• ?callback=?: In JSONP fügt der Server eine Rückruffunktion in die Antwort ein. Der ?callback=? Ermöglicht dem Browser, eine dynamisch generierte Rückruffunktion für den Server bereitzustellen.
• $_GET['callback'] . '(': Der Server verwendet JavaScript, um die vom Browser bereitgestellte Rückruffunktion aufzurufen.
• res.fullname: Der JavaScript-Code greift auf den vom Server zurückgegebenen JSON zu und zeigt den an 'vollständiger Name'-Wert.

HTML in Antwort

Ja, Sie können HTML im Ergebnis speichern und es wird als String zurückgegeben. Der JavaScript-Code verarbeitet den HTML-Code dann entsprechend.

Beispielverwendung

Dieses Beispiel ruft den vollständigen Namen von „Jeff“ aus einem PHP-Skript ab, das sich unter befindet „http://www.write-about-property.com/jsonp.php“ Wenn der Name mit „Jeff“ übereinstimmt, wird der vollständige Name „Jeff Hansen“ zurückgegeben.

Das obige ist der detaillierte Inhalt vonWie löst JSONP Probleme beim ursprungsübergreifenden Datenabruf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!