Vier Schritte zur Verwendung von Ajax

Dieses Mal werde ich Ihnen vier Schritte zur Verwendung von Ajax vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax? Hier sind praktische Fälle.

Was ist Ajax?

Ajax (asynchrones Javascript XML) kann Teildaten einer Webseite aktualisieren, anstatt sie neu zu laden gesamte Webseite.

Wie verwende ich Ajax?

Der erste Schritt: Erstellen Sie das xmlhttprequest-Objekt, var xmlhttp =new XMLHttpRequest( ); Das XMLHttpRequest-Objekt wird zum Datenaustausch mit dem Server verwendet.

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 die Anfrage an den Server zu senden.

xhttp.send(string); Verwenden Sie die Post-Methode, um eine Anfrage an den Server zu senden.

Wann wird die Beitragsanfrage verfügbar sein?

(1) Beim Aktualisieren einer Datei oder Datenbank.

(2) Senden Sie eine große Datenmenge an den Server, da für die Post-Anfrage keine Zeichenbeschränkung gilt.

(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 posten

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

Formulardaten posten erfordert den setRequestHeader der xmlhttprequest Die Objektmethode fügt einen HTTP-Header hinzu.

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, dann muss die Funktion onreadystatechange nicht geschrieben werden und der Ausführungscode wird direkt nach dem Senden geschrieben.

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

Der dritte Schritt besteht darin, das Attribut „responseText“ oder „responseXML“ des xmlhttprequest-Objekts zu verwenden, um die Antwort des Servers zu erhalten.

Verwenden Sie das Attribut „responseText“, um die Daten der Zeichenfolge 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 Wenn wir möchten, dass der Server beim Senden einer Anfrage an den Server antwortet und einige Funktionen ausführt Sie müssen die Funktion onreadystatechange verwenden, wenn sich der readyState des xmlhttprequest-Objekts ändert.

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 Anforderung nicht initialisiert wurde, 1 bedeutet, dass die Serververbindung erfolgreich ist, 2, dass die Anforderung vom Server empfangen wurde, 3 Die Anfrage wird verarbeitet, 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();
} 
//函数作为参数调用
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc('index.aspx', myFunction)">Change Content
</button>
<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("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie implementiert Ajax+Struts2 die Funktion zur Überprüfung des Benutzereingabe-Verifizierungscodes?

Wie erreicht Ajax eine Nicht-Trennung? der Daten beim Klicken auf Liste laden

Das obige ist der detaillierte Inhalt vonVier Schritte zur Verwendung von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!