Wie kann JSONP die domänenübergreifenden AJAX-Kommunikationsprobleme von jQuery lösen?

jQuery AJAX Cross-Domain Communication Challenge

Wenn Sie auf domänenübergreifende AJAX-Anfragen stoßen, bei denen ein HTML-Dokument aus einer Domäne versucht, eine zu erstellen Wenn Sie eine Anfrage an eine andere Domain senden, treten Schwierigkeiten auf. Lassen Sie uns ein Szenario mit zwei PHP-Dateien untersuchen, test.php und testserver.php:

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php:

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

Wenn beide Dateien auf demselben Server gehostet werden, ist die AJAX-Anfrage erfolgreich. Wenn sie jedoch auf verschiedenen Servern platziert werden, schlägt die Anfrage fehl und löst die Warnung „Fehler“ aus. Dies liegt an der Same Origin Policy (SOP) des Browsers, die den domänenübergreifenden Datenaustausch einschränkt.

Lösung: Verwendung von JSONP

Um die SOP zu überwinden, können wir Verwenden Sie JSONP (JSON mit Padding). JSONP ermöglicht das Senden von Daten als Funktionsaufruf und umgeht so die durch die SOP auferlegten Einschränkungen.

jQuery:

$.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:

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

In diesem geänderten Code enthält die JavaScript-Anfrage „dataType: 'jsonp“, um die Verwendung von anzugeben JSONP. Das PHP-Skript ruft den von jQuery über „$_GET['callback']‘ gesendeten Callback-Funktionsnamen ab und verwendet ihn zur Bildung der Ausgabe. Die Ausgabe im PHP-Skript sollte als Callback-Funktion gefolgt von den JSON-Daten erscheinen, um sicherzustellen, dass die Daten als Funktionsaufruf übertragen werden.

Alternativ stellt jQuery die Methode $.getJSON() bereit, eine Abkürzung für die Handhabung JSONP-Anfragen. Allerdings muss die URL „callback=?“ enthalten. als GET-Parameter, wobei jQuery dynamisch seine eigene Rückrufmethode einfügt.

Das obige ist der detaillierte Inhalt vonWie kann JSONP die domänenübergreifenden AJAX-Kommunikationsprobleme von jQuery lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!