使用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 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
angular.element方法汇总
Jan 07 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
js如何打印object对象
2015/10/16 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python排序算法实例代码
2017/08/10 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
为什么会有内存对齐
2016/10/10 面试题
财务经理的岗位职责
2013/12/17 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
租房协议书范例
2014/10/14 职场文书
初中中等生评语
2014/12/29 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
python xlwt模块的使用解析
2021/04/13 Python
图解上海144收音机
2021/04/22 无线电