Ajax使用专题

参考：ajax总结

原生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 , 五个值，每改变一次都触发xhr.onreadystatechange事件
7. xhr.status HTTP 状态码
8. xhr.statusText 状态码对应文本
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 基本用法，在传输过程中不断触发
xhr.onpregress = function (event) {
  var percentCompleted = 0;
  if (event.lengthComputable) {
    percentCompleted = event.load / event.total;
  }
}

接受二进制案例

1. 知识点

• ArrayBuffer
• TypedArray
• Blob
• URL/FileReader

2. 上面已经列出ResponseType可能值

jQuery 中 Ajax

必备知识点

1. jqXHR。 是 xhr 的超集
2. $.ajax()。 内部两个重要的对象

• jqXHR 对象
• s 对象，由 $.ajaxSetup({}) 设置，$.ajaxSetting 对象，options 对象

3. $.ajax() 。返回 jqXHR

options 参数设置

1. url
2. username,password
3. async
4. global。 是否触发全局Ajax事件
5. type。 请求类型
6. headers。 请求头
7. content-type。 请求头中的一个
8. cache。 是否在地址后添加“key = random”
9. ifModified。 请求头中的一个，配合上一个使用
10. data。 请求数据
11. processData。 请求数据是否处理为查询字符串形式，默认为 true，改变
12. tranditional
13. timeout
14. context。 在局部回掉函数中，this是包含options的s对象，在全局回掉函数中，this是绑定的元素
15. dataType。 相应数据类型

• xml
• text
• json
• jsonp
• script

15. jsonp。 修改callback名称
16. jsonpCallback。 指定回掉函数
17. scriptCharset。 制定jsonp和script生成script标签的charset
18. statusCode。HTTP状态码和回掉函数的映射

事件参数，触发时间，参考 ajax总结

局部事件

1. beforeSend
2. dataFilter。成功后触发，304时不触发
3. success
4. error
5. complete

全局事件

1. ajaxStart。全局中没有在进行的ajax时，发送ajax请求触发
2. ajaxSend
3. ajaxSuccess
4. ajaxError
5. ajaxComplete。每个ajax请求完成时，触发
6. ajaxStop。全局中所有ajax请求完成时，触发

成功的Ajax请求事件流

Ajax成功事件流.png

失败的Ajax请求事件流

Ajax失败事件流.png

全局事件典型用例

每当ajax请求开始前显示一个提示框，ajax请求成功时显示一个提示框，ajax请求结束时隐藏提示框,，使用ajax全局事件

其他相关方法

1. $.ajaxSetup({}) ，$.ajax()方法中所有的选项都可以通过$.ajaxSetup()设置
2. $.get()
3. $.getScript()
4. $.post()
5. $.getJSON()
6. $.getScript()
7. $.load()
8. 常用的，关于表单的方法

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

缓存

1. $.ajax()设置cache为false，那么会在请求中添加请求参数,使得地址不同，无法缓存
2. $.ajax()设置cache为true，同时设置ifModified为true，才能进行缓存。实际过程

• 第一次发送，服务器将Last-Modified，ETag和响应数据一起返回
• 第二次放松，客户端将Last-Modified，ETag存储在If-Modified-Since和If-None-Match，然后和请求数据发送
• 服务端比较后
  • 没有改变，发送 304
  • 改变，发送改变后的数据

跨域

1. $.ajax()中，使用jsonp和sciript实现跨域，必须使用get方法
2. 异同

• 同：内部使用script标签实现，不会触发全局和局部事件，默认不开启缓存
• 异：使用script是加载js文件