Vertiefendes Verständnis der vier Schritte der Ajax-Datenanforderung

Ajax wird häufig in der Front-End-Arbeit verwendet. Tatsächlich wissen viele Leute nur, dass Ajax eine asynchrone Anfrage ist und wissen nicht, wie man sie verwendet. Als nächstes erkläre ich Ihnen die vier Hauptschritte der Verwendung von Ajax . Freunde, die es brauchen, können als Referenz dienen.

Was ist Ajax?

Ajax (asynchrones Javascript-XML) kann teilweise Webseitendaten aktualisieren, anstatt die gesamte Webseite neu zu laden.

Wie verwende ich Ajax?

Der erste Schritt, erstellen Sie ein xmlhttprequest-Objekt, var xmlhttp =new XMLHttpRequest(); das XMLHttpRequest-Objekt Wird verwendet, um mit dem Server Daten auszutauschen.

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Der zweite Schritt besteht darin, die Methoden open() und send() des xmlhttprequest-Objekts zu verwenden, um Ressourcenanforderungen an den Server zu senden.

Die Methode xmlhttp.open(method, url, async) umfasst get und post, die URL ist hauptsächlich der Pfad einer Datei oder Ressource und der async-Parameter ist true (für asynchron) oder false (für synchron)
xhttp. send(); Verwenden Sie die get-Methode, um eine Anfrage an den Server zu senden.
xhttp.send(string); Verwenden Sie die Post-Methode, um eine Anfrage an den Server zu senden.

Wann kann die Postanfrage genutzt werden?

(1) Beim Aktualisieren einer Datei oder Datenbank.
(2) Senden Sie eine große Datenmenge an den Server, da es keine Zeichenbeschränkung für Post-Anfragen gibt.
(3) Senden Sie die vom Benutzer eingegebenen verschlüsselten Daten.

Beispiel abrufen:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();

Beispiel für einen Beitrag:

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Beitragsformulardaten müssen mit der setRequestHeader-Methode von hinzugefügt werden das xmlhttprequest-Objekt.

Beispiel für ein Beitragsformular

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

async=true Die onreadystatechange-Funktion wird ausgeführt, wenn der Server bereit ist zu antworten.

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();

asyn=false, Sie müssen die Funktion onreadystatechange nicht schreiben, schreiben Sie einfach den Ausführungscode direkt nach dem Senden.

xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Der dritte Schritt: Verwenden Sie das Attribut „responseText“ oder „responseXML“ des xmlhttprequest-Objekts, um die Antwort des Servers zu erhalten.

Verwenden Sie das Attribut „responseText“, um die Zeichenfolgendaten der Serverantwort abzurufen, und verwenden Sie das Attribut „responseXML“, um die XML-Daten der Serverantwort abzurufen.
Ein Beispiel ist wie folgt:

document.getElementById("demo").innerHTML = xhttp.responseText;

Die vom Server geantworteten XML-Daten müssen mithilfe von XML-Objekten konvertiert werden.

Beispiel:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Schritt 4, onreadystatechange-Funktion: Wenn wir beim Senden einer Anfrage an den Server möchten, dass der Server antwortet und einige Funktionen ausführt, müssen wir dies tun Verwenden Sie jedes Mal die Funktion onreadystatechange. Jede Änderung im readyState des xmlhttprequest-Objekts löst die Funktion onreadystatechange aus.

onreadystatechange-Attribut speichert eine Funktion, die automatisch aufgerufen wird, wenn sich readyState ändert.
readyState-Attribut, der Status des XMLHttpRequest-Objekts, ändert sich von 0 auf 4, 0 bedeutet, dass die Anfrage nicht initialisiert wurde, 1 bedeutet, dass die Serververbindung erfolgreich ist, 2 die Anfrage vom Server empfangen wird, 3 die Anfrage verarbeitet wird , 4 Die Anfrage ist abgeschlossen und die Antwort ist bereit.
Statusattribut, 200 bedeutet erfolgreiche Antwort, 404 bedeutet, dass die Seite nicht existiert.

Im onreadystatechange-Ereignis ist die Serverantwort bereit. Wenn readyState==4 und status==200, ist die Serverantwort bereit.
Beispiel:

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
} 
//函数作为参数调用



Let AJAX change this text.
Change Content

<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById(&quot;demo&quot;).innerHTML = xhttp.responseText;
}
</script>

Das Obige sind die vier Schritte zur Verwendung von Ajax.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der vier Schritte der Ajax-Datenanforderung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!