Learn AJAX from scratch and create automatic verification forms

This article mainly introduces the zero-based learning of AJAX to create automatic verification forms. Friends who need it can refer to it

Traditional web pages detect whether the user name is occupied when registering. Traditional verification is obvious Slow and clumsy.

When ajax appeared, this experience has been greatly improved, because when the user fills in the form, the signed form items have been sent to the server, and then the data is queried based on the content filled in by the user. The query number is automatically prompted without page refresh. Applications like this greatly improve the user experience. This section briefly introduces how to create automatic verification forms. Analyze the role of ajax in principle.

1. Build the framework

First build the 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. Establish an asynchronous request

When the user finishes entering the "user name" and starts to enter other forms, background verification is performed. The code is as follows:

Enter user namee9051774bbd708d5f8d81bd26f04c0ba
In the function startCheck(), directly send the this keyword and pass the text box object itself as a parameter, and the function itself first determines whether the user input is empty. If it is empty, Then return directly, focus on the username text box, and give corresponding prompts.

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

When the user enters the username, use toLowerCase() to convert it to lowercase letters and establish an asynchronous request.

The showResult() function is used to display the responseText text returned by the server processing.

<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. Server processing

<%@ 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. Display the results of asynchronous query

When the user enters other items in the form, the asynchronous return result is already in It was done quietly in the background.

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";
}

The above code displays the results returned by the server.

The complete code of this case

输用户名




输入密码




重复输入

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implement drop-down box linkage display data based on Ajax

Detailed explanation of ajax synchronization and asynchronousness in jquery

ajax asynchronous upload in jquery

The above is the detailed content of Learn AJAX from scratch and create automatic verification forms. For more information, please follow other related articles on the PHP Chinese website!