Ajax技術的好處我想我們已經不需要再過多陳述了，ajax技術現在已經被廣泛運用在web應用中，比如google地圖，省市級聯等等
AJAX = Asynchronous JavaScript and XML.
AJAX 是一種創建快速動態網頁的技術。
AJAX 通過在后台與服務器交換少量數據的方式，允許網頁進行異步更新。這意味着有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。
廢話不多說，現在先用純javascript來實現一下ajax技術
首先是jsp頁面：
<html> <head> <script type="text/javascript"> var xmlHttpRequest = null; function ajaxRequest() { if(window.ActiveXObject) // IE瀏覽器 { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) // 除IE以外的其他瀏覽器 { xmlHttpRequest = new XMLHttpRequest(); } if(null != xmlHttpRequest) { var v1 = document.getElementById("value1").value; var v2 = document.getElementById("value2").value; // 准備向服務器發出一個請求 /* * GET方式向服務器發出一個請求 * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true); */ /* * POST方式向服務器發出一個請求 */ xmlHttpRequest.open("POST", "AjaxServlet", true); // 當發生狀態變化時就調用這個回調函數 xmlHttpRequest.onreadystatechange = ajaxCallBack; // 使用post提交時必須加上下面這行代碼 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 向服務器發出一個請求 xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2); } } function ajaxCallBack() { if(xmlHttpRequest.readyState == 4) { if(xmlHttpRequest.status == 200) { var content = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML = content; } } } </script> </head> <body> <input type="button" value="get content from serve" onclick="ajaxRequest()"/><br> <input type="text" id="value1"/><br> <input type="text" id="value2"/> <div id="div1"></div> </body> </html>
服務端的servlet非常簡單，就是響應給客戶端一段文本內容。
ajax技術的核心就是xmlHttpRequest，對於IE來說，因為其內核與其他瀏覽器不一樣(Firefox, Chrome)，所以首先要判斷一下使用的瀏覽器是否是IE
if(window.ActiveXObject) // IE瀏覽器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) // 除IE以外的其他瀏覽器
{
xmlHttpRequest = new XMLHttpRequest();
}
這樣得到xmlHttpRequest以后，接下來的操作在上面代碼里都有體現，流程無非就是像servlet發送請求，然后根據響應狀態的轉變調用回調函數，最后得到服務器端響應回來的數據，響應過來的既可以是xml文本，還可以是json數據或者是普通文本，