AJAX = Asynchronous JavaScript and XML (異步的JavaScript和XML)。
AJAX不是新技術(shù) ，但卻是熱門的技術(shù)。它可以在不重載（刷新）整個(gè)頁面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互并更新網(wǎng)頁模塊。
AJAX的優(yōu)點(diǎn)有很多：可以局部刷新、按需加載，這樣就減輕了服務(wù)器的數(shù)據(jù)流量。并且在頁面更新的同時(shí)，用戶可以瀏覽器網(wǎng)頁的其它內(nèi)容而不受影響，也減輕了結(jié)構(gòu)負(fù)擔(dān)。AJAX也不是萬能的，在有以上優(yōu)點(diǎn)的同時(shí)SEO也受到了影響。
在學(xué)習(xí)AJAX之前，必須先有HTML/XHTML、CSS、JavaScript/DOM的基礎(chǔ)。
AJAX與服務(wù)器進(jìn)行數(shù)據(jù)交互，必然涉及到服務(wù)器端，與此同時(shí)也就涉及到了服務(wù)器請(qǐng)求對(duì)象的創(chuàng)建(new XMLHttpRequest())、確認(rèn)請(qǐng)求方式(open())、發(fā)送請(qǐng)求(send())以及響應(yīng)請(qǐng)求(responseText)。
創(chuàng)建對(duì)象：
IE9+及其它瀏覽器支持使用new XMLHttpRequest()的創(chuàng)建對(duì)象方式，而IE8及以下則使用new ActiveXObject()的方式進(jìn)行創(chuàng)建。
看了網(wǎng)上許多人使用如下代碼進(jìn)行兼容：
1 try { 2 xml = new ActiveXObject("Msxml2.XMLHTTP"); 3 } catch(e) { 4 try { 5 xml = new ActiveXObject("Microsoft.XMLHTTP"); 6 } catch(e1) { 7 xml = new XMLHttpRequest(); 8 } 9 } |
筆者用IE11調(diào)試功能測(cè)試IE10及以下不寫new ActiveXObject("Msxml2.XMLHTTP")也是沒問題的，于是在創(chuàng)建對(duì)象時(shí)可以使用代碼：
var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
確認(rèn)請(qǐng)求：
xml.open('get', 'url', true/false);
第一個(gè)參數(shù)表示：string. 訪問方式，有兩具值：get/post，大部分的時(shí)候使用get
第二個(gè)參數(shù)表示：string. 要連接的服務(wù)器網(wǎng)址
第三個(gè)參數(shù)表示：boolean. 表示是否需要異步請(qǐng)求（true為發(fā)起異步加載）
發(fā)送請(qǐng)求：
xml.send();
如果需要發(fā)送數(shù)據(jù)則采用xml.send(str);
響應(yīng)數(shù)據(jù)：
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
alert(xml.responseText);
}
}
status返回鏈接的狀態(tài)，一般返回200與404，200表示成功返回，404表示未找到頁面。
readyState有5個(gè)值，分別為：0、1、2、3、4。而每當(dāng)值改變時(shí)都會(huì)觸發(fā)一次onreadystatechange。
readyState的5個(gè)值含義分別為：
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒
也就是當(dāng)請(qǐng)求完成，并且找到頁面時(shí)，然后才獲取服務(wù)器上的數(shù)據(jù)。