AJAX XHR进度事件在上传完成前不会触发

在本文中，我们将介绍AJAX XHR的进度事件以及为什么在上传完成前不会触发。

阅读更多：AJAX 教程

什么是AJAX？

AJAX是一种在Web应用程序中使用的技术，它可以实现在不刷新整个页面的情况下与服务器进行交互。通过AJAX，可以部分更新页面内容，节省带宽和提高用户体验。AJAX使用XMLHttpRequest（XHR）对象来发送和接收数据。

XHR的进度事件

在进行AJAX请求时，XHR对象提供了多个进度事件，可以监听和处理这些事件来实现对请求的跟踪和控制。其中，可以监听的进度事件主要包括以下几个：

loadstart: 在请求发送之前触发，表示请求已经启动。
progress: 在请求的过程中持续触发，表示传输数据的进度。
abort: 在请求被中止时触发。
error: 在请求出错时触发。
load: 在请求成功完成时触发。
timeout: 在请求超时时触发。
loadend: 在请求结束后触发，无论请求成功还是失败。

通过监听这些事件，我们可以实时获取请求的进度信息，从而可以更新页面的状态或显示进度条等。

为什么XHR的进度事件在上传完成前不会触发？

在AJAX请求中，当我们发送一个包含上传文件的请求时，XHR对象会将请求分为两个阶段：请求头部的发送和请求主体的发送。

在请求头部的发送阶段，XHR对象可以触发进度事件，因为在这个阶段，请求还没有包含真正的数据。

在请求主体的发送阶段，XHR对象不会触发进度事件，这是因为请求主体（也就是上传的数据）需要一次性发送完毕，XHR对象才能知道上传的进度情况。

一旦请求主体发送完毕，XHR对象会立即触发progress事件，传递最终的进度信息。

示例说明

为了更好地理解XHR进度事件何时触发，我们可以通过以下示例进行说明。

let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(percentComplete + '% 完成');
  }
});

xhr.addEventListener('load', function() {
  console.log('上传完成');
});

xhr.addEventListener('error', function() {
  console.log('上传出错');
});

xhr.open('POST', '/upload', true);

let formData = new FormData();
formData.append('file', fileInput.files[0]);

xhr.send(formData);

在这个示例中，我们使用XMLHttpRequest对象进行文件上传。通过监听progress事件，我们可以在文件上传过程中实时获取上传进度，并使用console.log将进度信息打印出来。当上传完成时，load事件将被触发，当上传出错时，error事件将被触发。

需要注意的是，如果上传的文件很小，进度事件可能会非常快速地触发完成。