AJAX 简单讲解
AJAX（Asynchronous Javascript And XML：“異步JavaScript和XML”）
AJAX 已經是老生常談的話題了，它最早起源于1997年，由 Microsoft 發明了其中的關鍵技術并由 Google 將其發揚光大。為什么是 Google 呢，這又是一個悲傷的故事，事實上在1995年 Microsoft 成功推出 IE5 之際就已經開始支持 XmlHttpRequset 對象，令人遺憾的是 Microsoft 高層沒有看到它的前景，以至于后來者 Google 成為 AJAX 技術的最卓越的推動者和實踐者，從而奠定 Google 在 AJAX 發展史上的領先地位。
-
從現在的角度
-
提升用戶體驗
雖然不能增加數據下載的速度和減少下載的數據，但可以減緩等待的過程
對傳統 B/S 軟件的沖擊
-
-
從未來的角度
未來本地化轉為云端的趨勢（這里已經不算是未來了，畢竟已經基本實現了云端）
從1997這個關鍵詞上我們就知道 AJAX 并不是一種新的技術，距今已經19年過去了 AJAX 的每次修訂依然沒有突破性的改變，由原本存在的幾種技術的組成的聚合而成：
-
基于 XmlHttpRequest 對象
通過 XMLHttpRequest 來和服務器進行異步通信
-
基于 WEB 標準
使用 CSS、HTML（XHTML）呈現視覺效果
操作 DOM 模型進行交互和動態呈現
使用 JAVASCRIPT 綁定和調用等
XMLHttpRequest
XMLHttpRequest 是 AJAX 的核心機制，XMLHttpRequest 最早出現在 IE5 中，是一種支持異步請求的技術（即 javascript 異步向服務器提出請求和處理響應，而不阻塞線程，以達到無刷新的效果）。
以上是很官方的對 XMLHttpRequest 的解釋，這里不再重復造輪子，下面介紹一些簡單的 XMLHttpRequest 屬性：
onreadystatechange：每次狀態改變所觸發事件的事件處理程序。
responseText：從服務器進程返回數據的字符串形式。
responseXML：從服務器進程返回的DOM兼容的文檔數據對象。
responseBody：
status：從服務器返回的數字代碼，比如常見的 404（未找到）和 200（已就緒）。
status Text：伴隨狀態碼的字符串信息。
-
readyState：對象狀態值。
0（未初始化）：對象已建立，但是尚未初始化（尚未調用 open 方法）。
1（初始化）：對象已建立，尚未調用send方法。
2（發送數據）：send 方法已調用，但是當前的狀態及http頭未知。
3（數據傳送中）：已接收部分數據，因為響應及 http 頭不全，這時通過 responseBody 和 responseText 獲取部分數據會出現錯誤。
4（完成）：數據接收完畢,此時可以通過通過 responseXml 和 responseText 獲取完整的回應數據。
但由于不同瀏覽器之間存在差異，所以 JAVASCRIPT 創建一個 XMLHttpRequest 對象需要不同的方法。這個差異主要體現在 IE 和其它瀏覽器之間，JAVASCRIPT 函數首先檢查 XMLHttpRequest 的整體狀態并且保證它已經完成，然后才可以執行后續操作，其中涉及到的一些方法如下：
-
open
向服務器提交數據的類型，即post還是get。
請求的url地址和傳遞的參數
-
傳輸方式，false為同步，true為異步。默認為true
同步：同步方式(false)，客戶機就要等到服務器返回消息后才去執行其他操作。
異步：異步通信方式(true)，客戶機就不等待服務器的響應。
-
send
發送請求。
-
setRequestHeader
設置請求頭，如 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
在 AJAX 的整體工作流程中，我們將服務器端的 API 接口看成一個簡單的數據接口，它接受由XMLHttpRequest向服務器端發送的請求信息并返回純文本流（XML、Html、string、DataSet、json 或 Javascript 代碼）。
/*** 使用原生js封裝ajax* 兼容xhr對象*/function createXHR(){if(typeof XMLHttpRequest != "undefined"){ // 非IE6瀏覽器return new XMLHttpRequest();}else if(typeof ActiveXObject != "undefined"){ // IE6瀏覽器var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",];for(var i = 0; i < version.length; i++){try{return new ActiveXObject(version[i]);}catch(e){//todo}}}else{throw new Error("您的系統或瀏覽器不支持XHR對象！");}}/*** 仍然需要更改 on 2015/11/18.* 異步的時候需要觸發onreadystatechange事件* readyStatus=4 即數據已經發送完畢* status=200 一切已經就緒*/var xhr = createXHR();xhr.onreadystatechange = function(){// 執行完成if(xhr.readyState == 4 && xhr.status==200){//HTTP響應已經完全接收才調用callBack();}}XHR2 （XMLHttpRequest Level2）
目前仍有一些瀏覽器沒有實現 XHR2，所以在應用 AJAX 進行跨域訪問之前，首先檢測該瀏覽器是否支持跨域訪問：
if(typeof xhr.withCredentials!=undefined){//瀏覽器支持 xhr2 。}else{//瀏覽器支持不 xhr2 。}XHR2 提供一系列新事件，在 XHR1 中我們一般只應用 onreadystatechange，然后檢查狀態值再決定下一步操作，XHR2 提供 onload 回調函數簡化了這一步驟，在接收完數據的時候即可觸發。
xhr.onload=function(){//加載完成，進行下一步 todo。}XHR2 的 onprogress事件的回調函數的事件參數有兩個重要屬性：loaded和total，用來計算百分值。
xhr.onprogress=function(e){console.log('Dwonloading:'+Math.ceil(e.loaded/e.total*100)+'%');}XDomianRequest
XDomainRequest.aspx) 與 XHR2 功能上類似，且在 XHR2 之前出現，在 IE 中 XDomainRequest 和 XMLHttpRequest 是兩個不同的對象，
var xhr = new XDomainRequest();xhr.onprogress=function(e){console.log('Dwonloading:'+xhr.responseText.length);};xhr.onload=function(){//todo}關注點：
IE 中 progress.aspx) 事件不具備進度功能，當每次 onprogress 觸發時可以獲得不完整的 responseText，但無法確定總體大小，所以不能確定下載進度。
不具備 upload 對象及其事件方法。
XDomainRequest.onprogress 事件是每接收到一個數據包觸發一次。
XMLHttpRequest 取舍之道
“魚，我所欲也，熊掌亦我所欲也；二者不可得兼，舍魚而取熊掌者也”，XMLHttpRequest 實現了頁面無刷新更新數據，從而提升用戶體驗，減少頁面整體的請求次數，減輕服務器和帶寬的壓力，但同時 XMLHttpRequest 也破壞了瀏覽器的后退機制（解決辦法：通過創建或使用一個隱藏的IFRAME來重現頁面上的變更）、破壞了程序的異常機制、違背了url和資源定位的初衷、不經意間會暴露比以前更多的數據和服務器邏輯、跨站點腳步攻擊、SQL注入攻擊和基于credentials的安全漏洞等等問題。
另外，有一些需要注意的地方
異步并不等于即時。
-
XMLHttpRequest 發送請求（URL長度不到2K，可以使用GET請求數據，GET相比POST更快速）
-
POST 類型請求要發送兩個 TCP 數據包。
先發送文件頭。
再發送數據。
-
GET 類型請求只需要發送一個 TCP 數據包。
取決于你的 cookie 數量。
-
以及：
由于同源策略的限制，XHR（XMLHttpRequest）對象不能直接與非同源的網站進行數據交互，那么如何安全并合乎規則的突破這一限制呢？
在 HTML5 的概念形成之后，W3C 于2008年2月提出 XMLHttpRequest Level 2 （簡稱 XHR2）草案用以實現了跨域訪問，全新的事件，請求進度、響應進度以及其他的一些新功能。與此同時 IE 也提出了 XDomianRequest ，XDomianRequest在功能上于 XHR2 類似。
瀏覽器檢查 Access-Control-Allow-Origin，具體可參考Http Access Control。
總結
- 上一篇： 鲲鹏数据开源库python_google
- 下一篇： ECMAScript 6 未来前景