Ajax快速入門

1、概述

Ajax是Asynchronous JavaScript and XML的縮寫。Asynchronous，是任務的一種執行模式，程序的執行順序與任務的排列順序是不一致的、異步的。JavaScript，是程序的核心，用來進行交互以及通訊的控制與實現。XML，是進行交互以及通訊的數據格式，目前一般採用JSON的格式。

傳統web應用，每次用戶的交互都須要向服務器發送請求，服務器接收並處理請求以後，返回新的頁面給客戶端瀏覽器，在此期間用戶必須等待頁面從新繪製完成。

使用Ajax，用戶的交互交給JavaScript來處理而不是直接發送給服務器，此時頁面不進行刷新，在此期間用戶能夠繼續進行頁面交互。當服務器將數據返回給JavaScript時，能夠局部更新頁面，從而用戶在頁面沒有提交或刷新就獲得新的數據。

經過這種異步模式，使web應用程序像桌面應用程序同樣，可以及時響應用戶與服務器之間的交互，沒必要進行頁面刷新或跳轉，縮短等待時間，減輕服務器的負載。

2、原理

一、XMLHttpRequest對象

XMLHttpRequest對象是Ajax技術的核心，在IE 5中首次引入，是一種支持異步請求的技術。經過該對象，可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶的其餘操做。

使用XMLHttpRequest對象向服務器發送請求和處理響應以前，必須先建立一個XMLHttpRequest對象。在不一樣的瀏覽器中，建立XMLHttpRequest對象的建立方式也不相同，因此須要對瀏覽器進行判斷。

var xhr = new XMLHttpRequest();

或

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

後者支持IE 5和IE 6。

二、發送請求

從表單獲取數據：

var city = document.getElementById("city").value;

創建要鏈接的URL：

var url = "/pages/getCity.html?city=" + escape(city)

打開服務器鏈接：

xhr.open("GET", url, true);

最後一個參數設爲true，表示請求一個異步鏈接；若是設爲false，表示發送請求後將等待服務器返回的響應。

設置鏈接以後服務器要進行的處理：

xhr.onreadystatechange = updatePage;

屬性onreadystatechange告訴服務器處理完請求以後，執行哪些操做。

發送請求：

xhr.send();

三、處理響應

判斷響應是否處於就緒狀態：

if (xhr.readyState === 4 && xhr.status === 200)

得到服務器的響應：

var response = xhr.responseText;

設置表單數據：

document.getElementById("zipCode").value = response;

3、改進的XMLHttpRequest

老版本的XMLHttpRequest對象存在不少缺點：

• 只支持文本數據的傳送，沒法讀取和上傳二進制文件
• 傳送數據時，只能提示是否完成，沒有進度信息
• 不支持跨域

新版本針對老版本的缺點，作出很大改進：

• 能夠設置HTTP請求的時限
• 可使用FormData對象管理表單數據
• 能夠上傳文件
• 能夠獲取二進制數據
• 能夠得到數據傳輸的進度信息
• 支持跨域請求

一、HTTP請求時限

設置最長等待時間，超過這個時限，會自動中止HTTP請求：

xhr.timeout = 3000;

二、FormData對象

爲了方便表單處理，新增FormData對象，能夠模擬表單：

var formData = new FormData();
formData.append('username', 'sean');
formData.append('age', 20);
xhr.send(formData);

三、上傳文件

要上傳的文件是表單元素，因此能夠將它放到FormData對象中，實現文件上傳：

for (var i=0; i\<files.length; i++) {
  formData.append('files[]', files[i]);
}

四、獲取二進制數據

利用新增的responseType屬性，指定服務器返回的數據類型，默認是text文本類型。若是設置爲blob，表示服務器返回的是二進制對象。

xhr.responseType = 'blob';

還能夠設置爲arraybuffer，把二進制數據放在一個數組裏：

xhr.responseType = "arraybuffer";

五、獲取進度信息

傳送數據時，使用progress事件，返回進度信息。它分上傳和下載兩種狀況：下載屬於XMLHttpRequest對象，上傳屬於XMLHttpRequest.upload對象。

定義progress事件的回調函數：

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

在回調函數中，處理事件：

function updateProgress(event) {
  if (event.lengthComputable) {
    var percentComplete = event.loaded / event.total;
  }
}

與progress事件相關的其餘事件：

• load事件，傳送成功完成
• abort事件，傳送被用戶取消
• error事件，傳送中出現錯誤
• loadStart事件，傳送開始
• loadEnd事件，傳送結束

六、跨域請求

向不一樣域名的服務器發送HTTP請求，叫作跨域資源共享，簡稱CORS。前提是瀏覽器必須支持該功能，而且服務器端必須贊成進行跨域。

xhr.open('GET', 'http://www.google.com/');

4、jQuery中的用法

一、load(url [, data] [, callback])

能夠遠程載入HTML，並插入到DOM中。經常使用來從服務器上獲取靜態的數據文件。load方法的傳遞方式根據參數data來自動指定。若是沒有參數，則採用GET方式，不然會採用POST方式。

參數說明：

• url，服務端資源的url
• data，發送到服務器的key/value數據
• callback，請求完成時的回調函數

二、get(url [, data] [, callback] [, type])

使用GET方式進行異步請求。服務器的狀態和應用的模型數據不受GET操做的影響。

參數說明：

• url，服務端資源的url
• data，以key/value的形式構造查詢字符串添加到url
• callback，在請求成功時被調用，將請求結果和狀態傳遞給該方法
• type，服務器端返回內容的格式

三、post(url [, data] [, callback] [, type])

使用POST方式進行異步請求。發送到服務器的數據能夠用來修改應用的模型數據。

get和post方式的區別：

• GET請求會將參數放在url後進行傳遞；POST請求會做爲HTTP的消息體發送給服務器。
• GET對傳輸的數據大小有限制，一般不大於2KB；POST方式傳遞的數據大小理論上不受限制。
• GET方式請求的數據會被瀏覽器緩存，可能會帶來安全問題；POST方式不會被瀏覽器緩存。

四、getScript

用來加載js文件，js文件會自動執行。

五、getJSON

用來加載JSON文件。

六、ajax(options)

是jQuery最底層的實現。參數包含了所須要的請求設置以及回調函數，以key/value形式存在。

選項：

• url，發送請求地址
• type，請求方式，默認爲GET
• data，發送到服務器的key/value數據
• dataType，服務器返回的數據類型
• complete，請求完成後的回調函數。參數是XMLHttpRequest對象和一個描述成功請求類型的字符串
• success，請求成功的回調函數。參數是服務器返回的數據和描述狀態的字符串
• error，請求失敗時調用的函數。參數是XMLHttpRequest對象、錯誤信息和捕獲的錯誤對象
• contentType，發送信息給服務器時的內部編碼類型
• jsonp，在jsonp請求中替代callback的名稱

---

參考資料：

阮一峯：XMLHttpRequest Level 2 使用指南