AJAX compiling of user registration instances and Technical Summary 1

In my example, an application is registered as an enterprise user. When a user registers, it checks whether the user name and enterprise name are available. The previous method was to add a button next to it, click "check" to send a request to the server and wait ...... The server returns information and continues the operation. If Ajax technology is used to implement the above operations, you do not have to wait for the server to return information. When you enter the user name or enterprise name, when the input text box loses focus, the system automatically sends a request to the server. The user does not need 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, the returned information is automatically displayed at the corresponding position on the page without refreshing the page, which is equivalent to partial refreshing.

Let's take a look at the code.

The complete HTML page code is as follows:

1 <% @ page language = "java" contentType = "text/html; charset = GBK" %> 2 <script language = "javascript" type = "text/javascript"> 3 <! -- 4/** // ** start with Ajax by Alpha 2005-12-31 */ 5 6 var http = getHTTPObject (); 7 8 function handleHttpResponse (){ 9 if (http. readyState = 4 ){ 10 if (http. status = 200 ){ 11 var xmlDocument = http. responseXML; 12 if (http. responseText! = ""){ 13 document. getElementById ("showStr"). style. display = ""; 14 document. getElementById ("userName"). style. background = "# FF0000 "; 15 document. getElementById ("showStr"). innerText = http. responseText; 16} else { 17 document. getElementById ("userName"). style. background = "# FFFFFF "; 18 document. getElementById ("showStr"). style. display = "none "; 19} 20 21} 22 else { 23 alert ("the page you requested has an exception, which may affect your browsing of this page! "); 24 alert (http. status ); 25} 26} 27} 28 29 function handlehttpresponse1 (){ 30 if (HTTP. readystate = 4 ){ 31 if (HTTP. Status = 200 ){ 32 var xmldocument = http. responsexml; 33 If (HTTP. responsetext! = ""){ 34 Document. getelementbyid ("comnmstr"). style. Display = ""; 35 document. getelementbyid ("comnm"). style. Background = "# ff0000 "; 36 document. getelementbyid ("comnmstr"). innertext = http. responsetext; 37} else { 38 document. getelementbyid ("comnm"). style. Background = "# ffffff "; 39 Document. getelementbyid ("comnmstr"). style. Display = "NONE "; 40} 41 42} 43 else { 44 alert ("the page you requested has an exception, which may affect your browsing of this page! "); 45 alert (HTTP. status ); 46} 47} 48} 49 50 function chkuser (){ 51 var url = "/chkuserandcom "; 52 var name = Document. getelementbyid ("username"). value; 53 URL + = ("& username =" + name + "& oprate = chkuser "); 54 HTTP. Open ("get", URL, true ); 55 HTTP. onreadystatechange = handlehttpresponse; 56 HTTP. Send (null ); 57 return; 58} 59 function chkcomnm (){ 60 var url = "/chkuserandcom "; 61 var name = Document. getelementbyid ("comnm"). value; 62 URL + = ("& comname =" + name + "& oprate = chkcom "); 63 HTTP. Open ("get", URL, true ); 64 HTTP. onreadystatechange = handlehttpresponse1; 65 HTTP. Send (null ); 66 return; 67} 68 69 // This function can create the XMLHTTPRequest object we need 70 function gethttpobject (){ 71 var xmlhttp = false; 72 if (window. XMLHttpRequest ){ 73 xmlhttp = new XMLHttpRequest (); 74 if (xmlhttp. overrideMimeType ){ 75 xmlhttp. overrideMimeType ('text/xml '); 76} 77} 78 else { 79 try { 80 xmlhttp = new ActiveXObject ("Msxml2.XMLHTTP "); 81} catch (e ){ 82 try { 83 xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP "); 84} catch (E ){ 85 xmlhttp = false; 86} 87} 88} 89 return xmlhttp; 90} 91/** // ** end with Ajax */ 92 93 // detection form 94 function chkpassword () 95 { 96 var m = document. form1; 97 if (len (m. password. value)> 20 | len (m. password. value) <5 |! IsStr (m. password. value )) 98 { 99 document. getElementById ("passwordStr"). style. display = ""; 100 document. getElementById ("password"). style. background = "# FF0000 "; 101 document. getElementById ("passwordStr"). innerText = "sorry, the password must be a letter, number, or underline. The password length is 5 ~ 20! "; 102} 103 else 104 { 105 document. getElementById ("password"). style. background = "# FFFFFF "; 106 document. getElementById ("passwordStr"). style. display = "none "; 107} 108} 109 110 function chkconfirmPassword () 111 { 112 var m = document. form1; 113 if (m. password. value! = M. confirmPassword. value) 114 { 115 document. getElementById ("confirmPasswordStr"). style. display = ""; 116 document. getElementById ("confirmPassword"). style. background = "# FF0000 "; 117 document. getElementById ("confirmPasswordStr"). innerText = "sorry, the password is inconsistent with the repeated password! "; 118} 119 else 120 { 121 document. getElementById ("confirmPassword"). style. background = "# FFFFFF "; 122 document. getElementById ("confirmPasswordStr"). style. display = "none "; 123} 124} 125 126 function checkfield () 127 { 128 var m = document. form1; 129 if (m. userName. value. length = 0) 130 { 131 alert ("sorry, the user name must be an English letter, number, or underline. The length is 5 ~ 20. "); 132 m. userName. focus (); 133 return false; 134} 135 if (m. password. value. length = 0) 136 { 137 alert ("sorry, the password must be a letter, number, or underline. The password length is 5 ~ 20. "); 138 m. password. focus (); 139 return false; 140} 141 if (m. password. value! = M. confirmPassword. value) 142 { 143 alert ("sorry, the password is inconsistent with the repeated password! "); 144 m. confirmPassword. focus (); 145 return false; 146} 147 if (m. comNm. value. length = 0) 148 { 149 alert ("sorry, company name cannot be blank !! "); 150 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"> & nbsp; <H2> Ajax demo program </H1> </td> </tr> 162 <tr> <td align = "center"> & nbsp; ------ enterprise registration By Alpha </td> </tr> </Table> 163 164 165 <HR> 166 <table width = "400" border = "0" cellpadding = "1" cellspacing = "1" align = "center"> 167 <tr> 168 <td> <font color = "red"> * </font> </td> 169 <td> User Account: </td> 170 <td> 171 <input type = "text" name = "userName" maxlength = "20" style = "background: # FFFFFF" onBlur = "chkUser ()" value = ""/> 172 <div id = "showStr" style = "background-color: # FF9900; display: none"> </div> 173 </td> 174 </tr> 175 <tr> 176 <td> <font color = "red"> * </font> </td> 177 <td> Company Name: </td> 178 <td> 179 <input type = "text" name = "comNm" maxlength = "100" style = "background: # FFFFFF" onBlur = "chkComNm ()" value = ""/> 180 <div id = "comNmStr" style = "background-color: # FF9900; display: none"> </div> 181 182 </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 = "20" style = "background: # FFFFFF" onBlur = "chkpassword ()"/> 188 <div id = "passwordStr" style = "background-color: # FF9900; display: none"> </div> 189 </td> 190 </tr> 191 <tr> 192 <td> <font color = "red"> * </font> </td> 193 <td> Confirm Password: </td> 194 <td> <input type = "password" name = "confirmPassword" maxlength = "20" style = "background: # FFFFFF" onBlur = "chkconfirmPassword ()"/> 195 <div id = "confirmPasswordStr" style = "background-color: # FF9900; display: none"> </div> 196 </td> 197 </tr> </Table> 198 199 200 <div align = "center"> 201 <input type = "button" name = "OK" value = "OK" onclick = "checkfield ()"> 202 & nbsp; 203 <input type = "reset" name = "reset" value = "Remove"> 204 </div> 205 206 </form> 207 </body> 208

After using JavaScript to create an XMLHttpRequest class to send an HTTP request to the server, you need to decide what to do when the server receives the response. This tells the HTTP request object which JavaScript function is used to process the response. You can set the onreadystatechange attribute of the object to the name of the JavaScript function to be used, as shown below: xmlhttp_request.onreadystatechange = FunctionName;

FunctionName is the name of the function created with JavaScript. Do not write it as FunctionName (). Of course, you can also directly create the JavaScript code after onreadystatechange.