Use JavaScript implementation page no refresh update data _ajax related

The following text:
Program design will often run into a situation, that is, you can not know beforehand what data users will need, must be based on user selection and then from the service

Is fed back to the user after the data is extracted. For example, a simple situation, after the user chooses the province, we immediately will be in the city side of the provincial

All the cities are showing up again. This situation generally needs to refresh the entire page before it can be read again, but this is not only inefficient, but also

Not very elegant. In fact, using JavaScript with the XMLHTTP object of the software, we can not refresh, "slightly" can be

The data is read from the server, it is both professional and efficient.
Here we demonstrate this technique by verifying that the user is registered.

1. First set up a checkuser.asp file on the server to detect whether the user exists, according to the existence of user feedback 0 and

1
u_name=request.querystring ("U_name")
if u_name exists then
Response.Write "0"
else
Response.Write "1"
End If
2. Client HTML design:
First, JavaScript code
<script language=javascript>
function check_user_exists (form) {
U_name=form.u_name.value;
If (u_name==null| | u_name== ') {
alert ("Please enter your username");
return false;
}
Infoboard=document.getelementbyid ("Checkinfo");
infoboard.innertext= ' query ... ';
myurl=location.protocol+ "//" +location.hostname+ "/checkuser.asp?u_name=" +u_name;
Retcode=openurl (Myurl);
Switch (retCode) {
Case "2":
infoboard.innerhtml= ' <font color=red> sorry </font>, query failed ';
Case "1":
infoboard.innerhtml= ' <font color=red> congratulations to </font>, ' +u_name+ ' can use '; break;
Case "0":
infoboard.innerhtml= ' <font color=red> sorry </font>, username ' +u_name+ ' has been used ';
}
return;
}

function OpenURL (URL) {
var objxml=new activexobject ("Microsoft.XMLHTTP")
Objxml.open ("Get", url,false);
Objxml.send ();
Retinfo=objxml.responsetext;
if (objxml.status== "200") {
return retinfo;
}
else{
Return "-2";
}
}
</script>
Second, HTML form design:
<form name=form1 action= "xxxx.asp" method= "POST" >
<input type=text name=u_name><span id= "Checkinfo" ></span><input Type=button

Value= "detects if the user exists" onclick= "check_user_exists (this.form);" >
</form>

After three steps, a data update that does not require a page refresh is complete (demo address: Http://www.web9898.cn/reg),

In this way, a lot of cool apps can be implemented: