这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务

＜%@page language="java" contentType="text/html;charset=GBK"%＞
     ＜script language="javascript" type="text/javascript"＞
           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("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
                    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("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
          　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 ;
 }
//该函数可以创建我们需要的XMLHttpRequest对象
 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 结束*/
//检测表单
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 = "对不起,密码必须为英文字母、数字或下划线，长度为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 = "对不起,密码与重复密码不一致!";
        } 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("对不起,用户名必须为英文字母、数字或下划线，长度为5~20。");
               m.userName.focus();
          　 return false;
 }
         if(m.password.value.length==0) {
          　 alert("对不起,密码必须为英文字母、数字或下划线，长度为5~20。");
          　 m.password.focus();
          　 return false;
         }
      if (m.password.value != m.confirmPassword.value){
     　 alert("对不起,密码与重复密码不一致!");
     　 m.confirmPassword.focus();
     　 return false;
      } 
    if(m.comNm.value.length==0){
       alert("对不起,企业名称不能为空！！");
  　 m.comNm.focus();
 　 return false; 
    }
     m.submit();
}
＜/script＞

＜body topmargin="0"＞
＜form name="form1" method="post" action="/Control?act=Register"＞
＜table width="100%"＞
 ＜tr＞＜td align="center"＞ ＜H2＞Ajax 演示程序＜/H1＞＜/td＞＜/tr＞
 ＜tr＞＜td align="center"＞    ------ 企业注册 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＞用户帐号:＜/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＞企业名称:＜/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＞用户密码:＜/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＞ 器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。

AJAX技术小结

1. Ajax（Asynchronous JavaScript and XML）是一个结合了Java技术、XML、以及JavaScript的编程技术，可以让你构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

2. Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，你可以创建接近本地桌面应用的，直接的、高可用的、更丰富的、更动态的Web用户接口界面。

3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器，创建XMLHttpRequest 方法如下：

xmlhttp_request = new XMLHttpRequest();

4. IE等创建XMLHttpRequest 方法如下：

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")　或　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

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

6. open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写;否则，某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

Ajax技术运用的好的话，给我们的网页增添了许多友好的效果，给用户还来更好的感觉。Ajax是个好东西。