编程 Javascript

使用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页面进度条的实例分享

- Author -

Arison

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery中:nth-child选择器用法实例

Dec 31 Javascript

jQuery中 prop() attr()使用详解

May 19 Javascript

充分发挥Node.js程序性能的一些方法介绍

Jun 23 Javascript

原生js与jQuery实现简单的tab切换特效对比

Jul 30 Javascript

jQuery.deferred对象使用详解

Mar 18 Javascript

微信小程序用户数据解密详细介绍

Jan 09 Javascript

js数字滑动时钟的简单实现(示例讲解)

Aug 14 Javascript

原生JS实现Ajax跨域请求flask响应内容

Oct 24 Javascript

Angular2使用SVG自定义图表（条形图、折线图）组件示例

May 10 Javascript

js+html实现周岁年龄计算器

Jun 25 Javascript

Vue项目中如何使用Axios封装http请求详解

Oct 23 Javascript

微信小程序服务器日期格式化问题

Jan 07 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

模拟SQLSERVER的两个函数：dateadd(),datediff()

2006/10/09 PHP

php 把数字转换成汉字的代码

2015/07/21 PHP

利用PHP如何写APP接口详解

2016/08/23 PHP

PHP面向对象之领域模型+数据映射器实例(分析)

2017/06/21 PHP

Laravel5框架自定义错误页面配置操作示例

2019/04/17 PHP

thinkphp5.1框架容器与依赖注入实例分析

2019/07/23 PHP

如何让动态插入的javascript脚本代码跑起来。

2007/01/09 Javascript

仿163填写邮件地址自动显示下拉（无优化）

2008/11/05 Javascript

JQ获取动态加载的图片大小的正确方法分享

2013/11/08 Javascript

jQuery jcrop插件截图使用方法

2013/11/20 Javascript

js如何设置在iframe框架中指定div不显示

2013/12/04 Javascript

解析JSON对象与字符串之间的相互转换

2013/12/18 Javascript

jQuery mobile 移动web(6)

2015/12/20 Javascript

AngularJS基础 ng-submit 指令简单示例

2016/08/03 Javascript

Bootstrap作品展示站点实战项目2

2016/10/14 Javascript

web打印小结

2017/01/11 Javascript

详解nodejs微信jssdk后端接口

2017/05/25 NodeJs

在vue项目中使用md5加密的方法

2018/09/14 Javascript

基于Vue SEO的四种方案(小结)

2019/07/01 Javascript

小程序如何在不同设备上自适应生成海报的实现方法

2019/08/20 Javascript

vue项目中自定义video视频控制条的实现代码

2020/04/26 Javascript

python 二分查找和快速排序实例详解

2017/10/13 Python

通过PHP与Python代码对比的语法差异详解

2019/07/10 Python

python实现tail实时查看服务器日志示例

2019/12/24 Python

Selenium常见异常解析及解决方案示范

2020/04/10 Python

收集的22款给力的HTML5和CSS3帮助工具

2012/09/14 HTML / CSS

美国家居装饰店：Z Gallerie

2020/12/28 全球购物

专升本个人自我评价

2013/12/22 职场文书

医药销售自我评价200字

2014/09/11 职场文书

购房委托书

2014/10/15 职场文书

高校教师个人总结

2015/02/10 职场文书

CSS实现多个元素在盒子内两端对齐效果

2021/03/30 HTML / CSS

浅谈Python协程asyncio

2021/06/20 Python

JavaScript利用html5新方法操作元素类名详解

2021/11/27 Javascript

利用JuiceFS使MySQL 备份验证性能提升 10 倍

2022/03/17 MySQL

MySQL视图概念以及相关应用

2022/04/19 MySQL