ajax能做到無刷新數據交互，給用戶體驗帶來好處的同時也減小了服務器的壓力，所以運用ajax能使網站性能更強勁、更吸引用戶。
大型網站少不了注冊頁面，而大多數情況下我們不想讓用戶有相同的注冊ID，所以在用戶注冊成功之前必須進行用戶名的檢測。ajax還未出現之前，驗證方法基本上是待用戶填完所有選項之后提交到后台，如果已經有相同ID，則返回提示信息給用戶，這樣的話表單submit之后頁面后刷新，而用戶填的其他信息頁就白費了，還得重新填一遍。
ajax完美的解決了這個問題，用戶填完用戶名馬上檢測是否已被注冊。下面截取幾個網站的用戶名檢測：
淘寶網：
百度：
微博：
這樣是不是很酷？
首先，ajax並不是什么神秘的東西，我認為它就是一個特殊的JavaScript對象，有着自己的方法和接口。原理框圖如下：
第一步：ajax引擎對象的創建（相對簡單的創建方法，更嚴格的方式請參考W3C）：
//創建Ajax引擎對象
function getXmlHttpRequest(){
var xmlHttpRequest= "";
if(window.XMLHttpRequest){ // 火狐
xmlHttpRequest = new XMLHttpRequest();
}
else{ // IE
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttpRequest;
}
函數getXmlHttpRequest()返回一個ajax對象，所以使用的時候可以直接賦值：
var myAjaxObject=null; myAjaxObject = getXmlHttpRequest();
第二步：創建請求機制：（建立與服務器端的通信接口）
ajax請求方式有兩種：get和post，下面分別介紹如何建立連接以及它們之間的區別。
◆ get 方式請求格式：
/**** 方式一：get 方式請求 ******/
var url = "process.php?userName="+$("userName").value;
myAjaxObject.open("get",url,true);
//回調處理函數指定為 calback();
myAjaxObject.onreadystatechange=callBack;
myAjaxObject.send(null);
其中open方法的三個參數解釋：
1、請求方式：get / post :
2、向服務器請求的 url（后台處理的地址） :
3、 true:異步機制；false:同步機制（ajax的最大好處就是異步，所以基本選擇true）
onreadystatechange=callback 意思就是服務器返回的狀態改變的時候所選擇的處理方式，callback為一個函數（不可寫成callback()），也可寫成：
onreadystatechange=function(){ /*code here...*/ }
◆post 方式請求格式：
/******** 方式二：post 方式請求 ********/
var url = "process.php";
//【不同之處1】發送的數據另寫
var data = "userName="+$("userName").value;
myAjaxObject.open("post",url,true);
// 【不同之處2】post方式一定要加上這句話
myAjaxObject.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//回調處理函數指定為 callback();
myAjaxObject.onreadystatechange=callBack;
myAjaxObject.send(data); //【不同之處3】 send()函數帶參數
最后說明get和post在形式上和性能上的差異：
▪ post傳輸數據時，不需要在URL中顯示出來，而get方法要在URL中顯示。
▪ post傳輸的數據量大，可以達到2M，而get方法由於受到URL長度的限制,只能傳遞大約1024字節.
▪ post是為了將數據傳送到服務器段,get是為了從服務器段取得數據。當然get之所以也能傳送數據,只是用來設計告訴服務器,你到底需要什么樣的數據，post的信息作為http請求的內容，而get是在Http頭部傳輸的。
第三步：如何處理返回的數據？
首先得判斷數據的通信傳輸狀態：
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒，可以在前端進行數據處理了。
其次，返回的數據格式主要有文本（.responseText）、JSON（.responseText）和XML（.responseXML），它們各自的處理方式都不相同。
● 文本格式的處理方式：
此時對應於服務器端的process.php文件大致為：
header("Content-type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
/*只做簡單的判斷例子，實際項目中應該查找數據庫*/
echo "<b>抱歉！不可用</b>";
}else{
echo "<b>恭喜！可以使用！</b>";
}
此時前端的處理函數callback為：
function callBack(){
if(myAjaxObject.readyState==4 && myAjaxObject.status==200){
/* 1，返回格式是 文本格式 (responseText) 的處理方式：*/
$("isExist").innerHTML=myAjaxObject.responseText;
}
}
● JSON格式的處理方式：
此時對應於服務器端的process.php文件大致為：
header("Content-Type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
//輸出的是 類JSON格式 的字符串
echo '{"msg":"抱歉！不可用！！"}';
}else{
echo '{"msg":"恭喜！可以用"}';
}
此時前端的處理函數callback為：
function callBack(){
if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
// str為服務器返回來的字符串 {"msg":"抱歉！不可用！！"}
var str = myAjaxObject.responseText;
// 將字符串str轉換為JSON格式(對象數組)
var obj = eval("("+str+")");
// obj.msg 即為要在瀏覽器顯示的數據 “抱歉！不可用！！”
$("isExist").innerHTML=obj.msg;
}
}
● XML格式的處理方式：
此時對應於服務器端的process.php文件大致為：
header("Content-type: text/xml; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
echo "<res><mes>抱歉！不可用</mes></res>";
}else{
echo "<res><mes>恭喜！可以用</mes></res>";
}
此時前端的處理函數callback為：
function callBack(){
if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
/* 2，返回格式是 XML(responseXML) 的處理方式：*/
//獲取服務器端生成的XML的標簽名
var tag=myAjaxObject.responseXML.getElementsByTagName('mes');
//獲取該標簽名下的文本內容（需要的信息）
var val = tag[0].childNodes[0].nodeValue;
$("isExist").innerHTML=val;
}
}
至此，ajax的小小案例已經算是做完了，您可以在線測試一下：ajax用戶名檢測DEMO（不可用的用戶名為：tangbc、admin）