suchen

Heim >Web-Frontend >js-Tutorial >Wie kann JSONP domänenübergreifende Probleme mit jQuery AJAX lösen?

Wie kann JSONP domänenübergreifende Probleme mit jQuery AJAX lösen?

DDD
DDDOriginal
2024-12-22 22:15:13301Durchsuche

How Can JSONP Solve jQuery AJAX Cross-Domain Issues?

jQuery AJAX Cross-Domain-Problem

Im bereitgestellten Szenario, in dem zwei PHP-Dateien (test.php und testserver.php) miteinander kommunizieren Durch das AJAX von jQuery treten domänenübergreifende Einschränkungen auf, wenn sie sich auf separaten Servern befinden. Server A hostet test.php (z. B. localhost), während Server B testserver.php (z. B. Webserver) hostet.

Problem:
Trotz erfolgreicher Ausführung der AJAX-Anfrage Wenn sich die Dateien auf demselben Server befinden, schlägt der Vorgang mit einer Fehlermeldung fehl, wenn sie sich auf verschiedenen Servern befinden. Dies liegt an der Same-Origin Policy (SOP).

Lösung:
Um dieses domänenübergreifende Problem zu beheben, wird JSONP (JSON mit Padding) eingesetzt. JSONP nutzt Rückrufe, um Browsereinschränkungen zu umgehen.

Implementierung:

jQuery (test.php):

$.ajax({
    url: "http://domain.example/path/to/file/testserver.php",
    dataType: 'jsonp', // Notice! JSONP (lowercase 'P')
    success: function(json){
        // Handle JSON response (an array)
        alert("Success");
    },
    error: function(){
        alert("Error");
    }      
});

PHP (testserver.php):

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
$callbackName = $_GET['callback']; // Get the callback name from GET params
echo $callbackName."(".json_encode($arr).");";
?>

Erklärung:

  1. Die $.ajax()-Methode von jQuery wurde geändert, um „jsonp“ als zu verwenden der dataType.
  2. Die an $.ajax() übergebene Callback-Funktion wird der PHP-Variablen zugewiesen $callbackName.
  3. Das PHP-Skript bettet die JSON-Daten mithilfe des CallbackName-Werts in den Funktionsaufruf ein.
  4. Dadurch kann der Browser dynamisch ein