ajax基础入门
标准
- XMLHttpRequest标准又分为Level1和Level2
Level1 缺点
- 受同源策略的限制,不能发送跨域请求
- 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据
- 在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成
Level2 改进
- 可以发送跨域请求,在服务端允许的情况下
- 支持发送和接收二进制数据
- 新增formData对象,支持发送表单数据
- 发送和获取数据时,可以获取进度信息
- 可以设置请求的超时时间
// fromData对象使用如下
var formData = new FormData();
formData.append('username', 'xx');
xhr.send(formData);
兼容性
使用
1.创建请求对象
var xhr = new XMLHttpRequest(); // 只考虑现代游览器
2.设置请求头
xhr.setRequestHeader('key', 'value'); // 键名大小写不敏感
请求和响应类别
var accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: 'application/json',
xml: 'application/xml, text/xml',
html: 'text/html',
text: 'text/plain'
}
dataType 代表 accepts 键
表明请求类型(可选)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
表明能够处理的类型(可选)
xhr.setRequestHeader('Accept', accepts[dataType] || '*/*');
发送信息的编码类型
// 包括4种value:
// application/x-www-form-urlencoded
// multipart/form-data
// application/json
// text/xml
xhr.setRequestHeader('Content-Type', 'value');
3.设置响应数据类型
level1 方法
xhr.overrideMimeType(accepts[dataType]);
level2 属性
xhr.responseType = dataType;
4.侦听请求事件
xhr.onreadystatechange = function () {
// xhr.readyState 进行状态判断
// xhr.status 响应的HTTP状态码
// xhr.statusText HTTP状态说明
// xhr.response || xhr.responseText || xhr.responseXML 获取响应数据
}
5.设置超时时间
xhr.timeout // ie8以上
6.建立请求
xhr.open('type', 'url', '是否异步');
7.发送请求
// get请求传null,post请求传key1=value1&key2=value2形式
xhr.send();
8.处理请求
成功处理
xhr.onreadystatechange // 每次xhr.readyState变化时都会触发
xhr.onload // 请求成功才触发(xhr.readyState = 4)
错误处理
用xhr.onreadystatechange处理更好
xhr.onreadystatechange // 可根据xhr.status码和返回result处理
xhr.onerror // 仅限于网络层级别的异常,而不包括应用层级别
属性
readyState // 请求/响应状态
status // http状态码
statusText // http状态说明
timeout // 设置超时时间
response // 响应数据
responseText // 响应数据
responseXML // 响应数据
responseType // 设置响应类型
responseURL // 返回ajax最终的url
withCredentials // 在跨域请求中允许cookie被携带到header,作为认证信息
方法
open() // 建立请求
send() // 发送请求
abort() // 取消请求
setRequestHeader(key, value) // 设置请求头信息
getResponseHeader(key) // 获取响应头信息
getAllResponseHeaders() // 获取所有响应头信息
overrideMimeType() // 设置响应数据类型
事件
xhr对象和xhr.upload对象都继承自XMLHttpRequestEventTarget接口,都拥有7个相同的事件
onloadstart
onprogress
onabort
ontimeout
onerror
onload
onloadend
xhr对象独有onreadystatechange事件
事件触发顺序
触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次)
触发xhr.onloadstart
//上传阶段开始:
触发xhr.upload.onloadstart
触发xhr.upload.onprogress
触发xhr.upload.onload
触发xhr.upload.onloadend
//上传结束,下载阶段开始:
触发xhr.onprogress
触发xhr.onload
触发xhr.onloadend
上传/下载进度
上传触发的是xhr.upload对象的 onprogress事件
下载触发的是xhr对象的onprogress事件
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
if (event.lengthComputable) {
var completedPercent = event.loaded / event.total;
}
}