Use ajax to compile Application Instances for user registration

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:

The following is a reference clip: 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 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.

We call request. open ()-It uses the server to open the socket channel, uses an HTTP verb (get or post) as the first parameter, and uses the URL of the data provider as the second parameter. The last parameter of request. open () is set to true-it indicates the asynchronous feature of the request. Note that the request has not been submitted. With the call to request. Send (), start to submit-this can provide post with any necessary payload. When using asynchronous requests, we must use the request. onreadystatechanged attribute to allocate the request callback function. (If the request is synchronous, we should be able to process the result immediately after request. Send is called, but we may also block the user until the request is completed .)

Let's look at the URL of the data provider, url = "/chkuserandcom". The servlet is as follows:

The following is a reference clip: 1 /**//* 2 * created on 2005-12-31 3 * 4 * todo to change the template for this generated file go 5 * window-preferences-Java-code style-code templates 6 */ 7 Package com. event; 8 9 Import javax. servlet. servletexception; 10 Import javax. servlet. http. httpservletrequest; 11 import javax. servlet. http. httpservletresponse; 12 13 Import com. Beans. ebaseinfo; 14 15 /***//** 16 * @ author Alpha 2005-12-31 17 * 18 * <p> Ajax demo --- check the enterprise user name and enterprise name during enterprise registration </P> 19 * 20 * todo to change the template for this generated type comment go 21 * window-preferences-Java-code style-code templates 22 */ 23 public class checkuserandcomnm { 24 private string msgstr = ""; 25 protected void doget (httpservletrequest request, httpservletresponse response) 26 throws servletexception 27 { 28 29 ecombaseinfo info = new ecombaseinfo (); 30 string oprate = request. getparameter ("oprate"). Trim (); 31 string username = request. getparameter ("username "); 32 string Password = request. getparameter ("password "); 33 string comname = request. getparameter ("comname "); 34 35 try 36 { 37 If (oprate. Equals ("chkuser ")) 38 { 39 response. setcontenttype ("text/html; charset = gb2312 "); 40 if (username. Length () <5 | username. Length ()> 20) 41 { 42 msgstr = "sorry, the username must be a letter, number, or underline. It must be 5-20 characters long! "; 43} 44 else 45 { 46 Boolean btmp = info. finduser (username); // check whether the user name is in the database. 47 If (btmp) 48 msgstr = "sorry, this user name already exists. Please register with another user name! "; 49 else 50 msgstr = ""; 51} 52 response. getwriter (). Write (msgstr ); 53} 54 else if (oprate. Equals ("chkcom ")) 55 { 56 response. setcontenttype ("text/html; charset = gb2312 "); 57 if (comname. Length () <6 | comname. Length ()> 100) 58 { 59 msgstr = "sorry, the company name is 6-characters long (excluding spaces )! "; 60} 61 else 62 { 63 Boolean btmp = info. findcom (comname); // check whether the enterprise name is in the database. 64 if (btmp) 65 msgstr = "sorry, this company name already exists. Please register with another company name! "; 66 else 67 msgstr = ""; 68} 69 response. getwriter (). Write (msgstr ); 70 71} 72} 73 catch (exception ex) 74 { 75} 76 finally 77 { 78 request. setattribute ("url", URL ); 79} 80} 81 82 protected void dopost (httpservletrequest request, httpservletresponse response) 83 throws servletexception 84 { 85 doget (request, response ); 86} 87} 88

Ajax technology Summary

 

1. ajax (Asynchronous JavaScript and XML) is a programming technology that integrates Java, XML, and Javascript. It allows you to build Web applications based on Java technology, and broke the Convention of using page overloading.

2. Ajax, Asynchronous JavaScript, and XML are web application development methods for exchanging data with Web servers using client scripts. In this way, the web page can be dynamically updated without interrupting the interaction process and cutting it again. With Ajax, you can create direct, highly available, richer, and more dynamic Web user interfaces that are close to local desktop applications.

3. for Mozilla. Netscape, Safari, Firefox, and other browsers, create XMLHttpRequest as follows:

Xmlhttp_request = new XMLHttpRequest ();

4. The method for creating XMLHttpRequest, such as IE, is as follows:

XMLHTTP = new activexobject ("msxml2.xmlhttp") or XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");

5. xmlhttp_request.open ('get', URL, true); xmlhttp_request.send (null );

6. The first parameter of open () is the HTTP Request Method-Get, post, or the method that you want to call supported by any server. According to HTTP specifications, this parameter must be capitalized; otherwise, Some browsers (such as Firefox) may not be able to process requests. The second parameter is the URL of the Request page. The third parameter sets whether the request is in asynchronous mode. If it is true, the JavaScript function will continue to be executed without waiting for the server to respond. This is "A" in "ajax ".

If Ajax technology is used well, it adds many friendly effects to our webpage and gives users a better feeling. Ajax is a good thing.