AJAX 核心 —— XMLHTTPRequest 對象回顧記錄

-Advertisement-

AJAX 概述不使用 AJAX 的網頁，如果要更新內容，需要重載整個頁面。 AJAX （ Asynchronous Javascript And XML ，非同步 Javascript 和 XML）用於非同步通訊，通過在後臺與伺服器進行少量的數據交換，在不重載整個網頁的情況下，對網頁局部實現非同步刷新。 ...

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請求的請求體

這裡，強調以下四點（引用自廖雪峰的官方網站，第4條略作修改）

通過檢測 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 請求不需要參數（或者null），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 請求不可避免的涉及到兩個問題：第一是AJAX以何種格式來交換數據（通常是JSON）；第二是跨域需求是怎麼解決的（通常是JSONP）。這篇文章有通俗易懂的解釋：【原創】說說JSON和JSONP，也許你會豁然開朗，含jQuery用例

既然 AJAX 請求涉及了跨域，那麼什麼是跨域？跨域的實現方式又有哪些（JSONP、CORS、伺服器跨域、postmessage ...... ）？推薦看看這篇文章：跨域請求的幾種實現方式

還有就是GET 請求經常會讀取緩存，解決方法是在 url 後面添加一個隨機數，或者用 jQuery 的 $.ajaxSetup({cache: false}); 等，詳細請看這篇文章：解決jquery load,get 方法緩存數據問題

您的分享是我們最大的動力!