首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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页面进度条的实例分享

使用AJAX实现Web页面进度条的实例分享

- Author -

Arison

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

Javascript 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
微信小程序分享小程序码的生成（带参数）以及参数的获取
Mar 25 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
mysql(6) Keras(3) name_scope (1) variable_scope(1) blinker(1) character(1) data(4) 三子棋(2) 字符集(1) 神经网络(7)
You might like
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
js实现无缝轮播图
2020/03/09 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
django模板结构优化的方法
2019/02/28 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python用input输入列表的实例代码
2020/02/07 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
详解Anaconda 的安装教程
2020/09/23 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
音乐教育感言
2014/03/05 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年防汛工作总结
2015/05/15 职场文书
家长通知书家长意见
2015/06/03 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL