实现基本Ajax技术 4.5 显示进度条


 无一例外地,几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性,就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用,对于长时间运行事务的问题,解决办法很简单:只需显示一个进度条,以便用户知道目前所处状况。不过,在Ajax之前,要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。

  在代码清单4-9所示的例子中,再次在pollCallback()方法中使用了setTimeout(),从而每隔2秒调用一次服务器。在processResult()方法中,只是从服务器查找已完成比例(百分数)的第一位数字,从而得出要将进度条中的哪些进度块着色(灰色)。

  代码清单4-9 progressBar.html

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>Ajax Progress Bar</title>
  <script type="text/javascript">
  var xmlHttp;
  var key;
  var bar_color = 'gray';
  var span_id = "block";
  var clear = "&nbsp;&nbsp;&nbsp;"
  function createXMLHttpRequest() {
  if (window.ActiveXObject) {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
  }
  }
  function go() {
  createXMLHttpRequest();
  checkDiv();
  var url = "ProgressBarServlet?task=create";
  var button = document.getElementById("go");
  button.disabled = true;
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = goCallback;
  xmlHttp.send(null);
  }
  function goCallback() {
  if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
  setTimeout("pollServer()", 2000);
  }
  }
  }
  function pollServer() {
  createXMLHttpRequest();
  var url = "ProgressBarServlet?task=poll&key=" + key;
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = pollCallback;
  xmlHttp.send(null);
  }
  function pollCallback() {
  if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
  var percent_complete =
   xmlHttp.responseXML
   .getElementsByTagName("percent")[0].firstChild.data;
  var index = processResult(percent_complete);
  for (var i = 1; i <= index; i++) {
  var elem = document.getElementById("block" + i);
  elem.innerHTML = clear;
  elem.style.backgroundColor = bar_color;
  var next_cell = i + 1;
  if (next_cell > index && next_cell <= 9) {
  document.getElementById("block" + next_cell)
  .innerHTML =
  percent_complete + "%";
  }
  }
  if (index < 9) {
  setTimeout("pollServer()", 2000);
  } else {
  document.getElementById("complete").innerHTML = "Complete!";
  document.getElementById("go").disabled = false;
  }
  }
  }
  }
  function processResult(percent_complete) {
  var ind;
  if (percent_complete.length == 1) {
  ind = 1;
  } else if (percent_complete.length == 2) {
  ind = percent_complete.substring(0, 1);
  } else {
  ind = 9;
  }
  return ind;
  }
  function checkDiv() {
  var progress_bar = document.getElementById("progressBar");
  if (progress_bar.style.visibility == "visible") {
  clearBar();
  document.getElementById("complete").innerHTML = "";
  } else {
  progress_bar.style.visibility = "visible"
  }
  }
  function clearBar() {
  for (var i = 1; i < 10; i++) {
  var elem = document.getElementById("block" + i);
  elem.innerHTML = clear;
  elem.style.backgroundColor = "white";
  }
  }
  </script>
  </head>
  <body>
  <h1>Ajax Progress Bar Example</h1>
  Launch long-running process:
   <input type="button" value="Launch" id="go" onclick="go();"/>
  <p>
  <table align="center">
  <tbody>
  <tr><td>
  <div id="progressBar"
  style="padding:2px;border:solid black 2px;visibility:hidden">
  <span id="block1">&nbsp;&nbsp;&nbsp;</span>
  <span id="block2">&nbsp;&nbsp;&nbsp;</span>
  <span id="block3">&nbsp;&nbsp;&nbsp;</span>
  <span id="block4">&nbsp;&nbsp;&nbsp;</span>
  <span id="block5">&nbsp;&nbsp;&nbsp;</span>
  <span id="block6">&nbsp;&nbsp;&nbsp;</span>
  <span id="block7">&nbsp;&nbsp;&nbsp;</span>
  <span id="block8">&nbsp;&nbsp;&nbsp;</span>
  <span id="block9">&nbsp;&nbsp;&nbsp;</span>
  </div>
  </td></tr>
  <tr><td align="center" id="complete"></td></tr>
  </tbody>
  </table>
  </body>
  </html>

 这个例子的服务器代码“模拟”了一个长时间运行的事务(见代码清单4-10)。在真实环境中,这期间可能还要同时创建多个新实例并注册,之前还需要客户发出请求。为简单起见,我们忽略了这点,也没有编写线程代码。

 

本文作者:



相关阅读:
CSS网页布局实例:三栏等高布局
select发展史 超强
Win 2003如何应用组策略和安全模板
javascript实例教程(3-1)
SQL SERVER的数据类型
缓存PHP页面代码 可减轻CPU和MYSQL负担
Ubuntu RED5出现HTTP ERROR:404错误
RHEL AS 4系统应用:web服务器篇
ubuntu中trackerd的进程狂耗资源解决办法
Linux系统下SSH连接登陆延时的解决
c#中带头(声明)的xml(封装)生成
数据库开发者常犯的十大错误,你有吗?
各种跨浏览器兼容的CSS编码准则和技巧
优化代码 改善CSS文件可读性
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4