AJAX编写用户注册实例及技术小结
来源：网络 更新时间：2014-12-2
我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。
下面我们来看代码吧。
HTML页面的完整代码如下：
1＜%@pagelanguage="Java"contentType="text/html;charset=GBK"%＞
2＜scriptlanguage="JavaScript"type="text/javascript"＞
3＜!--
4/**//**Ajax开始byAlpha2005-12-31*/
5
6varhttp=getHTTPObject();
7
8functionhandleHttpResponse(){
9 if(http.readyState==4){
10 if(http.status==200){
11 varXMLDocument=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("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
24 alert(http.status);
25 }
26 }
27}
28
29functionhandleHttpResponse1(){
30 if(http.readyState==4){
31 if(http.status==200){
32 varxmlDocument=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("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
45 alert(http.status);
46 }
47 }
48}
49
50functionchkUser(){
51 varurl="/chkUserAndCom";
52 varname=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}
59functionchkComNm(){
60 varurl="/chkUserAndCom";
61 varname=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//该函数可以创建我们需要的XMLHttpRequest对象
70functiongetHTTPObject(){
71 varxmlhttp=false;
72 if(window.XMLHttpRequest){
73 xmlhttp=newXMLHttpRequest();
