一、概述
Ajax是Asynchronous JavaScript and XML的縮寫绊谭。Asynchronous癣籽，是任務(wù)的一種執(zhí)行模式方灾，程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的讼渊。JavaScript动看，是程序的核心，用來進(jìn)行交互以及通信的控制與實(shí)現(xiàn)爪幻。XML菱皆，是進(jìn)行交互以及通信的數(shù)據(jù)格式，目前通常采用JSON的格式挨稿。
傳統(tǒng)web應(yīng)用搔预，每次用戶的交互都需要向服務(wù)器發(fā)送請求，服務(wù)器接收并處理請求之后叶组，返回新的頁面給客戶端瀏覽器拯田，在此期間用戶必須等待頁面重新繪制完成。
使用Ajax甩十，用戶的交互交給JavaScript來處理而不是直接發(fā)送給服務(wù)器船庇，此時(shí)頁面不進(jìn)行刷新，在此期間用戶可以繼續(xù)進(jìn)行頁面交互侣监。當(dāng)服務(wù)器將數(shù)據(jù)返回給JavaScript時(shí)鸭轮，可以局部更新頁面，從而用戶在頁面沒有提交或刷新就得到新的數(shù)據(jù)橄霉。
通過這種異步模式窃爷，使web應(yīng)用程序像桌面應(yīng)用程序一樣，能夠及時(shí)響應(yīng)用戶與服務(wù)器之間的交互，不必進(jìn)行頁面刷新或跳轉(zhuǎn)按厘，縮短等待時(shí)間医吊，減輕服務(wù)器的負(fù)載。
二逮京、原理
1卿堂、XMLHttpRequest對象
XMLHttpRequest對象是Ajax技術(shù)的核心，在IE 5中首次引入懒棉，是一種支持異步請求的技術(shù)草描。通過該對象，可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)策严，而不阻塞用戶的其他操作穗慕。
使用XMLHttpRequest對象向服務(wù)器發(fā)送請求和處理響應(yīng)之前，必須先創(chuàng)建一個(gè)XMLHttpRequest對象妻导。在不同的瀏覽器中逛绵，創(chuàng)建XMLHttpRequest對象的創(chuàng)建方式也不相同，所以需要對瀏覽器進(jìn)行判斷栗竖。
var xhr = new XMLHttpRequest();
或
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
后者支持IE 5和IE 6暑脆。
2、發(fā)送請求
從表單獲取數(shù)據(jù)：
var city = document.getElementById("city").value;
建立要連接的URL：
var url = "/pages/getCity.html?city=" + escape(city)
打開服務(wù)器連接：
xhr.open("GET", url, true);
最后一個(gè)參數(shù)設(shè)為true狐肢，表示請求一個(gè)異步連接添吗；如果設(shè)為false，表示發(fā)送請求后將等待服務(wù)器返回的響應(yīng)份名。
設(shè)置連接之后服務(wù)器要進(jìn)行的處理：
xhr.onreadystatechange = updatePage;
屬性onreadystatechange告訴服務(wù)器處理完請求之后碟联，執(zhí)行哪些操作。
發(fā)送請求：
xhr.send();
3僵腺、處理響應(yīng)
判斷響應(yīng)是否處于就緒狀態(tài)：
if (xhr.readyState === 4 && xhr.status === 200)
獲得服務(wù)器的響應(yīng)：
var response = xhr.responseText;
設(shè)置表單數(shù)據(jù)：
document.getElementById("zipCode").value = response;
三鲤孵、改進(jìn)的XMLHttpRequest
老版本的XMLHttpRequest對象存在很多缺點(diǎn)：
- 只支持文本數(shù)據(jù)的傳送，無法讀取和上傳二進(jìn)制文件
- 傳送數(shù)據(jù)時(shí)辰如，只能提示是否完成普监，沒有進(jìn)度信息
- 不支持跨域
新版本針對老版本的缺點(diǎn)，做出很大改進(jìn)：
- 可以設(shè)置HTTP請求的時(shí)限
- 可以使用FormData對象管理表單數(shù)據(jù)
- 可以上傳文件
- 可以獲取二進(jìn)制數(shù)據(jù)
- 可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息
- 支持跨域請求
1琉兜、HTTP請求時(shí)限
設(shè)置最長等待時(shí)間凯正，超過這個(gè)時(shí)限，會自動(dòng)停止HTTP請求：
xhr.timeout = 3000;
2豌蟋、FormData對象
為了方便表單處理廊散，新增FormData對象，可以模擬表單：
var formData = new FormData();
formData.append('username', 'sean');
formData.append('age', 20);
xhr.send(formData);
3梧疲、上傳文件
要上傳的文件是表單元素允睹，所以可以將它放到FormData對象中运准，實(shí)現(xiàn)文件上傳：
for (var i=0; i\<files.length; i++) {
formData.append('files[]', files[i]);
}
4、獲取二進(jìn)制數(shù)據(jù)
利用新增的responseType屬性缭受，指定服務(wù)器返回的數(shù)據(jù)類型胁澳，默認(rèn)是text文本類型。如果設(shè)置為blob贯涎，表示服務(wù)器返回的是二進(jìn)制對象听哭。
xhr.responseType = 'blob';
還可以設(shè)置為arraybuffer慢洋，把二進(jìn)制數(shù)據(jù)放在一個(gè)數(shù)組里：
xhr.responseType = "arraybuffer";
5塘雳、獲取進(jìn)度信息
傳送數(shù)據(jù)時(shí)，使用progress事件普筹，返回進(jìn)度信息败明。它分上傳和下載兩種情況：下載屬于XMLHttpRequest對象，上傳屬于XMLHttpRequest.upload對象太防。
定義progress事件的回調(diào)函數(shù)：
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
在回調(diào)函數(shù)中妻顶，處理事件：
function updateProgress(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
}
}
與progress事件相關(guān)的其他事件：
- load事件，傳送成功完成
- abort事件蜒车，傳送被用戶取消
- error事件讳嘱，傳送中出現(xiàn)錯(cuò)誤
- loadStart事件，傳送開始
- loadEnd事件酿愧，傳送結(jié)束
6沥潭、跨域請求
向不同域名的服務(wù)器發(fā)送HTTP請求，叫做跨域資源共享嬉挡，簡稱CORS钝鸽。前提是瀏覽器必須支持該功能，并且服務(wù)器端必須同意進(jìn)行跨域庞钢。
xhr.open('GET', 'http://www.google.com/');
四拔恰、jQuery中的用法
1、load(url [, data] [, callback])
可以遠(yuǎn)程載入HTML基括，并插入到DOM中颜懊。常用來從服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件。load方法的傳遞方式根據(jù)參數(shù)data來自動(dòng)指定风皿。如果沒有參數(shù)河爹，則采用GET方式，否則會采用POST方式揪阶。
參數(shù)說明：
- url昌抠，服務(wù)端資源的url
- data，發(fā)送到服務(wù)器的key/value數(shù)據(jù)
- callback鲁僚，請求完成時(shí)的回調(diào)函數(shù)
2炊苫、get(url [, data] [, callback] [, type])
使用GET方式進(jìn)行異步請求裁厅。服務(wù)器的狀態(tài)和應(yīng)用的模型數(shù)據(jù)不受GET操作的影響。
參數(shù)說明：
- url侨艾，服務(wù)端資源的url
- data执虹，以key/value的形式構(gòu)造查詢字符串添加到url
- callback，在請求成功時(shí)被調(diào)用唠梨，將請求結(jié)果和狀態(tài)傳遞給該方法
- type袋励，服務(wù)器端返回內(nèi)容的格式
3、post(url [, data] [, callback] [, type])
使用POST方式進(jìn)行異步請求当叭。發(fā)送到服務(wù)器的數(shù)據(jù)可以用來修改應(yīng)用的模型數(shù)據(jù)茬故。
get和post方式的區(qū)別：
- GET請求會將參數(shù)放在url后進(jìn)行傳遞；POST請求會作為HTTP的消息體發(fā)送給服務(wù)器蚁鳖。
- GET對傳輸?shù)臄?shù)據(jù)大小有限制磺芭，通常不大于2KB；POST方式傳遞的數(shù)據(jù)大小理論上不受限制醉箕。
- GET方式請求的數(shù)據(jù)會被瀏覽器緩存钾腺，可能會帶來安全問題；POST方式不會被瀏覽器緩存讥裤。
4放棒、getScript
用來加載js文件，js文件會自動(dòng)執(zhí)行己英。
5间螟、getJSON
用來加載JSON文件。
6剧辐、ajax(options)
是jQuery最底層的實(shí)現(xiàn)寒亥。參數(shù)包含了所需要的請求設(shè)置以及回調(diào)函數(shù)，以key/value形式存在荧关。
選項(xiàng)：
- url溉奕，發(fā)送請求地址
- type，請求方式忍啤，默認(rèn)為GET
- data加勤，發(fā)送到服務(wù)器的key/value數(shù)據(jù)
- dataType，服務(wù)器返回的數(shù)據(jù)類型
- complete同波，請求完成后的回調(diào)函數(shù)鳄梅。參數(shù)是XMLHttpRequest對象和一個(gè)描述成功請求類型的字符串
- success，請求成功的回調(diào)函數(shù)未檩。參數(shù)是服務(wù)器返回的數(shù)據(jù)和描述狀態(tài)的字符串
- error戴尸，請求失敗時(shí)調(diào)用的函數(shù)。參數(shù)是XMLHttpRequest對象冤狡、錯(cuò)誤信息和捕獲的錯(cuò)誤對象
- contentType孙蒙，發(fā)送信息給服務(wù)器時(shí)的內(nèi)部編碼類型
- jsonp项棠，在jsonp請求中替代callback的名稱
參考資料：
