php+javascript实现的动态显示服务器运行程序进度条功能示例

下面是“php+javascript实现的动态显示服务器运行程序进度条功能示例”的完整攻略：

简介

在使用PHP编写一个长时间运行的服务器程序时，为了提升用户的体验，需要配合JavaScript动态展示进度条。在这里我们将演示如何使用PHP和JavaScript实现一个简单的进度条。

步骤一：编写PHP程序

首先，在服务端编写一个长时间运行的脚本，为了模拟这个过程，我们可以使用一个循环来进行计时。在计时的过程中，我们将使用 sleep() 函数来模拟耗时操作。在每个循环中，我们都将更新一个对应的进度值，并将其保存在一个文件中，以便在下一步中读取。

下面是示例代码：

<?php
// 这里假设 $total 为循环的次数。
$total = 10;

// 初始化当前执行到的步骤，请根据实际情况修改。
if (!file_exists('progress.txt')) {
    file_put_contents('progress.txt', '0');
} 

for ($i = 1; $i <= $total; $i++) {
    echo 'Step ' . $i . ' complete.<br>';

    // 更新进度值
    $progress = round($i / $total * 100);
    file_put_contents('progress.txt', $progress);

    // 模拟耗时操作
    sleep(1);
}
?>

在每次循环中，我们将 $progress 的结果保存在 progress.txt 文件中。

步骤二：编写JavaScript代码

JavaScript 能够通过 AJAX 请求来实时读取进度值，并更新进度条。在这里，我们需要编写一个 JavaScript 函数来定期读取服务器上保存的进度值。一旦某一进度值更新了，函数将会向一个指定的 DOM 元素中写入它的数值。

下面是示例代码：

// 这里假设在 HTML 页面中，进度条元素的 ID 为 progress。
function updateProgress() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("progress").innerText = xhr.responseText + "%";
        }
    };
    xhr.open("GET", "progress.txt", true);
    xhr.send();
}

在这个函数中，我们将 progress.txt 文件的内容作为 AJAX 请求的响应，在每次成功返回后，将读取到的数值显示在进度条对应的 DOM 元素中。

步骤三：在 HTML 页面上嵌入进度条

接下来，我们需要在 HTML 页面中嵌入显示进度条的代码。在这里我们使用了 Bootstrap 框架的进度条组件。

下面是示例代码：

<div class="progress">
  <div id="progress" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>

在这个示例中，div 元素的 class 属性为 progress，包含进度条组件的整体样式。div 元素内的子元素 div#progress 使用了 progress-bar 样式，对应着要填充的进度条。我们将它的 width 设置为 0%。

步骤四：整合代码

最后，我们需要在 HTML 中引用刚才编写的 JavaScript 文件，并在长时间服务端脚本开头和结束时调用 updateProgress() 函数。这样，在服务端脚本执行时，JavaScript 将会不断地请求服务器上的进度值，并将其显示在页面上。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Progress Bar Demo</title>
  <!-- 引用 Bootstrap -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 引用 progress.js -->
  <script src="progress.js"></script>
</head>
<body>
  <div class="progress">
    <div id="progress" class="progress-bar" role="progressbar" style="width: 0%;"></div>
  </div>

  <?php
  // 在脚本开始时调用 updateProgress() 函数
  echo "<script>updateProgress();</script>";

  // 执行模拟脚本
  for ($i = 0; $i < 5; $i++) {
      echo "Script running...<br>";
      sleep(1);
  }

  // 在脚本结束时再次调用 updateProgress() 函数
  echo "<script>updateProgress();</script>";
  ?>

</body>
</html>

在这个示例中，我们先引用了 Bootstrap 的 CSS 和 JS 文件，在 head 中对进度条元素进行了定义，接着在 body 中调用了 updateProgress() 函数和模拟脚本。在服务端脚本的开始和结束时，我们也分别调用了 updateProgress() 函数，从而实现了实时更新进度条的功能。