原址：https://segmentfault.com/a/1190000003096293#articleHeader1
一、定義
W3C里這么解釋AJAX：
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。
就是利用JS來無刷新與后端交互，通過get和post方式把數據發送到后端，或者請求后端的數據，然后根據請求的數據進行改變DOM節點等操作，從而取消掉用form的submit方式一提交就會跳轉頁面的情況，像在創建賬號的時候檢測此用戶名是否存在就是一個典型的案例，本文講從原生JS和jQuery方面介紹AJAX的實現，跨域問題暫且不表。
二、原生JS實現AJAX
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。
1.GET
var xmlhttp = new XMLHttpRequest();xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);xmlhttp.send();
傳遞參數直接在?后指定，多個參數用&分隔
GET請求同一URL時會有緩存，通過參數是否一致來判斷
解決緩存問題，加個時間戳使每次參數不一致，上例中的t=Math.random()
2.POST
var xmlhttp = new XMLHttpRequest();xmlhttp.open("POST","ajax_test.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
POST沒有緩存
POST發送的數據量大
AJAX無法發送文件
readyState改變時觸發onreadystatechange事件，4為完成
status是返回狀態，200是成功，404是未找到頁面
responseText是返回的數據，為字符串格式
三、jQuery實現AJAX
1.GET
使用get()
方法時，采用GET方式向服務器請求數據，并通過方法中回調函數的參數返回請求的數據，它的調用格式如下：$.get(url,[callback])
$.get("demo_test.php?id=1&name=lemoo",function(data,status){ alert("Data: " + data + "\nStatus: " + status); });
參數通過URL傳遞
有緩存
2.POST
與get()
方法相比，post()
方法多用于以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，并將處理結果返回頁面，調用格式如下：$.post(url,[data],[callback])
$.post("demo_test.php",{ num:1},function (data) { alert(data);});
使用serialize()
方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用于ajax請求，它的調用格式如下：$(selector).serialize()
3.ajax
使用ajax()
方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求并傳遞數值，它的調用格式如下：$.ajax([settings])
其中參數settings為發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data為請求時傳遞的數據，dataType為服務器返回的數據類型，success為請求成功的執行的回調函數，type為發送數據請求的方式，默認為get。
$.ajax({ type:"post", url:"demo_test.php", data: { num: 123 }, dataType:"text", success: function (data) { alert(1); }});
4.getJSON
使用getJSON()
方法可以通過Ajax異步請求的方式，獲取服務器中的數組，并對獲取的數據進行解析，顯示在頁面中，它的調用格式為：$.getJSON(url,[data],[callback])
可以與$.each搭配來遍歷數據
$.getJSON("demo_test.php",function(data){ $.each(data, function (index, sport) { if(index==3) $("ul").append("<li>" + sport["name"] + "</li>"); });});
這樣返回的數據直接就是JSON格式的就可以使用，但是要注意緩存問題。
四、AJAX的調試
Request URL:查看請求的地址，一般在這里查看向后臺請求的URL是否正確，錯誤404的話一般這里會有問題
Request Method:請求的方式，查看是GET或者POST，GET請求的參數一致的話會有緩存
Status Code:返回狀態。一般是200正常；404未找到頁面，一般是URL錯誤，或者后臺沒有創建相應的action；500內部服務錯誤，多為后臺錯誤。
底下的Query String Parameters是向后臺發送的數據，一般這里看參數是否有問題，格式及命名是否正確，事故多發地。
點擊Response就可以查看服務器返回的數據了，一般在這里查看返回是否正常，格式是否正確，一般是JSON。
基本上通過發送的數據及傳回的數據就能定位問題所在了。
五、總結
一般來說，處理AJAX，用jQuery的get和post的就夠用，如果是JSON數據的話用getJSON，注意緩存問題，特殊的應用再考慮用ajax()，另外，AJAX還有一個很嚴重的問題是跨域，這個以后再說。
