在现代 Web 应用程序中，Ajax 是一种常见的技术，它可以通过异步请求将数据从服务器加载到网页中。然而，在大型数据加载时，用户可能需要等待一段时间才能看到结果。这时候使用一个进度条可以向用户展示当前的加载进度，提高用户体验。
HTML 结构
首先，我们需要创建一个 HTML 结构以容纳进度条。我们可以使用 <div> 元素作为进度条的容器，并使用 CSS 样式对其进行布局和美化。
<div class="progress"> <div class="bar"></div> </div>
其中，.progress 类表示进度条容器，.bar 类表示进度条本身。进度条容器应该设置为固定宽度，以便进度条可以在其中水平移动。
CSS 样式
接下来，我们需要使用 CSS 样式来定义进度条的外观。以下是一个简单的样式表：
-- -------------------- ---- ------- --------- - ------ ----- ------- ----- ----------------- ----- -------------- ---- - ---- - ------ --- ------- ----- ----------------- -------- -------------- ---- ----------- ----- ---- ------------ -
其中，进度条容器设置了灰色背景、圆角边框和固定高度，进度条本身设置了蓝色背景和圆角边框，并使用 transition 属性定义了进度条动画效果。
JavaScript 代码
现在，我们需要编写 JavaScript 代码以响应 Ajax 请求并更新进度条。以下是一个示例：
-- -------------------- ---- -------
-------- ----------------- -
--- -------- - -------------------------------
-- ------
-------------------- - -----
-- -- -------------- --
--- --- - --- -----------------
-- ----
--------------------------------- ---------- -
-- -------
-------------------- - ------
---
-------------------------------- --------------- -
-- -------
--- ------- - ------------- - ------------ - ----
-- -----
-------------------- - ------- - ----
---
---------------------------- ---------- -
-- -----
-------------------- - -------
---
-- ----
--------------- --------------
-----------
-其中，showProgressBar() 函数会创建一个 XMLHttpRequest 对象，并监听其相关事件。在 loadstart 事件中，进度条将开始移动；在 progress 事件中，进度条将根据加载百分比进行更新；在 load 事件中，进度条将完全填满表示加载完成。
总结
通过上述方法，我们可以实现一个简单的 Ajax 进度条。通过对 HTML、CSS 和 JavaScript 的深入理解，我们可以进一步扩展这个进度条并将其应用于更广泛的 Web 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27200