Ajax使用专题

参考：ajax总结

原生Ajax

level 1

XMLHTTPRequest 属性，方法和事件

XMLHTTPRequest 考虑兼容
xhr.open(method, url, async, username, password)
xhr.setRequestHeader(name, value)
xhr.onreadystatechange 事件、
xhr.send(null/string)
xhr.readyState 属性，0 - 4 , 五个值，每改变一次都触发xhr.onreadystatechange事件
xhr.status HTTP 状态码
xhr.statusText 状态码对应文本
xhr.responseText
xhr.responseXML
xhr.getRequestHeader(name)
xhr.getResponseHeader(name)
·xhr.getAllResponseHeaders()·
注意点

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

补充点

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 新增属性，方法和事件

xhr.timeout属性
xhr.ontimeout事件
xhr.responseType属性，可以有以下值

text
document
ArrayBuffer
Blob

xhr.response属性，可以有以下类型

ArrayBuffer
Blob

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;
  }
}

接受二进制案例

知识点

ArrayBuffer
TypedArray
Blob
URL/FileReader

上面已经列出ResponseType可能值

jQuery 中 Ajax

必备知识点

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

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

$.ajax() 。返回 jqXHR

options 参数设置

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

xml
text
json
jsonp
script

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

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

局部事件

beforeSend
dataFilter。成功后触发，304时不触发
success
error
complete

全局事件

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

成功的Ajax请求事件流

Ajax成功事件流.png

失败的Ajax请求事件流

Ajax失败事件流.png

全局事件典型用例

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

其他相关方法

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

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

缓存

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

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

跨域

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

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