Implement no refresh update data with JavaScript

javascript| Data | refresh | no refresh

Program design will often encounter a situation, that is, you can not know beforehand what data users will need, must be based on user selection and then from the server to retrieve data after the user feedback. For example, in a simple situation, after the user chooses the province, we will immediately show all the cities in the province in the city. This situation generally needs to refresh the entire page before it can be read again, but this is not only inefficient, it is not very elegant. In fact, with JavaScript combined with the XMLHTTP object, we can not refresh, "a little" can be read from the server, appears both professional and efficient.

Here we demonstrate this technique by verifying that the user is registered.

' Program design: Global worldwide, professional domain name registration, virtual hosting provider
' URL: http://www.netInter.cn
' This program is the universal Worldwide original program, so if you need to reprint, please specify the source, thank you.
' The above information and the text of the article is an inseparable part, so if you want to reprint this article, you must retain the above information.

1. First set up a checkuser.asp file on the server to detect whether the user exists, according to the existence of the user feedback 0 and 1 respectively
U_name=request.querystring ("U_name")
If U_name exists then
Response.Write "0"
Else
Response.Write "1"
End If
2. Client-side HTML design:
One, 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&gt, query failed ';
Case "1":
Infoboard.innerhtml= ' <font color=red> Congratulations </font&gt, ' +u_name+ ' can use ';
Case "0":
Infoboard.innerhtml= ' <font color=red> sorry </font>, user name ' +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> two, 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= "detect if a user exists" >
</form>

After three steps, a data update program that does not require page refreshes is complete, so many cool apps can be implemented in this way: