ajax基础入门

标准

XMLHttpRequest标准又分为Level1和Level2

Level1 缺点

1.受同源策略的限制，不能发送跨域请求2.不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据2.在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成

Level2 改进

1.可以发送跨域请求，在服务端允许的情况下2.支持发送和接收二进制数据3.新增formData对象，支持发送表单数据4.发送和获取数据时，可以获取进度信息5.可以设置请求的超时时间

 ?// 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/xmlxhr.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最终的urlwithCredentials // 在跨域请求中允许cookie被携带到header，作为认证信息

方法

open() ????????????????????????// 建立请求send() ????????????????????????// 发送请求abort() ???????????????????????// 取消请求setRequestHeader(key, value) ??// 设置请求头信息getResponseHeader(key) ????????// 获取响应头信息getAllResponseHeaders() ???????// 获取所有响应头信息overrideMimeType() ????????????// 设置响应数据类型

事件

xhr对象和xhr.upload对象都继承自XMLHttpRequestEventTarget接口，都拥有7个相同的事件

onloadstartonprogressonabortontimeoutonerroronloadonloadend

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

参考

你真的会使用XMLHttpRequest吗？
Ajax 知识体系大梳理

ajax基础入门

原文地址：https://www.cnblogs.com/kanyu/p/9829547.html