参考：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.statusHTTP 状态码 -
xhr.statusText状态码对应文本 xhr.responseTextxhr.responseXMLxhr.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.onloadstartxhr.abortxhr.error-
xhr.load上传成功 -
xhr.loadend上传完成
// progress 基本用法，在传输过程中不断触发
xhr.onpregress = function (event) {
var percentCompleted = 0;
if (event.lengthComputable) {
percentCompleted = event.load / event.total;
}
}
接受二进制案例
- 知识点
ArrayBufferTypedArrayBlobURL/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，改变 tranditionaltimeout-
context。 在局部回掉函数中，this是包含options的s对象，在全局回掉函数中，this是绑定的元素 -
dataType。 相应数据类型
xmltextjsonjsonpscript
-
jsonp。 修改callback名称 -
jsonpCallback。 指定回掉函数 -
scriptCharset。 制定jsonp和script生成script标签的charset -
statusCode。HTTP状态码和回掉函数的映射
事件参数，触发时间，参考 ajax总结
局部事件
beforeSend-
dataFilter。成功后触发，304时不触发 successerrorcomplete
全局事件
-
ajaxStart。全局中没有在进行的ajax时，发送ajax请求触发 ajaxSendajaxSuccessajaxError-
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文件
