XMLHttpRequest (XHR) 事件处理机制详解
基本事件列表
XHR对象提供了一系列事件用于监控请求状态变化：
onreadystatechange
最基础的事件处理器
每当readyState属性改变时触发
需手动检查readyState和status值
onloadstart
请求开始时触发
表示请求流程已启动
onprogress
数据传输过程中周期性触发
可用于实现进度条功能
onabort
请求被中止时触发
调用abort()方法后会触发此事件
onerror
请求失败时触发
网络错误或跨域限制等情况会触发
onload
请求成功完成时触发
替代检查readyState==4的简化方式
ontimeout
请求超时时触发
需配合timeout属性使用
onloadend
请求结束时触发(无论成功与否)
总会最后触发的事件
上传专用事件
通过xhr.upload对象可监控上传进度：
upload.onprogress
上传数据过程中周期性触发
可用于显示上传进度条
upload.onloadstart
上传开始时触发
upload.onabort
上传被中止时触发
upload.onerror
上传失败时触发
upload.onload
上传成功完成时触发
upload.ontimeout
上传超时时触发
upload.onloadend
上传结束时触发(无论成功与否)
事件处理示例代码
const xhr = new XMLHttpRequest();
xhr.open('GET', 'api/data', true);
// 基础事件处理
xhr.onloadstart = () => console.log('请求开始');
xhr.onprogress = (e) => {
if(e.lengthComputable) {
console.log(`已接收 ${e.loaded} / ${e.total} 字节`);
}
};
xhr.onload = () => console.log('请求完成', xhr.response);
xhr.onerror = () => console.error('请求失败');
// 上传事件处理
xhr.upload.onprogress = (e) => {
if(e.lengthComputable) {
console.log(`已上传 ${e.loaded} / ${e.total} 字节`);
}
};
xhr.send();事件触发顺序
典型请求的事件触发顺序为：
loadstart
progress (可能多次)
load/error/abort/timeout (四者之一)
loadend
最佳实践建议
优先使用onload而非onreadystatechange简化代码
大文件传输时利用progress事件更新UI
超时处理应结合ontimeout和timeout属性
错误处理应同时考虑onerror和status检查
跨域请求需注意CORS相关错误处理