Wie löst JSONP Probleme mit Cross-Origin-Anfragen?

Cross-Origin-Anfragen mit JSONP: Ein praktisches Beispiel

Wenn Sie auf Cross-Origin-Richtlinienbeschränkungen stoßen, bietet JSONP (JSON with Padding) eine praktische Lösung. Allerdings kann es zunächst verwirrend sein, die Einzelheiten zu verstehen. Lassen Sie uns den Prozess anhand eines einfachen jQuery-, PHP- und JSONP-Beispiels entmystifizieren.

JSONP für Cross-Origin-Anfragen implementieren

Bedenken Sie den folgenden falschen Codeausschnitt:

// 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';
}
?>

Um ursprungsübergreifende Anfragen zu ermöglichen, nutzen wir JSONP. So geht's:

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'" . '})';
}
?>

Schlüssel Punkte:

• ?callback=?: Dieser Parameter weist den Server an, den Namen der Rückruffunktion an die JSON-Antwort anzuhängen.
• res.fullname: In JavaScript greifen wir mithilfe der Punktnotation auf den Eigenschaftswert zu. In diesem Fall müssen wir die Antwort jedoch als JSON-Objekt behandeln.

HTML in JSONP-Antworten zurückgeben

Ja, Sie können HTML in JSONP-Antworten speichern. Ändern Sie den PHP-Code wie folgt:

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

In JavaScript können Sie dann über res.html auf den HTML-Code zugreifen.

Das obige ist der detaillierte Inhalt vonWie löst JSONP Probleme mit Cross-Origin-Anfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!