使用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 multiSelect 多选下拉框
Jul 09 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解vue中的computed的this指向问题
Dec 05 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Javascript webpack动态import
Apr 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
利用PHP创建动态图像
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Pygame的程序开始示例代码
2020/05/07 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
车间副主任岗位职责
2013/12/24 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
好员工观后感
2015/06/17 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python 如何实现文件自动去重
2021/06/02 Python
Java实现多文件上传功能
2021/06/30 Java/Android