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

参考

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

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