AJAX examples of the preparation of user registration and technical summary (1)
I cite this example is a company registered users when an application, when the user registration check user name and corporate name is available in the past, the practice is next to add a button, click the "check", issued on request to the server, and then waiting for the server to return to…… information, to continue to operate.
If we use Ajax technology to achieve more operators would not have to wait for the server to return to information, users enter your user name or business name, when input text box lost focus, will be automatically sent requests to the server, users continue to do the following operations , not click the "check", there is no need to wait for the server to return information, check with the user operation is asynchronous and can be at the same time. Back when the server when the page will be automatically in the corresponding location of the return information, not refresh pages, equivalent to the effect of partial refresh. Below we look at the code bar.
HTML pages complete code as follows:
1 <% @ page language = "java" contentType = "text / html; GBK charset ="%>
2 <script language="javascript" type="text/javascript">
3 <! –
4 /**//** Ajax started by Alpha 2005-12-31 * /
5
6 var http = getHTTPObject ();
7
8 function handleHttpResponse () (
9 if (http.readyState == 4) (
10 if (http.status == 200) (
Http.responseXML var xmlDocument = 11;
12 if (http.responseText !=""){
13 document.getElementById ( "showStr"). Style.display = "";
14 document.getElementById ( "userName"). Style.background = "# FF0000";
15 document.getElementById ( "showStr"). InnerText = http.responseText;
Else (16)
17 document.getElementById ( "userName"). Style.background = "# FFFFFF";
18 document.getElementById ( "showStr"). Style.display = "none";
19)
20
21)
Else (22
23 alert ( "You are requested page abnormalities, and may affect the information you visit the page!");
24 alert (http.status);
25)
26)
27)
28
29 function handleHttpResponse1 () (
30 if (http.readyState == 4) (
31 if (http.status == 200) (
Http.responseXML var xmlDocument = 32;
33 if (http.responseText !=""){
34 document.getElementById ( "comNmStr"). Style.display = "";
35 document.getElementById ( "comNm"). Style.background = "# FF0000";
36 document.getElementById ( "comNmStr"). InnerText = http.responseText;
Else (37)
38 document.getElementById ( "comNm"). Style.background = "# FFFFFF";
39 document.getElementById ( "comNmStr"). Style.display = "none";
40)
41
42)
Else (43
44 alert ( "You are requested page abnormalities, and may affect the information you visit the page!");
45 alert (http.status);
46)
47)
48)
49
50 function chkUser () (
51 var url = "/ chkUserAndCom";
52 var name = document.getElementById ( "userName"). Value;
Url + = 53 ( "& userName =" + name + "= & oprate chkUser");
54 http.open ( "GET", url, true);
HandleHttpResponse http.onreadystatechange = 55;
56 http.send (null);
57 return;
58)
59 function chkComNm () (
60 var url = "/ chkUserAndCom";
61 var name = document.getElementById ( "comNm"). Value;
Url + = 62 ( "& comName =" + name + "= & oprate chkCom");
63 http.open ( "GET", url, true);
HandleHttpResponse1 http.onreadystatechange = 64;
65 http.send (null);
66 return;
67)
68
69 / / This function can create what we need XMLHttpRequest object
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)
Else (78
Try (79
80 xmlhttp = new ActiveXObject ( "Msxml2.XMLHTTP");
81) catch (e) (
Try (82
83 xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");
84) catch (E) (
85 xmlhttp = false;
86)
87)
88)
89 return xmlhttp;
90)
Ajax ended 91 /**//** * /
92
93 / / Detection form
94function chkpassword ()
95 (
Document.form1 var m = 96;
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, passwords must be in English letters, numbers or underscore, a length of 5 to 20!";
102)
103 else
104 (
105 document.getElementById ( "password"). Style.background = "# FFFFFF";
106 document.getElementById ( "passwordStr"). Style.display = "none";
107)
108)
109
110function chkconfirmPassword ()
111 (
Document.form1 var m = 112;
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, password and password repeated inconsistencies!";
118)
119 else
120 (
121 document.getElementById ( "confirmPassword"). Style.background = "# FFFFFF";
122 document.getElementById ( "confirmPasswordStr"). Style.display = "none";
123)
124)
125
126function checkfield ()
127 (
Document.form1 var m = 128;
129 if (m.userName.value.length == 0)
130 (
131 alert ( "Sorry, the user name must be in English letters, numbers or underscore, a length of 5 to 20.");
132 m.userName.focus ();
133 return false;
134)
135 if (m.password.value.length == 0)
136 (
137 alert ( "Sorry, passwords must be in English letters, numbers or underscore, a length of 5 to 20.");
138 m.password.focus ();
139 return false;
140)
141 if (m.password.value! = M.confirmPassword.value)
142 (
143 alert ( "Sorry, password and password repeated inconsistencies!");
144 m.confirmPassword.focus ();
145 return false;
146)
147 if (m.comNm.value.length == 0)
148 (
149 alert ( "Sorry, names can not be empty !!");
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"> <H2> Ajax demo </ H1> </ td> </ tr>
162 <tr> <td align="center"> —— registered By Alpha </ td> </ tr>
163 </ table>
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 ID: </ 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>
198 </ table>
199
200 <div align="center">
201 <input type="button" name="ok" value="确定" onclick="checkfield()">
202
203 <input type="reset" name="reset" value="å–消">
204 </ div>
205
206 </ form>
207 </ body>
208 </ html>
JavaScript used to create XMLHttpRequest sent to the server of an HTTP request, the next to decide when the server received the response, what needs to be done. This need to tell the HTTP request object with which a JavaScript function dealing with this response. Onreadystatechange object can be set to attribute to the use of JavaScript function names, as follows: xmlhttp_request.onreadystatechange = FunctionName;
FunctionName JavaScript is used to create a function name, careful not written FunctionName (), of course, we can also directly create JavaScript code in onreadystatechange after.
We call request.open () - It used to open socket server channels, using a verb HTTP (GET or POST) as a parameter and data providers to the URL as the second parameter. Request.open () The last parameter is set to true-it instructions of the asynchronous requests. Note that the request had not yet been submitted. As the request.send () call and began to - this can provide any necessary POST payloads. In the use of asynchronous requests, we must use request.onreadystatechanged attributes allocation request callback function. (If the request is synchronized, we should be able to call request.send immediately after the results, but it may be possible to block users until the completion of the request.)
