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 對象 回顧記錄