Use javascript to update data without refreshing pages

The following body:
The program design often encounters a situation where the user cannot know in advance what data the user will need.

After the data is extracted, It is fed back to the user. For example, if you select a province

All cities are displayed again. In this case, you need to refresh the entire page before you can read it again.

Not very elegant. In fact, we can use javascript to combine Microsoft's XMLHTTP object, so we don't need to refresh it. We can just "just"

It is professional and efficient to read data from the server.
Next we will demonstrate this technology by verifying whether a user is registered.

 

1. First, create a CheckUser. asp file on the server to check whether the user exists. Based on whether the user exists, feedback 0 and

1
U_name = Request. QueryString ("u_name ")
If u_name has then
Response. write "0"
Else
Response. write "1"
End if
2. Client HTML design:
I. JavaScript code
<Script language = javascript>
Function check_user_exists (form ){
U_name = form. u_name.value;
If (u_name = null | u_name = ''){
Alert ("Enter the user name ");
Return false;
}
InfoBoard = document. getElementById ("checkInfo ");
InfoBoard. innerText = 'querying ...';
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'; break;
Case "1 ":
InfoBoard. innerHTML = '<font color = red> congratulations </font>.' + u_name + 'Can Be Used'; break;
Case "0 ":
InfoBoard. innerHTML = '<font color = red> sorry </font>, Username' + u_name + 'is in use ';
}
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>
Ii. HTML form design:
<Form name = form1 action = "XXXX. asp" method = "post">
<Input type = text name = u_name> <span id = "checkInfo"> </span> <input type = button name = checkuser

Value = "check whether a user exists" onClick = "check_user_exists (this. form);">
</Form>

After the above three steps, a page does not need to refresh the data update program completed (Demo address: http://www.web9898.cn/reg ),

Using this method, you can implement a lot of cool applications :)