Lassen Sie uns dies anhand eines typischen Beispiels für die Anmeldeüberprüfung demonstrieren.
Im Allgemeinen erfordert die Verwendung des XMLHttpRequest-Objekts zur Anmeldeüberprüfung die folgenden Schritte:
1. Verwenden Sie die DOM-Methode, um den Wert im Eingabefeld abzurufen
Kopieren Sie den Codecode wie folgt:
var userName = document.getElementById("userName").value;
2. Erstellen Sie ein XMLHttpRequest-Objekt. Der Hauptgrund besteht darin, Probleme mit der Browserkompatibilität zu berücksichtigen.
Kopieren Sie den Codecode wie folgt:
if (window.XMLHttpRequest) {
//Für Firefox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = new XMLHttpRequest();
//Korrektur von Fehlern in einigen spezifischen Versionen des Mozillar-Browsers
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//Für IE6, IE5.5, IE5
//Zwei Steuerelementnamen, die zum Erstellen von XMLHTTPRequest-Objekten verwendet werden können, gespeichert in einem js-Array
//Die zuerst eingestufte Version ist neuer
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
versuchen{
//Nehmen Sie einen Steuerelementnamen heraus und erstellen Sie ihn. Wenn die Erstellung erfolgreich ist, beenden Sie die Schleife.
//Wenn die Erstellung fehlschlägt, wird eine Ausnahme ausgelöst und die Schleife kann dann mit dem Erstellen fortfahren
xmlhttp = new ActiveXObject(activexName[i]);
brechen;
} Catch(e){
}
}
}
3. Registrieren Sie die Rückruffunktion des XMLHttpRequest-Objekts. Beim Registrieren der Rückruffunktion benötigen Sie den Funktionsnamen und dürfen keine Klammern hinzufügen.
Kopieren Sie den Codecode wie folgt:
//Bei der Registrierung der Rückruffunktion ist der Funktionsname erforderlich, keine Klammern hinzufügen
//Wir müssen den Funktionsnamen registrieren. Wenn wir Klammern hinzufügen, wird der Rückgabewert der Funktion registriert.
xmlhttp.onreadystatechange = Rückruf;
4. Verbindungsinformationen festlegen (GET).
Kopieren Sie den Codecode wie folgt:
// Der erste Parameter gibt die HTTP-Anforderungsmethode an, unterstützt alle HTTP-Anforderungsmethoden und verwendet hauptsächlich Get und Post
// Der zweite Parameter stellt die URL-Adresse der Anforderung dar, und die von der get-Methode angeforderten Parameter sind ebenfalls in der URL enthalten.
//Der dritte Parameter gibt an, ob asynchrone oder synchrone Interaktion verwendet werden soll, true bedeutet asynchron
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5.Senden Sie eine Anfrage
Kopieren Sie den Codecode wie folgt:
xmlhttp.send(null);
6. (POST) -Methode: Sie müssen den HTTP-Anforderungsheader selbst festlegen. Da er codiert werden muss, können Sie die Daten nicht direkt im zweiten Parameter von XHR.open senden. Stattdessen sollten Sie die Methode send () verwenden um die Daten zu versenden.
Kopieren Sie den Codecode wie folgt:
//Code für POST-Anfrage
//xmlhttp.open("POST","AJAXServer",true);
//POST-Methode erfordert, dass Sie den HTTP-Anforderungsheader selbst festlegen
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Daten im POST-Modus senden
xmlhttp.send("name=" + Benutzername);
Rückruffunktion:
Kopieren Sie den Codecode wie folgt:
//Rückruffunktion
Funktionsrückruf() {
//alert(xmlhttp.readyState);
//5. Antwortdaten empfangen
//Bestimmen Sie, ob der Status des Objekts interaktiver Abschluss ist
if (xmlhttp.readyState == 4) {
//Bestimmen Sie, ob die http-Interaktion erfolgreich ist
if (xmlhttp.status == 200) {
//Holen Sie sich die vom Lackserver zurückgegebenen Daten
//Erhalten Sie die vom Serversegment ausgegebenen Klartextdaten
var ResponseText = xmlhttp.responseText;
//Daten auf der Seite anzeigen
//Suchen Sie über dom den Elementknoten, der dem div-Tag entspricht
var divNode = document.getElementById("result");
//Legen Sie den HTML-Inhalt im Elementknoten fest
divNode.innerHTML = ResponseText;
} anders {
alarm("Es ist ein Fehler aufgetreten!!!");
}
}
}