1.       Ajax（Asynchronous JavaScript and XML）是一個結(jié)合了Java技術(shù)、XML、以及JavaScript的編程技術(shù)，可以讓你構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁面重載的慣例。

2.       Ajax，異步JavaScript與XML，是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態(tài)地更新。使用Ajax，你可以創(chuàng)建接近本地桌面應(yīng)用的，直接的、高可用的、更豐富的、更動態(tài)的Web用戶接口界面。

3.       對于Mozilla﹑Netscape﹑Safari、Firefox等瀏覽器，創(chuàng)建XMLHttpRequest 方法如下:

xmlhttp_request = new XMLHttpRequest();

4.       ＩＥ等創(chuàng)建XMLHttpRequest 方法如下：

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")　

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

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

6.       open()的第一個參數(shù)是HTTP請求方式—GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。 按照HTTP規(guī)范，該參數(shù)要大寫;否則，某些瀏覽器(如Firefox)可能無法處理請求。第二個參數(shù)是請求頁面的URL。第三個參數(shù)設(shè)置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。

接下來我主要想用實例來說話，下面這個例子是一個企業(yè)用戶注冊時的一個應(yīng)用，當用戶注冊時檢查用戶名和企業(yè)名是否可用，以前的做法是在旁邊加一個按鈕，點擊“檢查”，就向服務(wù)器發(fā)出請求，然后等待……服務(wù)器返回信息，繼續(xù)操作。如果我們用Ajax技術(shù)來實現(xiàn)以上的操作則不必等待服務(wù)器返回信息，用戶輸入用戶名或企業(yè)名稱的時候，當輸入文本框失去焦點的時候，則會自動向服務(wù)器發(fā)出請求，用戶繼續(xù)做下面的操作，不必點擊“檢查”，也不必等待服務(wù)器返回信息，檢查與用戶操作是異步的，可同時進行。當服務(wù)器信息返回的時候，會自動在面頁相應(yīng)位置顯示返回信息，不必刷新頁面，相當于局部刷新的效果。

下面我們來看代碼吧。

HTML頁面的完整代碼如下：

  1<%@page language="java" contentType="text/html;charset=GBK"%>
  2<script language="javascript" type="text/javascript">
  3<!--
  4/**//**Ajax 開始 by Alpha 2005-12-31*/
  5
  6 var http = getHTTPObject();
  7
  8 function handleHttpResponse(){
  9  if(http.readyState == 4){
 10   if(http.status == 200){
 11    var xmlDocument = 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("你所請求的頁面發(fā)生異常，可能會影響你瀏覽該頁的信息！");
 24    alert(http.status);
 25   }
 26  }
 27 }
 28
 29 function handleHttpResponse1(){
 30  if(http.readyState == 4){
 31   if(http.status == 200){
 32    var xmlDocument = 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("你所請求的頁面發(fā)生異常，可能會影響你瀏覽該頁的信息！");
 45    alert(http.status);
 46   }
 47  }
 48 }
 49
 50 function chkUser(){
 51      var url = "/chkUserAndCom";
 52      var name = 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 }
 59 function chkComNm(){
 60      var url = "/chkUserAndCom";
 61      var name = 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 //該函數(shù)可以創(chuàng)建我們需要的XMLHttpRequest對象
 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  }
 78  else{
 79   try{
 80    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 81   }catch(e){
 82    try{
 83     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 84    }catch(E){
 85     xmlhttp = false;
 86    }
 87   }
 88  }
 89  return xmlhttp;
 90 }
 91/**//**Ajax 結(jié)束*/
 92
 93//檢測表單
 94function chkpassword()
 95{
 96    var m=document.form1;
 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 = "對不起,密碼必須為英文字母、數(shù)字或下劃線，長度為5~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{
112    var m=document.form1;
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 = "對不起,密碼與重復(fù)密碼不一致!";
118    }
119    else
120    {
121        document.getElementById("confirmPassword").style.background= "#FFFFFF";
122        document.getElementById("confirmPasswordStr").style.display = "none";
123    }
124}
125
126function checkfield()
127{
128    var m=document.form1;    
129    if(m.userName.value.length==0)
130    {
131        alert("對不起,用戶名必須為英文字母、數(shù)字或下劃線，長度為5~20。");
132        m.userName.focus();
133        return false;
134    }
135    if(m.password.value.length==0)
136    {
137        alert("對不起,密碼必須為英文字母、數(shù)字或下劃線，長度為5~20。");
138        m.password.focus();
139        return false;
140    }
141    if (m.password.value != m.confirmPassword.value)
142    {
143        alert("對不起,密碼與重復(fù)密碼不一致!");
144        m.confirmPassword.focus();
145        return false;
146    }    
147    if(m.comNm.value.length==0)
148    {
149        alert("對不起,企業(yè)名稱不能為空??！");
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">&nbsp;<H2>Ajax 演示程序</H1></td></tr>
162  <tr><td align="center">&nbsp;&nbsp;&nbsp;&nbsp;------ 企業(yè)注冊  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>用戶帳號:</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>企業(yè)名稱:</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>用戶密碼:</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>確認密碼:</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        &nbsp;    
203        <input type="reset" name="reset" value=" 取 消 ">
204    </div>
205
206</form>
207</body>
208</html>

用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個HTTP請求后，接下來要決定當收到服務(wù)器的響應(yīng)后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應(yīng)?？梢詫ο蟮?/SPAN>onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名，如下所示:xmlhttp_request.onreadystatechange =FunctionName;

　　FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后。
　　我們調(diào)用request.open()-它用服務(wù)器打開套接字頻道，使用一個HTTP動詞(GET或POST)作為第一個參數(shù)并且以數(shù)據(jù)提供者的URL作為第二個參數(shù)。request.open()的最后一個參數(shù)被設(shè)置為true-它指示該請求的異步特性。注意，該請求還沒有被提交。隨著對request.send()的調(diào)用，開始提交-這可以為POST提供任何必要的有效載荷。在使用異步請求時，我們必須使用request.onreadystatechanged屬性來分配請求的回調(diào)函數(shù)。(如果請求是同步的話，我們應(yīng)該能夠在調(diào)用request.send之后立即處理結(jié)果，但是我們也有可能阻斷用戶，直到該請求完成為止。)
　　我看再看看數(shù)據(jù)提供者的URL，url = "/chkUserAndCom"，servlet如下：

 1/**//*
 2 * Created on 2005-12-31
 3 *
 4 * TODO To change the template for this generated file go to
 5 * Window - Preferences - Java - Code Style - Code Templates
 6 */
 7package com.event;
 8
 9import javax.servlet.ServletException;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.beans.EBaseInfo;
14
15/** *//**
16 * @author Alpha   2005-12-31
17 * 
18 * <P>Ajax 演示---企業(yè)注冊時檢查企業(yè)用戶名和企業(yè)名稱</P>
19 *
20 * TODO To change the template for this generated type comment go to
21 * Window - Preferences - Java - Code Style - Code Templates
22 */
23public class CheckUserAndComNm {
24    private String msgStr = "";
25    protected void doGet(HttpServletRequest request,HttpServletResponse response) 
26    throws ServletException 
27    {        
28
29        EComBaseInfo info=new EComBaseInfo();
30        String oprate=request.getParameter("oprate")).trim();   
31        String userName=request.getParameter("userName");
32        String passWord=request.getParameter("password");
33        String comName=request.getParameter("comName");
34     
35        try
36        {
37            if(oprate.equals("chkUser"))
38            {
39                response.setContentType("text/html;charset=GB2312");
40                if(userName.length()<5||userName.length()>20)
41                {
42                    msgStr = "對不起,用戶名必須為字母、數(shù)字或下劃線，長度為5-20個字符!";
43                }
44                else
45                {
46                    boolean bTmp=info.findUser(userName);  //找查數(shù)據(jù)庫中有無該用戶名
47                    if(bTmp)           
48                        msgStr ="對不起,此用戶名已經(jīng)存在,請更換用戶名注冊!";
49                    else
50                        msgStr ="";
51                }
52                response.getWriter().write(msgStr);
53            }
54            else if(oprate.equals("chkCom"))
55            {
56                response.setContentType("text/html;charset=GB2312");
57                if(comName.length()<6||comName.length()>100)
58                {
59                    msgStr = "對不起,公司名稱長度為6-100個字符(不包括字符內(nèi)的空格)!";
60                }
61                else
62                {
63                    boolean bTmp=info.findCom(comName);  //找查數(shù)據(jù)庫中有無該企業(yè)名
64                    if(bTmp)           
65                        msgStr ="對不起,此企業(yè)名稱已經(jīng)存在,請更換企業(yè)名稱注冊!";
66                    else
67                        msgStr ="";
68                }
69                response.getWriter().write(msgStr);
70 
71            }
72        }
73        catch(Exception ex)
74        {
75        }
76        finally
77        {
78            request.setAttribute("url",url);
79        }
80    }
81
82    protected void doPost(HttpServletRequest request,HttpServletResponse response) 
83    throws ServletException 
84    {
85        doGet(request,response);
86    }
87}
88