使用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 脚本将当地时间转换成其它时区
Mar 19 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
理解javascript中DOM事件
Dec 25 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解Puppeteer 入门教程
May 09 Javascript
vue中的适配px2rem示例代码
Nov 19 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php实现Mysql简易操作类
2015/10/11 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
js中作用域的实例解析
2017/03/16 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python使用filetype精确判断文件类型
2017/07/02 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
2014年党员自我剖析材料
2014/10/07 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
技术入股合作协议书
2016/03/21 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
Python内置的数据类型及使用方法
2022/04/13 Python