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

2024-10-26 16:51:52

在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用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目录下。运行效果图如下：

分享js粘帖屏幕截图到web页面插件screenshot-paste

在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用
Java Web端程序实现文件下载的方法分享

Web文件下载有两种,一种是文件在网站目录下,在浏览器中直接输入文件路径即可下载,如http://www.xxx.com/file.zip.另外一种是文件不在网站目录下或者文件是动态生成的(导出报表或者导出excel等),这种情况需要通过response的OutputStream实现文件的下载.DownloadUtils是一个Java Web文件下载工具类,提供多种静态方法实现文件下载. package com.rhui.util; import java.io.BufferedInputStr
分享提高ASP.NET Web应用性能的技巧

在这篇文章中,将介绍一些提高 ASP.NET Web 应用性能的方法和技巧.众所周知,解决性能问题是一项繁琐的工作,当出现性能问题,每个人都会归咎于编写代码的开发人员. 那性能问题到底该如何解决?以下是应用系统发布前,作为 .NET 开发人员需要检查的点. 1.debug=「false」当创建 ASP.NET Web应用程序,默认设置为「true」.开发过程中,设置为「true」是非常有用多,但在应用程序发布部署时,需将其设置为「false」. <compilation defaultLang
利用jQuery设计一个简单的web音乐播放器的实例分享

一.准备数据库首先,我们设计MYSQL数据库如下: CREATE TABLE `songs` ( `song_id` int(11) NOT NULL AUTO_INCREMENT, `url` varchar(500) NOT NULL, `artist` varchar(250) NOT NULL, `title` varchar(250) NOT NULL, PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AU
一张Web前端的思维导图分享

一张关于Web前端方面的思维导图,留下来备用:
JavaWeb学习笔记分享(必看篇)

自定义列表 <dl></dl>:表示列表的范围 **在里面 <dt></dt>:上层内容 **在里面 <dd></dd>:下层内容有序列表 <ol></ol>:有序列表的范围 --属性 type:设置排序方式,1(默认),a,i.. **在ol标签里面 <li>具体内容</li> 无序列表 <ul></ul>:无序列表的范围 --属性 type:circle(空
PHP Web木马扫描器代码分享

不废话了,直接贴代码了. 代码如下: <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 * * @version 1.0 * 下面几个变量使用前需要手动设置 * **/ /*===================== 程序配置 =====================*/ $pass="test";//设置密码 $jkdir=&quo
使用Lua编写Web端模板引擎的实例代码分享

ltemplate.lua local insert = table.insert local remove = table.remove local concat = table.concat local format = string.format local loaded = {} local partten = "(.-){#([^#].-[^#])#}()" local content = {} local cur_content = nil local function o
java web验证码实现代码分享

验证码的作用:通常的登录或者注册系统时,都会要求用户输入验证码,以此区别用户行为和计算机程序行为,目的是有人防止恶意注册.暴力破解密码等. 实现验证码的思路:用 server 实现随机生成数字和字母组成图片的功能,用 jsp 页面实现显示验证码和用户输入验证码的功能,再用 server 类分别获取图片和用户输入的数据,判断两个数据是否一致. 代码实现 1.编写数字.英文随机生成的 server 类,源码: package com; import java.awt.Color; import j
手机Web APP如何实现分享多平台功能

话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都有针对Android.Ios的SDK,作为开发者,我们只需要将SDK集成的我们的项目中即可,通过提供的外部接口,我们可以很容易的完成分享的功能:web网页呢,网上也存在很多优秀的分享框架,例如:bShare分享 .JiaThis分享:我们可以很方便的集成到我们的项目中:但是手机web页面实现分享就需

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

相关推荐

随机推荐