Native JS implementiert Ajax- und Ajax-domänenübergreifende Anforderungen

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel für die Implementierung von Ajax und domänenübergreifenden Ajax-Anfragen durch natives JS. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Native JS-Implementierung von Ajax

Der erste Schritt besteht darin, das XMLHttpRequest-Objekt abzurufen

Der zweite Schritt: Legen Sie die Status-Listening-Funktion fest

Die Dritter Schritt: Öffnen Sie eine Verbindung, true ist eine asynchrone Anfrage

Teil 4: Senden Sie eine Anfrage, Sie können ein Objekt und eine Zeichenfolge senden, es müssen keine Daten übergeben werden, null senden

Schritt 5: In der Listening-Funktion bedeutet Judge readyState=4&&status=200, dass die Anfrage erfolgreich ist

Schritt 6: Verwenden Sie ResponseText und ResponseXML, um die Antwortdaten zu akzeptieren, und verwenden Sie natives JS, um das DOM für die Anzeige zu betreiben

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
 console.log(ajax.readyState);
 console.log(ajax.status);
 if(ajax.readyState==4 && ajax.status==200){
  console.log(ajax.responseText);
  console.log(ajax.responseXML);//返回不是XML，显示null
  console.log(JSON.parse(ajax.responseText));
  console.log(eval("("+ajax.responseText+")"));
  }
}
ajax.open("GET","h51701.json",true);
ajax.send(null);

2. Ajax-Cross-Domain-Anfrage

[Cross-Domain-Anfrageverarbeitung] Aufgrund der gleichen Ursprungsrichtlinie in JS. Wenn Sie Dateien mit unterschiedlichen Protokollnamen, unterschiedlichen Portnummern und unterschiedlichen Hostnamen anfordern, verstößt dies gegen die gleiche Ursprungsrichtlinie und die Anforderung kann nicht erfolgreich sein! Eine domänenübergreifende Verarbeitung ist erforderlich!

1. Hintergrund-PHP-Einstellungen:

Im Frontend sind keine Einstellungen erforderlich. Schreiben Sie einen Header in die angeforderte PHP-Datei im Hintergrund.

header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

2. Verwenden Sie das src-Attribut + JSONP, um eine domänenübergreifende Funktionalität zu erreichen.

① Tags mit dem src-Attribut verfügen über eine domänenübergreifende Funktionalität! Daher können Sie das src-Attribut des Skript-Tags verwenden, um Hintergrunddaten anzufordern

<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>

② Da src den geladenen Inhalt nach erfolgreichem Laden der Daten direkt in das Skript-Tag einfügt

, daher wird der Hintergrund direkt zurückgegeben. Eine JSON-Zeichenfolge wird nicht im Skript-Tag analysiert.

Daher sollte das Backend einen Rückgabefunktionsnamen an das Frontend zurückgeben und die JSON-Zeichenfolge als Parameter in die PHP-Datei des Backends übergeben gib es zurück:

③Das Frontend empfängt die zurückgegebene Funktion und ruft sie direkt im Skript-Tag auf. Daher ist es notwendig, eine solche Rückruffunktion als Rückruf für eine erfolgreiche Anfrage zu deklarieren.

echo"callBack({$str})";

3. JSONP der Ajax-Implementierung

function callBack(data){
  alert("请求成功");
  console.log(data);
 }

① Wenn Sie eine Ajax-Anfrage stellen, setzen Sie den Datentyp auf „json“

② Wenn das Backend zurückkehrt, Es muss immer noch eine Rückruffunktion zurückgegeben werden. Wenn Ajax jedoch eine Anfrage sendet, verwendet es standardmäßig die Get-Anfrage, um den Namen der Rückgabefunktion an den Hintergrund zu senden. Der Hintergrund kann $_GET['callback'] verwenden, um den Namen der Callback-Funktion abzurufen:

③Nachdem der Hintergrund zurückgekehrt ist, kann Ajax den Erfolg weiterhin als erfolgreiche Rückruffunktion verwenden:

echo"{$_GET['callback']}({$str})";

Natürlich kann der Hintergrund nach Belieben auch einen Rückruffunktionsnamen zurückgeben.

success:function(data){}

Solange die Anfrage erfolgreich ist, ruft die Rezeption diese Funktion automatisch auf. Ähnlich den ②③ Schritten in Punkt 2

echo"callBack({$str})";

Verwandte Empfehlungen:

AJAX Cross-Domain Access – Einführung in zwei effektive Lösungen_PHP-Tutorial

So verwenden Sie natives JS zum Implementieren der Ajax-GET-POST-Anfrage

AngularJS-Methode zum Implementieren der Ajax-Anfrage

Das obige ist der detaillierte Inhalt vonNative JS implementiert Ajax- und Ajax-domänenübergreifende Anforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!