AJAX即“Asynchronous JavaScript and XML”，意思是異步JavaScript和XML，是指一種創建交互式網頁的網頁開發技術。
雖然現在很少有人去自己手動寫AJAX，大多數都用封裝好的AJAX，但我覺得初學者還是應該從最原始的AJAX開始學習，這樣才能掌握AJAX的核心。現在各種博客上講解AJAX的比較多，但大多數都是隻講AJAX的前端部分，或者是隻講解一部分功能，並沒有完成的實例。在這篇隨筆裏我將通過實例來全面講解AJAX的基礎應用，其中也包括後臺代碼實現部分。
實例一：點擊一個按鈕，然後將信息顯示到指定的div內。
1、創建一個php工程，命名爲AjaxTest。在webRoot創建一個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代碼如下：
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代碼實現如下：
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上。因爲從後臺返回的數據可能是錯誤的，所以在回調函數中首先要判斷後臺返回的信息是否正確，如果正確纔可以繼續執行。代碼如下：
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()方法。代碼如下：
xmlHttp.send();
綜合以上講解，整個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>