Detaillierte Erläuterung der Ajax-Nutzungsschritte

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Ajax ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Ajax? Hier sind praktische Fälle.

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 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 die Verwendung der setRequestHeader-Methode des xmlhttprequest-Objekts Fügen Sie einen HTTP-Head 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, 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 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, 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 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.

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>

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:

Ausführliche Erläuterung zum Umgang mit domänenübergreifenden WebService-Problemen

Ausführliche Erläuterung zur Verwendung von Ajax() zur Interaktion mit dem Hintergrund

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ajax-Nutzungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!