參考：ajax總結(jié)

原生Ajax

level 1

XMLHTTPRequest 屬性，方法和事件

1. XMLHTTPRequest 考慮兼容
2. xhr.open(method, url, async, username, password)
3. xhr.setRequestHeader(name, value)
4. xhr.onreadystatechange 事件、
5. xhr.send(null/string)
6. xhr.readyState 屬性，0 - 4 , 五個值，每改變一次都觸發(fā)xhr.onreadystatechange事件
7. xhr.status HTTP 狀態(tài)碼
8. xhr.statusText 狀態(tài)碼對應(yīng)文本
9. xhr.responseText
10. xhr.responseXML
11. xhr.getRequestHeader(name)
12. xhr.getResponseHeader(name)
13. ·xhr.getAllResponseHeaders()·
14. 注意點

• xhr.setRequestHeader(name, value)必須在opend()之后，send()之前
• xhr.onreadystatechange事件必須在send()之前

15. 補充點

• form元素的enctype屬性
  • 默認，aplication/x-www-form-urlencoded
  • post方式專用，multiple/form-data
  • text/plain不編譯

// 基本格式
var xhr = new XMLHTTPRequest()
xhr.open(method, url)
xhr.setRequestHeader(name,value)
xhr.onreadystatechange = function () {
}
xhr.send(null)

level 2

XMLHTTPRequest 新增屬性，方法和事件

1. xhr.timeout屬性
2. xhr.ontimeout事件
3. xhr.responseType屬性，可以有以下值

• text
• document
• ArrayBuffer
• Blob

4. xhr.response屬性，可以有以下類型

• ArrayBuffer
• Blob

5. progress事件

• 下載，xhr.onprogress
• 上傳，xhr.upload.onprogress
• xhr.onloadstart
• xhr.abort
• xhr.error
• xhr.load 上傳成功
• xhr.loadend 上傳完成

// progress 基本用法，在傳輸過程中不斷觸發(fā)
xhr.onpregress = function (event) {
  var percentCompleted = 0;
  if (event.lengthComputable) {
    percentCompleted = event.load / event.total;
  }
}

接受二進制案例

1. 知識點

• ArrayBuffer
• TypedArray
• Blob
• URL/FileReader

2. 上面已經(jīng)列出ResponseType可能值

jQuery 中 Ajax

必備知識點

1. jqXHR。 是 xhr 的超集
2. $.ajax()。 內(nèi)部兩個重要的對象

• jqXHR 對象
• s 對象，由 $.ajaxSetup({}) 設(shè)置，$.ajaxSetting 對象，options 對象

3. $.ajax() 。返回 jqXHR

options 參數(shù)設(shè)置

1. url
2. username,password
3. async
4. global。 是否觸發(fā)全局Ajax事件
5. type。 請求類型
6. headers。 請求頭
7. content-type。 請求頭中的一個
8. cache。 是否在地址后添加“key = random”
9. ifModified。 請求頭中的一個，配合上一個使用
10. data。 請求數(shù)據(jù)
11. processData。 請求數(shù)據(jù)是否處理為查詢字符串形式，默認為 true，改變
12. tranditional
13. timeout
14. context。 在局部回掉函數(shù)中，this是包含options的s對象，在全局回掉函數(shù)中，this是綁定的元素
15. dataType。 相應(yīng)數(shù)據(jù)類型

• xml
• text
• json
• jsonp
• script

15. jsonp。 修改callback名稱
16. jsonpCallback。 指定回掉函數(shù)
17. scriptCharset。 制定jsonp和script生成script標(biāo)簽的charset
18. statusCode。HTTP狀態(tài)碼和回掉函數(shù)的映射

事件參數(shù)，觸發(fā)時間，參考 ajax總結(jié)

局部事件

1. beforeSend
2. dataFilter。成功后觸發(fā)，304時不觸發(fā)
3. success
4. error
5. complete

全局事件

1. ajaxStart。全局中沒有在進行的ajax時，發(fā)送ajax請求觸發(fā)
2. ajaxSend
3. ajaxSuccess
4. ajaxError
5. ajaxComplete。每個ajax請求完成時，觸發(fā)
6. ajaxStop。全局中所有ajax請求完成時，觸發(fā)

成功的Ajax請求事件流

Ajax成功事件流.png

失敗的Ajax請求事件流

Ajax失敗事件流.png

全局事件典型用例

每當(dāng)ajax請求開始前顯示一個提示框，ajax請求成功時顯示一個提示框，ajax請求結(jié)束時隱藏提示框,，使用ajax全局事件

其他相關(guān)方法

1. $.ajaxSetup({}) ，$.ajax()方法中所有的選項都可以通過$.ajaxSetup()設(shè)置
2. $.get()
3. $.getScript()
4. $.post()
5. $.getJSON()
6. $.getScript()
7. $.load()
8. 常用的，關(guān)于表單的方法

• $(form).serilize()，得到查詢字符串的樣式
• $(form).serilizeArray()

緩存

1. $.ajax()設(shè)置cache為false，那么會在請求中添加請求參數(shù),使得地址不同，無法緩存
2. $.ajax()設(shè)置cache為true，同時設(shè)置ifModified為true，才能進行緩存。實際過程

• 第一次發(fā)送，服務(wù)器將Last-Modified，ETag和響應(yīng)數(shù)據(jù)一起返回
• 第二次放松，客戶端將Last-Modified，ETag存儲在If-Modified-Since和If-None-Match，然后和請求數(shù)據(jù)發(fā)送
• 服務(wù)端比較后
  • 沒有改變，發(fā)送 304
  • 改變，發(fā)送改變后的數(shù)據(jù)

跨域

1. $.ajax()中，使用jsonp和sciript實現(xiàn)跨域，必須使用get方法
2. 異同

• 同：內(nèi)部使用script標(biāo)簽實現(xiàn)，不會觸發(fā)全局和局部事件，默認不開啟緩存
• 異：使用script是加載js文件