Example code: Use Ajaxt to update data without refreshing

DocumentIn program design, you often encounter a situation where you cannot know in advance what data the user needs. You must extract the data from the server and then feed it back to the user based on the user's selection. For example, if you select a province, we will immediately display all the cities in the province. In this case, you need to refresh the entire page before reading it again. However, this is not only inefficient, but also not elegant. In fact, we can use javascript to combine Microsoft's XMLHTTP object. We don't need to refresh it. We can read the data from the server just a little bit, which is both professional and efficient.

Next we will demonstrate this technology by verifying whether a user is registered.

'The above information is an integral part of the text. Therefore, if you want to reprint this article, you must keep the above information.

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

Code snippet

Reference content is as follows: U_name = Request. QueryString ("u_name ") If u_name has then Response. write "0" Else Response. write "1" End if2. client HTML design: I. JavaScript code snippets <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 [/red], query failed'; break; Case "1 ": InfoBoard. innerHTML = '<font color = red> Congratulations [/red],' + u_name + 'Can Be Used'; break; Case "0 ": InfoBoard. innerHTML = '<font color = red> sorry [/red], Username' + u_name + 'already 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> 2. HTML form design: code snippet <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 data update program that does not require page refreshing is completed.