AJAX User Registration application instance _ajax related

If we use AJAX technology to do the above, we don't have to wait for the server to return information. When a user enters a user name or enterprise name, when the input text box loses focus, the request is automatically made to the server, and the user continues to do the following, without having 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, 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:
Program code
<% @page language= "java" contenttype= "TEXT/HTML;CHARSET=GBK"%>
<script language= "javascript" type= "Text/javascript" >
<!--
/**//**ajax Start 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 are requesting is abnormal and may affect the information you are browsing on the 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 are requesting is abnormal and may affect the information you are browsing on the 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;
}
/**//**ajax End *
Detecting forms
function Chkpassword ()
{
var M=document.form1;
if (len (m.password.value) > | | 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 English letter, digit or underline, 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, inconsistent password and duplicate 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, a number, or an underscore, the length is 5~20.") ");
M.username.focus ();
return false;
}
if (m.password.value.length==0)
{
Alert ("Sorry, the password must be an English letter, number or underscore, the length is 5~20.") ");
M.password.focus ();
return false;
}
if (M.password.value!= m.confirmpassword.value)
{
Alert ("Sorry, inconsistent password and duplicate password!");
M.confirmpassword.focus ();
return false;
}
if (m.comnm.value.length==0)
{
Alert ("Sorry, the enterprise name cannot be empty!!") ");
M.comnm.focus ();
return false;
}
M.submit ();
}
-->
</script>
<body topmargin= "0" >
<form name= "Form1" method= "Post" action= "/control?act=register" >
<table width= "100%" >
&LT;TR&GT;&LT;TD align= "Center" > &LT;TR&GT;&LT;TD align= "center" >------Enterprise Registration by alpha</td></tr>
</table>
<HR>
<table width= "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= "style=" background: #FFFFFF "onblur=" Chkuser () "value=" "/>"
<div id= "Showstr" style= "Background-color: #FF9900;d isplay:none" ></div>
</td>
</tr>
<tr>
<td><font color= "Red" >*</font></td>
<td> Enterprise Name:</td>
<td>
<input type= "text" name= "comnm" maxlength= "style=" background: #FFFFFF "onblur=" chkcomnm () "value=" "/>"
<div id= "Comnmstr" style= "Background-color: #FF9900;d isplay:none" ></div>
</td>
</tr>
<tr>
<td><font color= "Red" >*</font></td>
<td> User Password:</td>
<td><input type= "password" name= "password" maxlength= "style=" background: #FFFFFF "onblur=" Chkpassword () "/>
<div id= "Passwordstr" style= "Background-color: #FF9900;d isplay:none" ></div>
</td>
</tr>
<tr>
<td><font color= "Red" >*</font></td>
<td> Confirm Password:</td>
<td><input type= "Password" name= "ConfirmPassword" maxlength= "style=" background: #FFFFFF "onblur=" Chkconfirmpassword () "/>
<div id= "Confirmpasswordstr" style= "Background-color: #FF9900;d isplay:none" ></div>
</td>
</tr>
</table>
<div align= "center" >
<input type= "button" Name= "OK" value= "OK" onclick= "CheckField" () "> <input type=" reset "name=" reset "value=" Cancel ">
</div>
</form>
</body>
After using JavaScript to create a XMLHttpRequest class to send an HTTP request to the server, decide what to do when you receive a response from the server. This tells the HTTP request object which JavaScript function to use to handle the response. You can set the object's onReadyStateChange property to the function name of the JavaScript you want to use, as follows: Xmlhttp_request.onreadystatechange =functionname;
FunctionName is a function name created with JavaScript, be careful not to write functionname (), and of course we can create JavaScript code directly after onreadystatechange.
We call Request.open ()-It opens the socket channel with the server, uses an HTTP verb (GET or post) as the first argument and the URL of the data provider as the second argument. The last parameter of Request.open () is set to true-it indicates the asynchronous nature of the request. Note that the request has not been submitted yet. With the invocation of Request.send (), the commit is initiated-this can provide any necessary payload for post. When using asynchronous requests, we must use the Request.onreadystatechanged property to allocate the requested callback function. (If the request is synchronized, we should be able to process the result immediately after calling Request.send, but we can also block the user until the request is complete.) )
Then look at the data provider's Url,url = "/chkuserandcom", the servlet is as follows:
Program code
/**//*
* Created on 2005-12-31
*
* TODO to change the template of 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---Enterprise registration check enterprise user name and enterprise name </P>
*
* TODO to change the template of 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, username must be letter, number or underline, length is 5-20 characters!";
}
Else
{
Boolean btmp=info.finduser (UserName); Check to see if the username is in the database
if (btmp)
Msgstr = "Sorry, this username already exists, please change user name registration!";
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 length is 6-100 characters (not including the word characters space)!";
}
Else
{
Boolean btmp=info.findcom (Comname); Check the database for the name of the enterprise
if (btmp)
Msgstr = "Sorry, this enterprise name already exists, please change the Enterprise name registration!";
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);
}
}
A summary of Ajax technology
1. AJAX (asynchronous JavaScript and XML) is a combination of Java technology, XML, and JavaScript programming techniques that allow you to build Web applications based on Java technology and break the practice of using page overloading.
2. AJAX, asynchronous JavaScript and XML, is a Web application development method that uses client script to exchange data with a Web server. This way, Web pages can be updated dynamically without interrupting the interactive process. With Ajax, you can create a direct, highly available, richer, more dynamic Web user interface that is close to local desktop applications.
3. For Mozilla.netscape﹑safari, Firefox and other browsers, create XMLHttpRequest methods are as follows:
Xmlhttp_request = new XMLHttpRequest ();
4. IE and other create XMLHttpRequest methods are 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 the Open () is the method of HTTP request-get,post or the way that any server supports that you want to invoke. This argument is capitalized according to the HTTP specification, otherwise some browsers, such as Firefox, may not be able to process the request. The second parameter is the URL of the request page. The third parameter sets whether the request is asynchronous mode. If the True,javascript function continues to execute without waiting for the server to respond. This is "A" in "AJAX".
Ajax technology to use good words, to our web page to add a lot of friendly effect, to give users a better feeling. Ajax is a good thing.