AJAX进度监控实现

在实现AJAX进度监控时，我们可以使用XMLHttpRequest上的一些事件和属性，如progress、load、error和total。以下是一个简单的示例，展示了如何使用AJAX进度监控来上传文件：

function uploadFile(file) {
  var xhr = new XMLHttpRequest();
 
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      console.log(percentComplete.toFixed(2) + '%');
      // 更新进度条或显示百分比
    }
  };
 
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.log('文件上传失败');
    }
  };
 
  xhr.onerror = function() {
    console.log('文件上传出错');
  };
 
  var formData = new FormData();
  formData.append('file', file);
 
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}
 
// 使用方法：
// 假设有一个文件输入元素<input type="file" id="fileInput" />
// 当用户选择文件后，调用该函数
document.getElementById('fileInput').addEventListener('change', function(e) {
  uploadFile(e.target.files[0]);
});

在这个例子中，我们创建了一个uploadFile函数，它接收一个文件对象并使用AJAX来上传。我们监听xhr.upload的onprogress事件来跟踪上传进度，并在上传完成或出错时更新UI。这个例子假设服务器端有一个/upload的端点来处理文件上传。