Heim > Web-Frontend > js-Tutorial > Hauptteil

Vier Schritte zur Verwendung von Ajax

php中世界最好的语言
Freigeben: 2018-04-04 10:46:24
Original
1561 Leute haben es durchsucht

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

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;
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 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();
} 
//函数作为参数调用



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:

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!

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