使用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 相关文章推荐
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Vue路由切换时的左滑和右滑效果示例
May 29 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中用foreach来操作数组的代码
2011/07/17 PHP
php通过字符串调用函数示例
2014/03/02 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python安装教程
2018/02/28 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
静心口服夜广告词
2014/03/20 职场文书
家长会学生演讲稿
2014/04/26 职场文书
酒店端午节活动方案
2014/08/26 职场文书
写给医院的感谢信
2015/01/22 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
python使用BeautifulSoup 解析HTML
2022/04/24 Python