So implementieren Sie Ajax- und Ajax-Cross-Domain-Anfragen in JS

Der unten stehende Herausgeber wird Ihnen ein Beispiel für die Implementierung von Ajax und domänenübergreifenden Ajax-Anfragen in nativem JS vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Editor, um einen Blick darauf zu werfen

1. Ajax mit nativem JS implementieren

Der erste Schritt besteht darin, das XMLHttpRequest-Objekt zu erhalten

Schritt 2: Richten Sie die Statusüberwachungsfunktion ein

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

Schritt 4: Senden Sie eine Anfrage, Sie können ein Objekt senden und eine Zeichenfolge, keine Notwendigkeit Daten übergeben und null senden

Schritt 5: Beurteilen Sie in der Listening-Funktion readyState=4&&status=200, um anzuzeigen, dass die Anfrage erfolgreich ist

Schritt 6: Verwenden Sie ResponseText und ResponseXML um die Antwortdaten zu akzeptieren und natives JS Manipulate DOM zu verwenden, um

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);

anzuzeigen 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

, also Der Hintergrund gibt JSON direkt zurück. Die Zeichenfolge wird im Skript-Tag nicht analysiert.

Daher sollte das Backend einen Funktionsnamen an das Frontend zurückgeben und die JSON-Zeichenfolge als Parameter übergeben.

Im Backend zurückgeben PHP-Datei:

echo"callBack({$str})";

③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.

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

3. JSONP der Ajax-Implementierung

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

② Wenn das Backend zurückkehrt, muss die Rückruffunktion noch 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:

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

③Nachdem der Hintergrund zurückgekehrt ist, Ajax immer noch Sie können Erfolg als erfolgreiche Rückruffunktion verwenden:

success:function(data){}

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

echo"callBack({$str})";

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

habe ich das oben Gesagte für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den asynchronen Bild-Upload in Javascript

So implementieren Sie die Funktion für versteckte Elemente in jquery

So erreichen Sie Passwortkonsistenz in Verifizierungsformularen in jQuery

So verwenden Sie Array-Funktionen in JS

Informationen zur Verwendung der Auswahlkomponente im WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Ajax- und Ajax-Cross-Domain-Anfragen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!