The application of Ajax in compiling user registration and its technical summary

Ajax| User Registration

The example I have cited is an application of an enterprise user registration, when the user registration to check the user name and enterprise name is available, the previous practice is to add a button next, click "Check", the server issued a request, and then wait ... The server returns information and continues the operation. If we use AJAX technology to do the above, we don't have to wait for the server to return information. When a user enters a user name or enterprise name, when the input text box loses focus, the request is automatically made to the server, and the user continues to do the following, without having to click "Check" or wait for the server to return information, The check is asynchronous with the user operation and can be performed simultaneously. When the server information is returned, it automatically displays the return information in the corresponding position on the face page, without refreshing the page, which is equivalent to the local refresh effect.

Let's look at the code below.

The complete code for the HTML page is as follows:

1<% @page language= "java" contenttype= "TEXT/HTML;CHARSET=GBK"%> 2<script language= "javascript" type= "Text/javascript" 3!-- 4/**//**ajax Start by Alpha 2005-12-31*/ 5 6 var http = gethttpobject (); 7 8 function Handlehttpresponse () { 9 if (http.readystate = 4) { Ten if (http.status = = 200) { One var xmldocument = Http.responsexml; if (http.responsetext!= "") { document.getElementById ("Showstr"). Style.display = ""; document.getElementById ("UserName"). style.background= "#FF0000"; document.getElementById ("Showstr"). innertext = Http.responsetext; }else{ document.getElementById ("UserName"). style.background= "#FFFFFF"; document.getElementById ("Showstr"). Style.display = "None"; 19} 20 21} else{ Alert ("An exception to the page you are requesting may affect the information you are browsing on the page!") "); alert (http.status); 25} 26} 27} 28 The function handleHttpResponse1 () { if (Http.readystate = 4) { if (Http.status = 200) { The var xmldocument = Http.responsexml; if (http.responsetext!= "") { document.getElementById ("Comnmstr"). Style.display = ""; document.getElementById ("Comnm"). style.background= "#FF0000"; document.getElementById ("Comnmstr"). innertext = Http.responsetext; Panax}else{ document.getElementById ("Comnm"). style.background= "#FFFFFF"; document.getElementById ("Comnmstr"). Style.display = "None"; 40} 41 42} else{ Alert ("The page you are requesting is abnormal and may affect your browsing of the page!") "); alert (http.status); 46} 47} 48} 49 function Chkuser () { Wuyi var url = "/chkuserandcom"; The var name = document.getElementById ("UserName"). Value; The URL = = ("&username=" +name+ "&oprate=chkuser"); Http.open ("Get", url,true); Http.onreadystatechange = Handlehttpresponse; Http.send (NULL); return; 58} The function chkcomnm () { var url = "/chkuserandcom"; The-var name = document.getElementById ("COMNM"). Value; The URL = + ("&comname=" +name+ "&oprate=chkcom"); Http.open ("Get", url,true); Http.onreadystatechange = HandleHttpResponse1; Http.send (NULL); The return; 67} 68 69//This function can create the XMLHttpRequest object we need The function Gethttpobject () { The var xmlhttp = false; The If (window). XMLHttpRequest) { XMLHTTP = new XMLHttpRequest (); if (Xmlhttp.overridemimetype) { Xmlhttp.overridemimetype (' Text/xml '); 76} 77} else{ try{ XMLHTTP = new ActiveXObject ("Msxml2.xmlhttp"); Bayi}catch (e) { try{ XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP"); }catch (E) { XMLHTTP = false; 86} 87} 88} XMLHTTP return; 90} 91/**//**ajax End * 92 93//Inspection Form 94function Chkpassword () 95{ The Var M=document.form1; M.password.value (len) | | | len (m.password.value) 5 | |!isstr (M.PASSWORD.VALUE) 98 { document.getElementById ("Passwordstr"). Style.display = ""; document.getElementById ("password"). style.background= "#FF0000"; document.getElementById ("Passwordstr"). innertext = "Sorry, the password must be English letter, digit or underline, length is 5~20!"; 102} Or else 104 { document.getElementById ("password"). style.background= "#FFFFFF"; document.getElementById ("Passwordstr"). Style.display = "None"; 107} 108} 109 110function Chkconfirmpassword () 111{ 112 Var M=document.form1; 113 if (M.password.value!= m.confirmpassword.value) 114 { document.getElementById ("Confirmpasswordstr"). Style.display = ""; 116 document.getElementById ("ConfirmPassword"). style.background= "#FF0000"; 117 document.getElementById ("Confirmpasswordstr"). innertext = "Sorry, the password is inconsistent with the duplicate password!"; 118} 119 Else 120 { 121 document.getElementById ("ConfirmPassword"). style.background= "#FFFFFF"; 122 document.getElementById ("Confirmpasswordstr"). Style.display = "None"; 123} 124} 125 126function CheckField () 127{ 128 Var M=document.form1; 129 if (m.username.value.length==0) 130 { 131 alert ("Sorry, the username must be an English letter, number, or underscore, the length is 5~20.") "); 132 M.username.focus (); The return false; 134} 135 if (m.password.value.length==0) 136 { 137 alert ("Sorry, the password must be an English letter, number or underscore, length is 5~20.") "); 138 M.password.focus (); 139 return false; 140} != if (M.password.value m.confirmpassword.value) 142 { 143 Alert ("Sorry, inconsistent password and duplicate password!"); 144 M.confirmpassword.focus (); 145 return false; 146} 147 if (m.comnm.value.length==0) 148 { 149 Alert ("Sorry, the enterprise name can not be empty!!") "); M.comnm.focus (); 151 return false; 152} 153 M.submit (); 154} 155 156//--> 157 </script> 158<body topmargin= "0" > 159<form name= "Form1" method= "Post" action= "/control?act=register" 160<table width= "100%" > 161 <tr> <td align= "Center" "Ajax Demo program </td> </tr> 162 <tr> <td align= "Center"------Enterprise Registration by Alpha </td> </tr> 163 </table> 164 165 <HR> 166 <table width= "border=" 0 "cellpadding=" 1 "cellspacing=" 1 "align=" center "> 167 <tr> The <td> <font color= "Red" >* </font> </td> 169 <td> User account: </td> 170 <td> 171 <input type= "text" name= "UserName" maxlength= "style=" background: #FFFFFF "onblur=" Chkuser () "Value=" "" 172 <div id= "Showstr" style= "Background-color: #FF9900;d isplay:none" > </div> 173 </td> 174 </tr> 175 <tr> 176 <td> <font color= "Red" >* </font> </td> 177 <td> Enterprise Name: </td> 178 <td> 179 <input type= "text" name= "comnm" maxlength= "style=" background: #FFFFFF "onblur=" chkcomnm () "Value=" "" 180 <div id= "Comnmstr" style= "Background-color: #FF9900;d isplay:none" > </div> 181 All </td> 183 </tr> 184 <tr> 185 <td> <font color= "Red" >* </font> </td> 186 <td> User password: </td> 187 <td> <input type= "password" name= "password" maxlength= "style=" background: #FFFFFF "onblur=" Chkpassword () "/" 188 <div id= "Passwordstr" style= "Background-color: #FF9900;d isplay:none" > </div> 189 </td> 190 </tr> 191 <tr> The <font <td> color= "Red" >* </font> </td> 193 <td> Confirm Password: </td> 194 <td> <input type= "password" name= "ConfirmPassword" maxlength= "style=" background: #FFFFFF "onblur=" Chkconfirmpassword () "/> 195 <div id= "confirmpasswordstr" style= "Background-color: #FF9900;d isplay:none" > </div> 196 </td> 197 </tr> 198 </table> 199 <div align= "Center" 201 <input type= "button" Name= "OK" value= "OK" 202 203 <input type= "reset" name= "reset" value= "Cancel" 204 </div> 205 206 </form> 207 </body> The

After using JavaScript to create a XMLHttpRequest class to send an HTTP request to the server, decide what to do when you receive a response from the server. This tells the HTTP request object which JavaScript function to use to handle the response. You can set the object's onReadyStateChange property to the function name of the JavaScript you want to use, as follows: Xmlhttp_request.onreadystatechange =functionname;

FunctionName is a function name created with JavaScript, be careful not to write functionname (), and of course we can create JavaScript code directly after onreadystatechange.

[1] [2] Next page