Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Ajax-Nutzungsschritte

php中世界最好的语言
Freigeben: 2018-04-24 16:58:30
Original
1725 Leute haben es durchsucht

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");
}
Nach dem Login kopieren

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();
Nach dem Login kopieren

Beispiel posten

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Nach dem Login kopieren

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");
Nach dem Login kopieren

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();
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
Nach dem Login kopieren

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.

<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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage