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

標籤：useragent   pen   ajax   back   一個   end   hang   添加   建立   

AJAX 概述

　　不使用 AJAX 的網頁，如果要更新內容，需要重載整個頁面。

　　AJAX （ Asynchronous Javascript And XML ，非同步 Javascript 和 XML）用於非同步通訊，通過在後台與伺服器進行少量的資料交換，在不重載整個網頁的情況下，對網頁局部實現非同步重新整理。

 

AJAX 核心

　　JavaScript 中使用 XMLHTTPRequest 對象（XHR）實現 AJAX 請求。

 

AJAX 步驟

　　一般步驟如下：

1. 執行個體化 XMLHTTPRequest 對象（注意 IE 相容性）
2. 綁定監聽事件（onreadystatechange 屬性，判斷就緒用 readState 屬性 == 4，判斷響應成功用 status 屬性 == 200，擷取響應用 responseText 或 responseXML 屬性。
3. 建立請求（open() 方法，注意最後一個參數為ture（因為是 AJAX ））
4. 佈建要求頭（setRequestHeader() 方法，僅限於POST）
5. 發送請求（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請求的請求體

這裡，強調以下四點（引用自 廖雪峰的官方網站）

1. 通過檢測 window 對象是否有 XMLHttpRequest 屬性來確定瀏覽器是否支援標準的XMLHttpRequest。注意，不要根據瀏覽器的 navigator.userAgent 來檢測瀏覽器是否支援某個 JavaScript 特性，一是因為這個字串本身可以偽造，二是通過IE版本判斷JavaScript特性將非常複雜。

2. 當建立了XMLHttpRequest對象後，要先設定onreadystatechange的回呼函數。在回呼函數中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據status === 200判斷是否是一個成功的響應。

3. XMLHttpRequest 對象的 open() 方法有3個參數，第一個參數指定是 GET 或者 POST，第二個參數指定 URL 地址，第三個參數指定是否使用非同步，預設是true，所以可以不寫。注意，千萬不要把第三個參數指定為false，否則瀏覽器將停止回應，直到AJAX請求完成。如果這個請求耗時10秒，那麼10秒內你會發現瀏覽器處於“假死”狀態。

4. 最後調用 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 對象 回顧記錄