ajax实现进度条-示例代码

温馨提示：这篇文章已超过238天没有更新，请注意相关的内容是否还可用！

ajax实现进度条-示例代码

1、Ajax是一种在不重新加载整个页面的情况下，通过与服务器进行异步通信的技术。它可以实现页面的局部更新，提升用户体验。进度条是一种常见的用户界面元素，用于显示某个任务的进度。通过Ajax可以实现动态更新进度条，让用户实时了解任务的进度情况。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
<script>
function updateProgress() {
  var progressBar = document.getElementById("progressBar");
  var progressValue = document.getElementById("progressValue");
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 监听进度事件
  xhr.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      progressBar.style.width = percentComplete + "%";
      progressValue.innerHTML = Math.round(percentComplete) + "%";
    }
  });
  // 发送Ajax请求
  xhr.open("GET", "example.php", true);
  xhr.send();
}
</script>
</head>
<body>
<button onclick="updateProgress()">开始任务</button>
<div id="progressBar" style="width: 0%; background-color: #4CAF50; height: 20px;"></div>
<div id="progressValue">0%</div>
</body>
</html>

在上述示例代码中，我们首先定义了一个`updateProgress`函数，该函数会在用户点击"开始任务"按钮时被调用。在该函数中，我们首先通过`getElementById`方法获取到进度条和进度值的元素。然后，我们创建一个XMLHttpRequest对象，用于发送Ajax请求。

接下来，我们通过`addEventListener`方法监听了xhr对象的`progress`事件。在该事件的回调函数中，我们可以获取到当前已加载的数据量和总数据量，并计算出任务的完成百分比。然后，我们通过修改进度条的宽度和进度值的文本，实现了动态更新进度条的效果。

在HTML代码中，我们添加了一个按钮和两个用于显示进度条的元素。当用户点击按钮时，会触发`updateProgress`函数，从而开始任务并更新进度条。

ajax实现进度条-示例代码

相关阅读