AJAX即“Asynchronous JavaScript and XML”，意思是異步JavaScript和XML，是指一種創建交互式網頁的網頁開發技術。
雖然現在很少有人去自己手動寫AJAX，大多數都用封裝好的AJAX，但我覺得初學者還是應該從最原始的AJAX開始學習，這樣才能掌握AJAX的核心。現在各種博客上講解AJAX的比較多，但大多數都是只講AJAX的前端部分，或者是只講解一部分功能，並沒有完成的實例。在這篇隨筆里我將通過實例來全面講解AJAX的基礎應用，其中也包括后台代碼實現部分。
實例一：點擊一個按鈕，然后將信息顯示到指定的div內。
1、創建一個JAVA web工程，命名為AjaxTest。在webRoot創建一個HTML頁面，命名為FirstTest.html，FirstTest.html代碼如下：
FirstTest.html
<html>
<head>
<title>FirstTest.html</title>
<script language="javascript">
function onclickAjax(){
}
</script>
</head>
<body>
<input type="button" value="測試" onclick="onclickAjax()">
<div id="testid">
</div>
</body>
</html>
在上面代碼中給input綁定了點擊事件onclickAjax()，這個onclickAjax()方法就是要實現Ajax的JS方法。
2、實現onclickAjax方法
為了方便理解，我給AJAX統一了一個流程，要想實現AJAX，就要按照以后步驟走：
（1）創建XMLHttp對象。（2）設置請求方式。（3）調用回調函數。（4）發送請求。
下面詳細解釋這4個步驟。
（1）創建XMLHttp對象：XMLHttp對象用於在后台與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建XMLHttp對象的語法是:var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6瀏覽器，則使用ActiveX對象，創建方法是：
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
一般我們手寫AJAX的時候，首先要判斷該瀏覽器是否支持XMLHttpRequest對象，如果支持則創建該對象，如果不支持則創建ActiveX對象。JS代碼如下：
View Code
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（2）設置請求方式：在WEB開發中，請求有兩種形式，一個是get 一個是post，所以在這里需要設置一下具體使用哪個請求，XMLHttpRequest對象的open()方法就是來設置請求方式的。
open()：
功能：規定請求的類型、URL 以及是否異步處理請求。
參數：參數1，設置請求類型（GET 或 POST），GET與POST的區別請自己百度一下，這里不做解釋；
參數2，文件在服務器上的位置；
參數3，是否異步處理請求，是為true，否為false。
具體的JS代碼實現如下：
View Code
xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);
在上段代碼中，請求的名字是："test.do?method=ajaxTest&&msg="+new Date()，后面有個new Date()，這里主要是防止緩存問題，如果是不段的更新頁面內容，那么很可能就會出現點擊按鈕后內容頁不改變，因為如果沒有后面的msg=new Date()那么我們每一次發送的請求都是一樣的，這樣很可能就導致了緩存問題。所以需要在請求后面加上msg=new Date()，這樣保障了每次的請求都不一樣，避免緩存問題。
（3）回調函數：
如果在上一步中open方法的第三個參數選擇的是true，那么當前就是異步請求，這個時候需要寫一個回調函數，xmlHttp對象有一個onreadystatechange屬性，這個屬性返回的是一個匿名的方法，所以回調函數就在這里寫xmlHttp.onreadystatechange=function{},function{}內部就是回調函數的內容。所謂回調函數，就是請求在后台處理完，再返回到前台所實現的功能。在這個例子里，我們的回調函數要實現的功能就是接收后台處理后反饋給前台的數據，然后將這個數據顯示到指定的div上。因為從后台返回的數據可能是錯誤的，所以在回調函數中首先要判斷后台返回的信息是否正確，如果正確才可以繼續執行。代碼如下：
View Code
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("testid").value=xmlHttp.responseText;//將信息顯示到頁面
}else{
alert("AJAX服務器返回錯誤！");
}
}
在上面代碼中，xmlHttp.readyState是存有XMLHttpRequest 的狀態。從 0 到 4 發生變化。0: 請求未初始化。1: 服務器連接已建立。2: 請求已接收。3: 請求處理中。4: 請求已完成，且響應已就緒。所以這里我們判斷只有當xmlHttp.readyState為4的時候才可以繼續執行。
xmlHttp.status是服務器返回的結果，其中200代表正確。404代表未找到頁面，所以這里我們判斷只有當xmlHttp.status等於200的時候才可以繼續執行。
document.getElementById("testid").value=xmlHttp.responseText;這段代碼就是回調函數的核心內容，就是獲取后台返回的數據，然后將這個數據賦值給id為testid的div。xmlHttp對象有兩個屬性都可以獲取后台返回的數據，分別是：responseText和responseXML，其中responseText是用來獲得字符串形式的響應數據，responseXML是用來獲得 XML 形式的響應數據。至於選擇哪一個是取決於后台給返回的數據的，這個例子里我們只是顯示一條字符串數據所以選擇的是responseText。responseXML將會在以后的例子中介紹。
（4）發送請求：發送請求是調用xmlHttp對象的send()方法。代碼如下：
View Code
xmlHttp.send();
綜合以上講解，整個FirstTest.html頁面的代碼如下：
FirstTest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FirstTest.html</title>
<script language="javascript">
function onclickAjax(){
var xmlHttp;
//分瀏覽器創建XMLHttp對象
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
//設置請求類型
xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);
//回調函數
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("testid").value=xmlHttp.responseText;
}else{
alert("AJAX服務器返回錯誤！");
}
}
}
//發送請求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="測試" onclick="onclickAjax()">
<div id="testid">
</div>
</body>
</html>
3、后台部分
這個例子的后台部分使用JAVA來寫，主要應用了struts1框架。
（1）struts-config文件：
View Code
<struts-config>
<form-beans />
<action-mappings>
<action path="/test" type="com.test.controller.AjaxController" parameter="method" scope="request">
</action>
</action-mappings>
<message-resources parameter="com.test.controller.ApplicationResources" />
</struts-config>
（2）在包com.test.controller包下創建類AjaxController，並繼承DispatchAction，重寫execute方法並將該方法命名為ajaxTest。該方法代碼如下：
ajaxTest
public ActionForward ajaxTest(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String msg="第一個AJAX小程序";
response.getWriter().write(msg);
return null;
}
至此后台代碼完成。