使用AJAX实现Web页面进度条的实例分享


Posted in Javascript onMay 06, 2016

在应用程序的安装和下载过程中,进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度,可以用百分比或数字表示,可以水平放置。利用Ajax技术创建进度条,功能显得更加强大的快捷。
现在创建一个实例,以演示使用Ajax技术实现进度条。该实例同样可以分为客户端代码和服务端代码。
 
1,服务端代码   
服务端代码主要实现一句客户端的请求信息,返回相应的百分比数字。打开记事本,输入下列代码:

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意:多用户将共享此变量,此进度条只适合单用户 
%> 
<% 
 String task = request.getParameter("task"); 
  String res = ""; 
   
  if (task.equals("create")) { 
   res = "1"; 
   counter = 1; 
  } 
  else { 
   String percent = ""; 
   switch (counter) { 
    case 1: percent = "10"; break; 
    case 2: percent = "23"; break; 
    case 3: percent = "35"; break; 
    case 4: percent = "51"; break; 
    case 5: percent = "64"; break; 
    case 6: percent = "73"; break; 
    case 7: percent = "89"; break; 
    case 8: percent = "100"; break; 
   } 
   counter++; 
     
   res = "<percent>" + percent + "</percent>"; 
  } 
   
  // PrintWriter out = response.getWriter(); 
  response.setContentType("text/xml"); 
  response.setHeader("Cache-Control", "no-cache"); 
  out.println("<response>"); 
  out.println(res); 
  out.println("</response>"); 
  out.close();  
%>
 
将上述代码保存,名称为ProgressBar.jsp。在该文件中,声明了一个变量counter,并赋值为1,该变量是进度条返回百分比数字的依据。在下面使用request对象获取客户端传送的变量task的值,如果该值为create,表示需要重新创建进度条,并设定counter的值为1;如果task不是create,则会依据counter的值返回百分比数字,完成一次操作,counter值加1。
 
2,客户端代码
本实例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本,输入下列代码:
<html> 
 <head> 
 <title>JSP+Ajax 进度条</title> 
 <script type="text/javascript"> 
  var xmlHttp; 
  var bar_color = 'blue'; 
  var span_id = "yellow"; 
  var clear = " " 
 
  function createXMLHttpRequest() { 
   if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest();     
   } 
  } 
 
  function go() { 
   createXMLHttpRequest(); 
   checkDiv(); 
   var url = "ProgressBarJsp.jsp?task=create"; 
   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 = "ProgressBarJsp.jsp?task=poll"; 
   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 = "网站已完成加载!"; 
     } 
    } 
   } 
  } 
   
  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 onload="go();"> 
 <h1 align=center>网站正在加载中,请稍候</h1> 
 
 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div id="progressBar" style="padding:2px;border:solid yellow 2px;visibility:hidden"> 
     <span id="block1"> </span> 
     <span id="block2"> </span> 
     <span id="block3"> </span> 
     <span id="block4"> </span> 
     <span id="block5"> </span> 
     <span id="block6"> </span> 
     <span id="block7"> </span> 
     <span id="block8"> </span> 
     <span id="block9"> </span> 
    </div> 
   </td></tr> 
   <tr><td align="center" id="complete"></td></tr> 
  </tbody> 
 </table> 
 </body> 
</html>

将上述代码保存,名称为JspprogressBar.html。在该文件中,JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象,go()函数完成想服务器端发送异步请求,该函数在网页加载时被调用,其主要作用就是通知服务器,并在客户端开始运行进度条。GoCallback()函数主要用于处理服务端的响应,并每隔2秒调用pollServer()函数也是用于向服务端发送异步请求,主要请求服务器端响应的百分数字。PollCallback()函数主要用于处理服务器端响应,即依据服务器端的返回的数字,指定进度条的显示状态。这里需要注意的是,goCallback()函数只执行一次,而PollCallback()函数可以执行多次,其余的三个函数都是实现进度条的辅助函数。
 
3,运行
将上述两个Jsp文件复制到JSP目录下。运行效果图如下:

使用AJAX实现Web页面进度条的实例分享

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
JavaScript中的原型继承基础学习教程
May 06 #Javascript
jquery实现下拉框功能效果【实例代码】
May 06 #Javascript
浅析在javascript中创建对象的各种模式
May 06 #Javascript
jquery自定义插件——window的实现【示例代码】
May 06 #Javascript
javascript创建对象的几种模式介绍
May 06 #Javascript
前端性能优化及技巧
May 06 #Javascript
jquery自定义插件开发之window的实现过程
May 06 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
基于header的一些常用指令详解
2013/06/06 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
node 版本切换的实现
2020/02/02 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
jquery实现广告上下滚动效果
2021/03/04 jQuery
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
Python内置函数locals和globals对比
2020/04/28 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
机关保密承诺书
2014/06/03 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
亲属关系公证书样本
2015/01/23 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python