Ajax writing User Registration examples and technical summary (1)

Ajax| User Registration

This article describes how to use Ajax to write a user registration instance, give a complete code and a summary of Ajax technology .

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 achieve the above operation is not to wait for the server back information, user input user name or enterprise name, when the input text box loses focus, will automatically send a request to the server , users continue to do the following operation, do not have to click the "check , you do not have to wait for the server to return information, the check is asynchronous with the user operation, and can be done 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, 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

• Ajax: A new way to build Web apps
• Discussion on the error handling mechanism of AJAX (2)
• Discussion on the error handling mechanism of AJAX (1)
• First experience. NET Ajax Brushless New technology
• A brief analysis of Ajax development Technology in Rails system (4)