AJAX的基本概念
是構建網頁的一種綜合使用JavaScript和XML的技術。
其實質是HTML網頁的異步傳輸技術：
表現形式：在等待網頁的傳輸過程中，用戶依然可以和系統進行交互。
好處：頁面不用刷新就可以更新內容。
典型的流程：
1. 客戶端出發異步操作
2. 創建新的XMLHttpRequest對象。
3. 與Server進行連接
4. 服務器端進行連接處理
5. 返回包含處理結果的XML文檔
6. XMLHttpRequest對象接收處理結果並分析
7. 更新頁面
XMLHttpRequest對象：
是一個瀏覽器內置的對象，通過它提起對服務器端的請求，可以通過javascript提起請求，如果要提起多個請求，就需要多個XHR對象。
這個請求在提起的時候，不會刷新頁面，在後臺運行。
請求的結果被預先定義好的方法（javacript）來處理。
例子程序：
對用戶名進行檢查：
1.客戶端的觸發
<tr>
<td class="altbg1"width="21%">用戶名:</td>
<td class="altbg2"><inputid="userid"name="username"size="25"maxlength="25"type="text"onblur="validate()">
<spanid="usermsg"></span>
</tr>
要注意，使用的是onblur事件，onblur 事件會在對象失去焦點時發生。
οnblur="validate()" 是在對象失去焦點時發生的事件。
varreq;//定義全局變量
functionvalidate() {
var idField =document.getElementById("userid"); //獲取當前需要傳遞的頁面元素
varurl = "Validate.jsp?id="+ escape(idField.value); //通過validate頁面來相應請求，id就是傳遞的值。escape是個特殊函數，可以把傳遞的值，轉換成爲url的特殊編碼。比如空格可以轉成%20
不同的瀏覽器，使用不同的方式來創建並初始化XHRequest對象。
if(window.XMLHttpRequest){ //netscope瀏覽器
req =new XMLHttpRequest();
} else if(window.ActiveXObject) { //
req =new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器
}
//打開這個對象，本例當中，使用get方式來打開，給定的網址：url，true的意思是使用異步模式。第一個參數，可以是get，post，put，delete，第二個參數，是需要送到的地址。第三個就是看，是否是異步模式。true爲異步模式，false爲同步模式。
req.open("GET", url,true);
//readyState是XHR的狀態。
0爲uninitialized未初始化，
1爲loading請求還沒有發到客戶端，只是建立的連接，
2爲loaded，請求已經發送到客戶端，並得到了http頭部信息。
3爲interactive，服務器提交的內容正在取得之中，
4爲completed。已經取完了，服務器處理完畢。onreadystatechange，就是說當狀態變化的時候，就調用callback方法。
//callback爲調用的方法。注意callback不要帶括號。
req.onreadystatechange = callback;
//通過send把請求提交到服務器端
req.send(null);
}
下面我們來寫callback方法：
functioncallback() {
if(req.readyState == 4){ //真正的完成
if(req.status == 200){ //sever的正確反饋
//alert(req.responseText);//彈窗方式。
//反饋回來的是一個xml，如下代碼解析xml。把xml文檔當成一個對象傳遞過來，從對象當中，以TagName來取得相應的元素
varmsg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg);//msg本身是一個object。
//調用另外一個function，setMsg（）
setMsg(msg.childNodes[0].nodeValue);
}
}
}
下面我們來寫setMsg（）；
functionsetMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg =="invalid") {
mdiv.innerHTML ="<font color='red'>usernameexists</font>";
} else {
mdiv.innerHTML ="<font color='green'>congratulations! you canuse this username!</font>";
}
}
Server處理方式：
Server處理請求的方式不變， 輸出什麼都沒關係，都可以直接輸出語句。
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store"); //HTTP1.1 阻止瀏覽器進行緩衝
response.setHeader("Pragma","no-cache"); //HTTP1.0 阻止瀏覽器進行緩衝
response.setDateHeader("Expires", 0);//prevents catching at proxy server 阻止瀏覽器進行緩衝
System.out.println(request.getParameter("id"));
//check the database
response.getWriter().write("<msg>valid</msg>");
%>
