Ajax知识体系大梳理

通常, 一个xhr实例对象拥有10个普通属性+9个方法.

readyState

只读属性, readyState属性记录了ajax调用过程中所有可能的状态. 它的取值简单明了, 如下:

| readyState | 对应常量 | 描述 |

| — | — | — |

| 0 (未初始化) | xhr.UNSENT | 请求已建立, 但未初始化(此时未调用open方法) |

| 1 (初始化) | xhr.OPENED | 请求已建立, 但未发送 (已调用open方法, 但未调用send方法) |

| 2 (发送数据) | xhr.HEADERS_RECEIVED | 请求已发送 (send方法已调用, 已收到响应头) |

| 3 (数据传送中) | xhr.LOADING | 请求处理中, 因响应内容不全, 这时通过responseBody和responseText获取可能会出现错误 |

| 4 (完成) | xhr.DONE | 数据接收完毕, 此时可以通过通过responseBody和responseText获取完整的响应数据 |

注意, readyState 是一个只读属性, 想要改变它的值是不可行的.

onreadystatechange

onreadystatechange事件回调方法在readystate状态改变时触发, 在一个收到响应的ajax请求周期中, onreadystatechange 方法会被触发4次. 因此可以在 onreadystatechange 方法中绑定一些事件回调, 比如:

xhr.onreadystatechange = function(e){

if(xhr.readystate==4){

var s = xhr.status;

if((s >= 200 && s < 300) || s == 304){

var resp = xhr.responseText;

//TODO …

}

}

}

注意: onreadystatechange回调中默认会传入Event实例, 如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TFEXNado-1651068798201)(https://user-gold-cdn.xitu.io/2017/3/15/26028e3201ff98e6b918df22cd98fa3a.png)]Event

status

只读属性, status表示http请求的状态, 初始值为0. 如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200.

statusText

只读属性, statusText表示服务器的响应状态信息, 它是一个 UTF-16 的字符串, 请求成功且status==20X时, 返回大写的 OK . 请求失败时返回空字符串. 其他情况下返回相应的状态描述. 比如: 301的 Moved Permanently , 302的 Found , 303的 See Other , 307 的 Temporary Redirect , 400的 Bad Request , 401的 Unauthorized 等等.

onloadstart

onloadstart事件回调方法在ajax请求发送之前触发, 触发时机在 readyState==1 状态之后, readyState==2 状态之前.

onloadstart方法中默认将传入一个ProgressEvent事件进度对象. 如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8YqpieL7-1651068798202)(https://user-gold-cdn.xitu.io/2017/3/15/8b81e479a1423d5bb66ee12c3d3ee130.png)]ProgressEvent

ProgressEvent对象具有三个重要的Read only属性.

• lengthComputable 表示长度是否可计算, 它是一个布尔值, 初始值为false.

• loaded 表示已加载资源的大小, 如果使用http下载资源, 它仅仅表示已下载内容的大小, 而不包括http headers等. 它是一个无符号长整型, 初始值为0.

• total 表示资源总大小, 如果使用http下载资源, 它仅仅表示内容的总大小, 而不包括http headers等, 它同样是一个无符号长整型, 初始值为0.

onprogress

onprogress事件回调方法在 readyState==3 状态时开始触发, 默认传入 ProgressEvent 对象, 可通过 e.loaded/e.total 来计算加载资源的进度, 该方法用于获取资源的下载进度.

注意: 该方法适用于 IE10+ 及其他现代浏览器.

xhr.onprogress = function(e){

console.log(‘progress:’, e.loaded/e.total);

}

onload

onload事件回调方法在ajax请求成功后触发, 触发时机在 readyState==4 状态之后.

想要捕捉到一个ajax异步请求的成功状态, 并且执行回调, 一般下面的语句就足够了:

xhr.onload = function(){

var s = xhr.status;

if((s >= 200 && s < 300) || s == 304){

var resp = xhr.responseText;

//TODO …

}

}

onloadend

onloadend事件回调方法在ajax请求完成后触发, 触发时机在 readyState==4 状态之后(收到响应时) 或者 readyState==2 状态之后(未收到响应时).

onloadend方法中默认将传入一个ProgressEvent事件进度对象.

timeout

timeout属性用于指定ajax的超时时长. 通过它可以灵活地控制ajax请求时间的上限. timeout的值满足如下规则:

• 通常设置为0时不生效.

• 设置为字符串时, 如果字符串中全部为数字, 它会自动将字符串转化为数字, 反之该设置不生效.

• 设置为对象时, 如果该对象能够转化为数字, 那么将设置为转化后的数字.

xhr.timeout = 0; //不生效

xhr.timeout = ‘123’; //生效, 值为123

xhr.timeout = ‘123s’; //不生效

xhr.timeout = [‘123’]; //生效, 值为123

xhr.timeout = {a:123}; //不生效

ontimeout

ontimeout方法在ajax请求超时时触发, 通过它