如何显示 Ajax 调用的进度 - JavaScript

在 Ajax 请求中，往往需要显示请求进度、操作成功/失败等提示信息来提高用户体验。本文将介绍几种方法来显示 Ajax 请求的进度。

使用 XMLHttpRequest 的 onprogress 事件

XMLHttpRequest 是一个内置于浏览器中的对象，用于发起 Ajax 请求。它提供了一个 onprogress 事件，可以使用该事件来显示请求的进度。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.onprogress = function(event) {
  const percentComplete = (event.loaded / event.total) * 100;
  console.log(percentComplete);
};
xhr.send();

上述代码演示如何在 Ajax 请求中获取上传或下载的进度，并在控制台中输出百分比完成情况，可以根据需要将进度信息显示在页面中。

使用 jQuery 的 .ajaxProgress() 方法

jQuery 是一个流行的 JavaScript 库，提供了多个方便的 Ajax 请求方法。在 jQuery 1.8.0 版本之后，$.ajax() 方法增加了 progress 选项，用于指定进度事件的回调函数。

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  xhrFields: { withCredentials: true },
  progress: function(event) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(percentComplete);
  }
});

上述代码使用了 jQuery 的 $.ajax() 方法来发起请求，并使用 progress 选项设置回调函数来处理进度事件。使用 jQuery 的 .ajaxProgress() 方法也可以实现同样的效果。

$(document).ajaxProgress(function(event, request, settings) {
  const percentComplete = (event.loaded / event.total) * 100;
  console.log(percentComplete);
});

使用一个第三方库 - NProgress

NProgress 是一个轻量级的进度条库，可以在 Ajax 请求中显示进度条。

NProgress.start();
$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  success: function(data) {
    NProgress.done();
  },
  error: function() {
    NProgress.done();
  }
});

上述代码使用了 NProgress 库，在 Ajax 请求开始时显示进度条，并在请求结束时隐藏进度条。NProgress 还提供了一些其他的事件和配置选项，可以根据需要进行使用。

以上就是显示 Ajax 请求进度的几种方法。使用上述方法可以在页面中显示进度信息，提高用户体验。