带有进度条的 AJAX - JavaScript

AJAX (Asynchronous JavaScript and XML) 是一种用于创建快速动态网页的技术，它可以在不刷新整个页面的情况下对服务器进行异步通信。带有进度条的 AJAX 可以让用户了解当前的请求状态和进展情况，提升用户体验。

实现方式

HTML 和 CSS

首先，我们需要准备一个进度条的 HTML 结构和样式。这里使用 <div> 元素和 CSS 样式来创建进度条。我们需要一个父元素包裹两个子元素，一个表示当前状态的进度条，另一个表示已完成状态的进度条。

<div class="progress-bar">
  <div class="progress"></div>
  <div class="progress-done"></div>
</div>

.progress-bar {
  width: 100%;
  background-color: #f2f2f2;
}
.progress {
  height: 10px;
  background-color: #4caf50;
  width: 0%;
}
.progress-done {
  height: 10px;
  background-color: #007bff;
  width: 0%;
}

JavaScript

接下来，我们编写 JavaScript 代码来实现带有进度条的 AJAX。这里使用原生的 XMLHttpRequest 对象来发起 AJAX 请求，并结合 HTML5 中的 ProgressEvent 来获取上传或下载的进度。最后根据获取到的进度来更新进度条的宽度。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 监听上传或下载进度
xhr.upload.addEventListener('progress', function(event) {
  // 计算上传或下载的百分比
  var percent = (event.loaded / event.total) * 100;

  // 更新进度条的宽度
  var progress = document.querySelector('.progress');
  progress.style.width = percent + '%';

  // 更新已完成状态的进度条的宽度
  var progressDone = document.querySelector('.progress-done');
  progressDone.style.width = (100 - percent) + '%';
});

// 发起 AJAX 请求
xhr.open('GET', 'http://example.com/file.jpg', true);
xhr.send();

总结

带有进度条的 AJAX 可以让用户清楚地了解当前请求的状态和进展情况，提升用户体验。我们可以通过 HTML 和 CSS 创建进度条的结构和样式，通过 JavaScript 监听上传或下载进度来更新进度条的宽度。