Implement page without refresh update data with JavaScript

javascript| Data | refresh | no Refresh | page

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.

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>

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= "detect if a user exists" >
</form>

After three steps, a data update program that does not require a page refresh is completed, so many cool applications can be implemented by this method.