AJAX 核心 —— XMLHTTPRequest 對象 回顧記錄
AJAX 概述
不使用 AJAX 的網頁，如果要更新內容，需要重載整個頁面。
AJAX （ Asynchronous Javascript And XML ，異步 Javascript 和 XML）用於異步通訊，通過在後臺與服務器進行少量的數據交換，在不重載整個網頁的情況下，對網頁局部實現異步刷新。
AJAX 核心
JavaScript 中使用 XMLHTTPRequest 對象（XHR）實現 AJAX 請求。
AJAX 步驟
一般步驟如下：
- 實例化 XMLHTTPRequest 對象（註意 IE 兼容性）
- 綁定監聽事件（onreadystatechange 屬性，判斷就緒用 readState 屬性 == 4，判斷響應成功用 status 屬性 == 200，獲取響應用 responseText 或 responseXML 屬性。
- 建立請求（open() 方法，註意最後一個參數為ture（因為是 AJAX ））
- 設置請求頭（setRequestHeader() 方法，僅限於POST）
- 發送請求（send() 方法，POST 請求時在 send() 方法添加提交參數）
AJAX 代碼
// 第一步，創建 XMLHTTPRequest 對象
var xhr = window.XMLHTTPRequest ? new XMLHTTPRequest() : new ActiveXObject(‘Microsoft.XMLHttp‘);
if(!xhr){
alert(‘創建 XMLHTTPRequest 對象失敗！‘);
return false;
}
// 第二步，綁定回調函數
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status = 200){ // 請求就緒 && 響應成功
var data = xhr.responseText; // 如果是 XML 數據，就用 var data = xhr.responseXML 獲取
// DOM 操作
// document.getElementById("myDiv").innerHTML = data;
}
}
// 第三部，建立請求
xhr.open("POST", url, true); // 參數三默認為 true（異步），可以不填
// 第四步，設置請求頭（僅限於POST）
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
// 第五步，發送請求
xhr.send(‘fname=michael&&lname=jordan‘); // POST請求的請求體這裏，強調以下四點（引用自 廖雪峰的官方網站）
-
通過檢測 window 對象是否有 XMLHttpRequest 屬性來確定瀏覽器是否支持標準的XMLHttpRequest。註意，不要根據瀏覽器的 navigator.userAgent 來檢測瀏覽器是否支持某個 JavaScript 特性，一是因為這個字符串本身可以偽造，二是通過IE版本判斷JavaScript特性將非常復雜。
-
當創建了XMLHttpRequest對象後，要先設置onreadystatechange的回調函數。在回調函數中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據status === 200判斷是否是一個成功的響應。
-
XMLHttpRequest 對象的 open() 方法有3個參數，第一個參數指定是 GET 或者 POST，第二個參數指定 URL 地址，第三個參數指定是否使用異步，默認是true，所以可以不寫。註意，千萬不要把第三個參數指定為false，否則瀏覽器將停止響應，直到AJAX請求完成。如果這個請求耗時10秒，那麽10秒內你會發現瀏覽器處於“假死”狀態。
-
最後調用 send() 方法才真正發送請求。GET 請求不需要參數，POST 請求需要把body部分以字符串或者
FormData對象傳進去。
jQuery 中的 AJAX
直接用 JS 寫 AJAX 步驟有些繁瑣。jQuery 中封裝了 AJAX 的快捷方法。
$.ajax(url,[settings]) // 執行異步 HTTP (Ajax) 請求 $(‘選擇器‘).load(url,[data],[callback]) // 從服務器加載數據，把返回 HTML 放入匹配元素 $.get(url,[data],[fn],[type]) // GET 請求加載數據 $.getJSON(url,[data],[fn]) // GET 請求加載 JSON 編碼數據 $.getScript(url,[callback]) // GET 請求 JavaScript 文件，並執行 $.post(url,[data],[fn],[type]) // POST 請求加載數據
更多jQuery 的AJAX請參考 jQuery 的中文手冊，實例請參考 jQuery Ajax 實例 ($.ajax、$.post、$.get)
推薦閱讀：
廖雪峰的官方網站 - AJAX
【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例
跨域請求的幾種實現方式
解決jquery load,get 方法緩存數據問題
AJAX 核心 —— XMLHTTPRequest 對象 回顧記錄