Lernen Sie AJAX von Grund auf und erstellen Sie automatische Verifizierungsformulare

In diesem Artikel wird hauptsächlich das nullbasierte Lernen von AJAX zum Erstellen automatischer Verifizierungsformulare vorgestellt. Freunde, die es benötigen, können darauf verweisen.

Herkömmliche Webseiten erkennen, ob der Benutzername bei der Registrierung belegt ist offensichtlich langsam und ungeschickt.

Als Ajax erschien, wurde diese Erfahrung erheblich verbessert, da beim Ausfüllen des Formulars durch den Benutzer die signierten Formularelemente an den Server gesendet wurden und die Daten dann basierend auf dem von ihm ausgefüllten Inhalt abgefragt werden der Benutzer. Die Abfragenummer wird automatisch ohne Seitenaktualisierung abgefragt. Anwendungen wie diese verbessern das Benutzererlebnis erheblich. In diesem Abschnitt wird kurz vorgestellt, wie automatische Verifizierungsformulare erstellt werden. Analysieren Sie grundsätzlich die Rolle von Ajax.

1. Erstellen Sie das Framework

Erstellen Sie zunächst das HTML-Framework

<form name="register">
<p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
<p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p>
<p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p>
<p><input type="submit" value="注册"></p>
<p><input type="reset" value="重置"></p>
</form>

2. Erstellen Sie eine asynchrone Anfrage

Wenn der Benutzer mit der Eingabe von „Benutzername“ fertig ist und mit der Eingabe anderer Formulare beginnt, wird eine Hintergrundüberprüfung durchgeführt. Der Code lautet wie folgt:

Benutzernamen eingeben
In der Funktion startCheck() senden Sie direkt das Schlüsselwort this und übergeben das Textfeldobjekt selbst als Parameter, und die Funktion selbst bestimmt zunächst, ob der Benutzer eine Eingabe macht ist leer. Wenn es leer ist, kehren Sie direkt zurück, konzentrieren Sie sich auf das Textfeld „Benutzername“ und geben Sie entsprechende Eingabeaufforderungen ein.

function startCheck(oInput){
//判断是否有输入，没有输入则直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用户名文本框
document.getElementById("User").innerHTML="用户名不能为空";
return;
}
//创建异步请求
//....
}

Wenn der Benutzer den Benutzernamen eingibt, verwenden Sie toLowerCase(), um ihn in Kleinbuchstaben umzuwandeln und eine asynchrone Anfrage einzurichten.

Die Funktion showResult() wird verwendet, um den vom Server zurückgegebenen ResponseText-Text anzuzeigen.

<script type="text/javascript">
var xmlHttp;
function createXMLHttprequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startCheck(oInput) {
//判断是否有输入，没有输入则直接返回。
if (!oInput.value) {
oInput.focus(); //聚焦到用户名文本框
document.getElementById("User").innerHTML = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "&timestamp=" + new Date().getTime();
xmlHttp.open("GET", sUrl, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务结果
}
xmlHttp.send(null);
}
</script>

3. Serververarbeitung

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>

4. Ergebnisse der asynchronen Abfrage anzeigen

Wenn der Benutzer andere Elemente in das Formular eingibt, erfolgt die asynchrone Das Rückgabeergebnis liegt bereits vor. Es wurde still und leise im Hintergrund durchgeführt.

function showResult(sText) {
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if (sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}

Der obige Code zeigt die vom Server zurückgegebenen Ergebnisse an.

Der vollständige Code dieses Falls

输用户名




输入密码




重复输入

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Implementierung der Verknüpfungsanzeige von Daten in Dropdown-Boxen basierend auf Ajax

Detaillierte Erläuterung der Ajax-Synchronisation und Asynchronität in jquery

Ajax asynchroner Upload in jquery

Das obige ist der detaillierte Inhalt vonLernen Sie AJAX von Grund auf und erstellen Sie automatische Verifizierungsformulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!