当前位置：首页 > 行业动态 > 正文

AJAX 进度条实现代码

admin
行业动态
2025-03-19
1

AJAX 进度条可以通过监听 XMLHttpRequest 对象的 progress 事件来实现。以下是一个简单的示例代码：“

javascript，var xhr = new XMLHttpRequest();，xhr.open('GET', 'your-file-url', true);xhr.upload.onprogress = function(event) {， if (event.lengthComputable) {， var percentComplete = (event.loaded / event.total) 100;， console.log('Progress: ' + percentComplete + '%');， }，};xhr.onload = function() {， if (xhr.status === 200) {， console.log('File uploaded successfully');， } else {， console.log('Error uploading file');， }，};xhr.send();，

` 这段代码通过监听 progress` 事件，实时计算并输出上传进度的百分比。

1、前端页面（HTML）

创建一个用于显示进度的元素，例如一个<div>元素，并通过CSS样式设置其初始宽度为0。

编写AJAX代码，使用XMLHttpRequest对象向服务器发送请求，并在获得响应后更新进度条的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Progress Bar</title>
    <style>
        #progressBar {
            width: 0;
            height: 20px;
            background-color: blue;
            text-align: center;
            color: white;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <h1>AJAX Progress Bar Example</h1>
    <div id="progressBar">0%</div>
    <button onclick="startProgress()">Start</button>
    <script>
        function startProgress() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "progress.php", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = xhr.responseText;
                    document.getElementById("progressBar").style.width = response + "%";
                    document.getElementById("progressBar").innerText = response + "%";
                    if (parseInt(response) < 100) {
                        setTimeout(startProgress, 500); // 每500毫秒更新一次进度条
                    }
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

2、服务器端代码（PHP）

AJAX 进度条实现代码

服务器端代码主要实现依据客户端的请求信息，返回相应百分比数字。

在该文件中，声明了一个变量$counter，并赋值为1，该变量是进度条返回百分比数字的依据，在下面使用$_GET对象获取客户端传送的变量task的值，如果该值为“create”，表示需要重新创建进度条，并设定$counter的值为1。

<?php
session_start();
if (!isset($_SESSION['counter'])) {
    $_SESSION['counter'] = 1;
} else {
    $_SESSION['counter']++;
}
echo $_SESSION['counter']  10;
?>

单元表格

步骤	描述	代码片段
1. 创建前端页面	添加进度条元素和按钮	`0%`
2. 编写AJAX代码	使用`XMLHttpRequest`发送请求并更新进度条	`var xhr = new XMLHttpRequest(); xhr.open("GET", "progress.php", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var response = xhr.responseText; document.getElementById("progressBar").style.width = response + "%"; document.getElementById("progressBar").innerText = response + "%"; if (parseInt(response)`
3. 编写服务器端代码	根据客户端请求返回百分比数字	`session_start(); if (!isset($_SESSION['counter'])) { $_SESSION['counter'] = 1; } else { $_SESSION['counter']++; } echo $_SESSION['counter'] 10;`