Application Instance when an AJAX user registers

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:
Program code
<% @ Page language = "java" contentType = "text/html; charset = GBK" %>
<Script language = "javascript" type = "text/javascript">
<! --
/** // ** Start with Ajax by Alpha 2005-12-31 */
Var http = getHTTPObject ();
Function handleHttpResponse (){
If (http. readyState = 4 ){
If (http. status = 200 ){
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 ";
}
}
Else {
Alert ("the page you requested has an exception, which may affect your browsing of this page! ");
Alert (http. status );
}
}
}
Function handleHttpResponse1 (){
If (http. readyState = 4 ){
If (http. status = 200 ){
Var xmlDocument = http. responseXML;
If (http. responseText! = ""){
Document. getElementById ("comNmStr"). style. display = "";
Document. getElementById ("comNm"). style. background = "# FF0000 ";
Document. getElementById ("comNmStr"). innerText = http. responseText;
} Else {
Document. getElementById ("comNm"). style. background = "# FFFFFF ";
Document. getElementById ("comNmStr"). style. display = "none ";
}
}
Else {
Alert ("the page you requested has an exception, which may affect your browsing of this page! ");
Alert (http. status );
}
}
}
Function chkUser (){
Var url = "/chkUserAndCom ";
Var name = document. getElementById ("userName"). value;
Url + = ("& userName =" + name + "& oprate = chkUser ");
Http. open ("GET", url, true );
Http. onreadystatechange = handleHttpResponse;
Http. send (null );
Return;
}
Function chkComNm (){
Var url = "/chkUserAndCom ";
Var name = document. getElementById ("comNm"). value;
Url + = ("& comName =" + name + "& oprate = chkCom ");
Http. open ("GET", url, true );
Http. onreadystatechange = handleHttpResponse1;
Http. send (null );
Return;
}
// This function can create the XMLHttpRequest object we need
Function getHTTPObject (){
Var xmlhttp = false;
If (window. XMLHttpRequest ){
Xmlhttp = new XMLHttpRequest ();
If (xmlhttp. overrideMimeType ){
Xmlhttp. overrideMimeType ('text/xml ');
}
}
Else {
Try {
Xmlhttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (E ){
Xmlhttp = false;
}
}
}
Return xmlhttp;
}
/** // ** End with Ajax */
// Detection form
Function chkpassword ()
{
Var m = document. form1;
If (len (m. password. value)> 20 | len (m. password. value) <5 |! IsStr (m. password. value ))
{
Document. getElementById ("passwordStr"). style. display = "";
Document. getElementById ("password"). style. background = "# FF0000 ";
Document. getElementById ("passwordStr"). innerText = "sorry, the password must be an English letter, number, or underline. The length is 5 ~ 20! ";
}
Else
{
Document. getElementById ("password"). style. background = "# FFFFFF ";
Document. getElementById ("passwordStr"). style. display = "none ";
}
}
Function chkconfirmPassword ()
{
Var m = document. form1;
If (m. password. value! = M. confirmPassword. value)
{
Document. getElementById ("confirmPasswordStr"). style. display = "";
Document. getElementById ("confirmPassword"). style. background = "# FF0000 ";
Document. getElementById ("confirmPasswordStr"). innerText = "sorry, the password is inconsistent with the repeated password! ";
}
Else
{
Document. getElementById ("confirmPassword"). style. background = "# FFFFFF ";
Document. getElementById ("confirmPasswordStr"). style. display = "none ";
}
}
Function checkfield ()
{
Var m = document. form1;
If (m. userName. value. length = 0)
{
Alert ("sorry, the username must be an English letter, number, or underline. The username length is 5 ~ 20. ");
M. userName. focus ();
Return false;
}
If (m. password. value. length = 0)
{
Alert ("sorry, the password must be a letter, number, or underline. The password length is 5 ~ 20. ");
M. password. focus ();
Return false;
}
If (m. password. value! = M. confirmPassword. value)
{
Alert ("sorry, the password is inconsistent with the repeated password! ");
M. confirmPassword. focus ();
Return false;
}
If (m. comNm. value. length = 0)
{
Alert ("sorry, company name cannot be blank !! ");
M. comNm. focus ();
Return false;
}
M. submit ();
}
// -->
</Script>
<Body topmargin = "0">
<Form name = "form1" method = "post" action = "/Control? Act = Register ">
& Lt; table width = "100%" & gt;
<Tr> <td align = "center"> <H2> Ajax demo </H1> </td> </tr>
<Tr> <td align = "center"> ------ enterprise registration By Alpha </td> </tr>
</Table>
<HR>
<Table width = "400" border = "0" cellpadding = "1" cellspacing = "1" align = "center">
<Tr>
<Td> <font color = "red"> * </font> </td>
<Td> User Account: </td>
<Td>
<Input type = "text" name = "userName" maxlength = "20" style = "background: # FFFFFF" onBlur = "chkUser ()" value = ""/>
<Div id = "showStr" style = "background-color: # FF9900; display: none"> </div>
</Td>
</Tr>
<Tr>
<Td> <font color = "red"> * </font> </td>
<Td> Company Name: </td>
<Td>
<Input type = "text" name = "comNm" maxlength = "100" style = "background: # FFFFFF" onBlur = "chkComNm ()" value = ""/>
<Div id = "comNmStr" style = "background-color: # FF9900; display: none"> </div>
</Td>
</Tr>
<Tr>
<Td> <font color = "red"> * </font> </td>
<Td> User Password: </td>
<Td> <input type = "password" name = "password" maxlength = "20" style = "background: # FFFFFF" onBlur = "chkpassword ()"/>
<Div id = "passwordStr" style = "background-color: # FF9900; display: none"> </div>
</Td>
</Tr>
<Tr>
<Td> <font color = "red"> * </font> </td>
<Td> Confirm Password: </td>
<Td> <input type = "password" name = "confirmPassword" maxlength = "20" style = "background: # FFFFFF" onBlur = "chkconfirmPassword ()"/>
<Div id = "confirmPasswordStr" style = "background-color: # FF9900; display: none"> </div>
</Td>
</Tr>
</Table>
<Div align = "center">
<Input type = "button" name = "OK" value = "OK" onclick = "checkfield () "> <input type =" reset "name =" reset "value =" Remove ">
</Div>
</Form>
</Body>
</Html>
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:
Program code
/**//*
* Created on 2005-12-31
*
* TODO To change the template for this generated file go
* Window-Preferences-Java-Code Style-Code Templates
*/
Package com. event;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
Import com. beans. EBaseInfo;
/***//**
* @ Author Alpha 2005-12-31
*
* <P> Ajax demo --- check the enterprise user name and enterprise name during enterprise registration </P>
*
* TODO To change the template for this generated type comment go
* Window-Preferences-Java-Code Style-Code Templates
*/
Public class CheckUserAndComNm {
Private String msgStr = "";
Protected void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException
{
EComBaseInfo info = new EComBaseInfo ();
String oprate = request. getParameter ("oprate"). trim ();
String userName = request. getParameter ("userName ");
String passWord = request. getParameter ("password ");
String comName = request. getParameter ("comName ");
Try
{
If (oprate. equals ("chkUser "))
{
Response. setContentType ("text/html; charset = GB2312 ");
If (userName. length () <5 | userName. length ()> 20)
{
MsgStr = "sorry, the username must be a letter, number, or underline. It must be 5-20 characters long! ";
}
Else
{
Boolean bTmp = info. findUser (userName); // check whether the user name is in the database.
If (bTmp)
MsgStr = "sorry, this user name already exists. Please register with another user name! ";
Else
MsgStr = "";
}
Response. getWriter (). write (msgStr );
}
Else if (oprate. equals ("chkCom "))
{
Response. setContentType ("text/html; charset = GB2312 ");
If (comName. length () <6 | comName. length ()> 100)
{
MsgStr = "sorry, the company name is 6-characters long (excluding spaces )! ";
}
Else
{
Boolean bTmp = info. findCom (comName); // check whether the enterprise name is in the database.
If (bTmp)
MsgStr = "sorry, this company name already exists. Please register with another company name! ";
Else
MsgStr = "";
}
Response. getWriter (). write (msgStr );
　　
}
}
Catch (Exception ex)
{
}
Finally
{
Request. setAttribute ("url", url );
}
}
Protected void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException
{
DoGet (request, response );
}
}
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.