`

Ajax制作Web进度条

 
阅读更多

Ajax制作Web进度条

1.index.jsp

复制代码
  1 <%@ page language="java" pageEncoding="UTF-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3 <html>
  4   <head>
  5     <script type="text/javascript" language="javaScript">
  6       var bgcolor = '#7FFF00'; //全局变量，用于设置进度条的背景色
  7       var number; //全局变量，用于记录当前span序号
  8       var clear = "&nbsp;&nbsp;&nbsp;"; //全局变量，记录清空时的内容
  9       var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
 10       function createXMLHttpRequest() { //创建XMLHttpRequest对象的方法
 11         if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法
 12           try {
 13             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 14           } catch(e) {
 15             try {
 16               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 17                //旧版本的Inetrnet Explorer，创建XMLHttpRequest对象
 18             } catch(e) {
 19               window.alert("创建XMLHttpRequest对象错误"+e);
 20             } 
 21           }
 22         } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
 23           xmlHttp = new XMLHttpRequest();
 24         } 
 25         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
 26             window.alert("创建XMLHttpRequest对象异常！");
 27         }  
 28       }
 29 
 30       //启动进度条的方法
 31       function startRun() {
 32         createXMLHttpRequest(); //创建XMLHttpRequest对象
 33         clearBar(); //执行请求前先清除进度条
 34         xmlHttp.onreadystatechange = callBack;
 35         //指定onreadystatechange属性值，用于指定状态正常时的处理函数
 36         xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=start", true);
 37         xmlHttp.send(null);
 38       }
 39       
 40       //开始进行进度条显示的处理函数
 41       function callBack() {
 42           //window.alert("callBack()");
 43         if(xmlHttp.readyState == 4) {
 44            if(xmlHttp.status == 200) { //status状态正常时
 45              setTimeout("aginRun()",1000);
 46             //每隔1000毫秒（1秒）执行一次“aginRun()”函数
 47            }
 48         }
 49       }
 50 
 51       //清除用于显示进度条的span的内容
 52       function clearBar() {
 53         for (var i=0;i<10;i++) { //根据span元素的id，分别清楚其显示内容
 54           var sp = document.getElementById("sp" + i);
 55           sp.innerHTML = clear; //首先清空span元素的内容
 56           sp.style.backgroundColor = "white"; //设置span元素的背景色
 57         }
 58       }
 59       //设置用于显示进度条的span元素的显示内容
 60       function aginRun() {
 61         createXMLHttpRequest(); //创建XMLHttpRequest对象
 62         xmlHttp.onreadystatechange = aginCallBack;
 63         //指定状态正常时的处理函数为“aginCallBack”
 64         document.getElementById("run").disabled=true; //设置按钮不可用
 65         xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=run", true);
 66         //window.alert(" " + number);
 67         xmlHttp.send(null);
 68       }
 69 
 70       //进度条执行时的函数
 71       function aginCallBack() {
 72         if(xmlHttp.readyState==4) {
 73           if(xmlHttp.status==200) {
 74             var percent = 
 75             xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
 76            //记录当前完成比例
 77             var index = parseResult(percent); //解析结果集
 78             var nextCell = 1;
 79             for (var i=0; i<index; i++) { //遍历span元素集合，设置其内容（颜色与文字）
 80               var sp = document.getElementById("sp"+i);
 81             //根据每个span元素的id获取span对象
 82               sp.innerHTML= clear; //清空span元素内容
 83               sp.style.backgroundColor = bgcolor; //设置span元素的内容
 84               nextCell = i+1;
 85               if(nextCell>=index && nextCell<10) { //显示当前处理进度的百分比
 86                 document.getElementById("sp"+nextCell).innerHTML=percent+"%";
 87               }
 88             }
 89             if(index<10) { //索引小于10，设置setTimeout方法
 90                setTimeout("aginRun()",1000);
 91             } else { //索引大于10，设置进度条成功完成的页面效果
 92                document.getElementById("result").innerHTML = "OK!";
 93                document.getElementById("run").disabled = false;
 94             }
 95           }
 96         }
 97       }
 98 
 99       //解析结果集
100       function parseResult(result) {
101         if(result.length<1) {
102           return 1;
103         } else if(result.length==2) {
104           return result.substring(0,1);
105         } else {
106           return 10;
107         }
108       }
109     </script>
110     <title>Ajax进度条</title>
111   </head>
112   <body>
113    <table align="center">
114             <tr>
115               <td>Ajax进度条示例&nbsp;&nbsp;&nbsp;<input type="button" value="开始" id="run" onclick="startRun();"/></td>
116             </tr>
117             <tr>
118               <td>
119               <div id="processBar" style="padding:1px;border:solid black 1px;">
120                <span id="sp0">&nbsp;&nbsp;&nbsp;</span>
121                <span id="sp1">&nbsp;&nbsp;&nbsp;</span>
122                <span id="sp2">&nbsp;&nbsp;&nbsp;</span>
123                <span id="sp3">&nbsp;&nbsp;&nbsp;</span>
124                <span id="sp4">&nbsp;&nbsp;&nbsp;</span>
125                <span id="sp5">&nbsp;&nbsp;&nbsp;</span>
126                <span id="sp6">&nbsp;&nbsp;&nbsp;</span>
127                <span id="sp7">&nbsp;&nbsp;&nbsp;</span>
128                <span id="sp8">&nbsp;&nbsp;&nbsp;</span>
129                <span id="sp9">&nbsp;&nbsp;&nbsp;</span>
130               </div>
131               </td>
132             </tr>
133             <tr><td align="center" id="result"></td> </tr>
134     </table>
135   </body>
136 </html>
复制代码

2.ProcessServlet.java

复制代码
 1 public class ProcessServlet extends HttpServlet {
 2     
 3     private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
 4 //设置返回响应的ContentType
 5     private int count = 1;// 全局变量计数器
 6     /**
 7      *当前Servlet对象构造方法
 8      */
 9     public ProcessServlet() {
10         super();
11     }
12     /**
13      *当前Servlet销毁时的操作。<br>
14      */
15     public void destroy() {
16         super.destroy();
17     }
18     /**
19      *当前Servlet的doGet方法。<br>
20      *
21      *当客户端表单的“method”类型为“get”时，调用此方法
22      * 
23      * @param request客户端请求对象
24      * @param response 服务器响应对象
25      * @throws ServletException 发生ServeltException时抛出
26      * @throws IOException发生IOException时抛出
27      */
28     public void doGet(HttpServletRequest request, HttpServletResponse response)
29             throws ServletException, IOException {
30         System.out.println("*********************doGet()**********");
31         response.setContentType(CONTENT_TYPE); //设置服务器响应类型
32         response.setHeader("Cache-Control","no-cache"); //页面不记录缓存
33         String flag = request.getParameter("flag"); //操作类型
34         StringBuffer xml= 
35 //            new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?><items>");
36             new StringBuffer("<items>");
37         //记录返回的xml串
38         if("start".equals(flag)) { //第一次创建
39 //            xml.append("<count>1</count>");
40             count = 1;
41         } else {
42             String proportion = "";
43             switch(count) { //根据计数器的值，设置显示当前进度的百分比
44               case 1:proportion="10"; break;
45               case 2:proportion="20"; break;
46               case 3:proportion="30"; break;
47               case 4:proportion="40"; break;
48               case 5:proportion="50"; break;
49               case 6:proportion="60"; break;
50               case 7:proportion="70"; break;
51               case 8:proportion="80"; break;
52               case 9:proportion="90"; break;
53               case 10:proportion="100"; break;
54             }
55             count++;
56             xml.append("<percent>").append(proportion).append("</percent>");
57         }
58         xml.append("</items>");
59         PrintWriter out = response.getWriter();
60         out.println(xml.toString()); //返回生成的XML串
61         out.flush(); //输出流刷新
62         out.close(); //关闭输出流
63         System.out.println("*********** " + xml.toString());
64     }
65 
66     /**
67      * 初始化servlet. <br>
68      * @throws ServletException 发生ServletExcpetio异常时抛出
69      */
70     public void init() throws ServletException {
71     }
72 }
复制代码

3.web.xml

复制代码
 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7     <servlet>
 8     <servlet-name>ProcessServlet</servlet-name>
 9     <servlet-class>wen.ProcessServlet</servlet-class>
10   </servlet>
11   <servlet-mapping>
12     <servlet-name>ProcessServlet</servlet-name>
13     <url-pattern>/servlet/ProcessServlet</url-pattern>
14   </servlet-mapping>
15     
16   <welcome-file-list>
17     <welcome-file>index.jsp</welcome-file>
18   </welcome-file-list>
19 </web-app>
复制代码
分享到：
| 看几道JQuery试题后总结（上篇）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JSP进度条使用线程制作

    总的来说，"JSP进度条使用线程制作"项目是一个实用的示例，它教你如何在Java Web应用中实现一个交互式的进度条，提高用户界面的反馈效果，提升用户体验。通过学习和研究这个项目，开发者可以更好地理解和掌握JSP、多...

    jQuery模拟页面加载进度条

    首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大工具。对于页面加载进度条的实现，我们可以利用jQuery的事件...

    用图片做的进度条（适用于投票栏目）

    AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，这正是制作动态进度条的关键。通过AJAX，我们可以实时更新进度条的百分比，比如每投一票，进度条就相应地前进一点，这样用户可以直观看到...

    asp.net实现进度条

    ASP.NET 是一种强大的 Web 应用程序开发框架，由微软公司提供，用于构建动态、数据驱动的 Web 应用程序。在 ASP.NET 中实现进度条功能可以极大地提升用户体验，尤其是在处理长时间运行的任务时，如文件上传、大数据...

    《Ajax应用开发典型实例》

    由浅入深、循序渐进地介绍基于Ajax组合查实例、调查程序文例、天气预报实例、会员注册登录验证、股票价格查询、无刷新新闻系统、滚动翻页、上传文件进度条、Ajax调用Web Service应用实例、RSS阅读器实例等的详细制作...

    征服ASP.NET 2.0 Ajax——Web开发技术详解(光盘使用说明)

    根据提供的信息，《征服ASP.NET 2.0 Ajax——Web开发技术详解》这本书旨在全面介绍如何利用ASP.NET 2.0结合Ajax进行高效、现代化的Web开发。书中通过丰富的示例来帮助读者掌握这一领域的关键技术。 ##### 运行环境 ...

    《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》源代码

    第1章 设计Web标准网页 1.1 设个人主页 1.2 设计CSS 1.3 设计新闻查看页面 1.4 设计博客网站首页 1.5 CSS设计页面布局 第2章 应用Spry框架 2.1 制作二级导航菜单 2.2 制作图片展示 2.3 制作常识问答 2.4 制作Spry...

    [多文件上传][显进度条][JQ+FLASH+ASP.NET]

    在IT行业中，多文件上传和显示进度条是常见的功能需求，尤其在Web应用程序中，能够提升用户体验。本项目结合了JavaScript库jQuery、Flash技术以及后端的ASP.NET框架，实现了一个高效、用户友好的文件上传解决方案。...

    Java 进度条制作

    在Java Web开发中，制作进度条通常涉及到前端与后端的交互，以及多线程的运用。本示例以"Java 进度条制作"为主题，通过JSP（JavaServer Pages）来展示一个动态更新的进度条效果。下面将详细阐述相关知识点。 1. **...

    jQueryj进度条

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。jQueryj进度条则是jQuery库中一个用于创建动态、视觉吸引人的进度条效果的功能。这种效果通常用于展示...

    基于HTML5 SVG的炫酷进度条插件

    jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画制作和Ajax交互。在这款插件中，jQuery可能被用来选择SVG元素，控制其样式和行为，实现进度条的动态更新。例如，使用`.animate()`方法可以创建...

    jQueryCSS3带阴影的3D进度条插件

    首先，jQuery是一款强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。jQuery的核心理念是“Write Less, Do More”，通过简化的语法，开发者可以快速地实现复杂的页面功能。 CSS3则...

    带进度条的JQ超炫上传图片插件

    jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。它的API设计使得开发者可以更轻松地处理复杂的DOM操作，而无需编写大量代码。 然后，我们关注的是图片上传。在Web...

    jquery进度条带flash动画效果的jquery轻量级进度条

    因此，尽管这个项目结合了jQuery和Flash，但考虑到兼容性和未来趋势，开发者现在更倾向于使用纯JavaScript或者基于Web Animation API的解决方案来创建进度条动画，而不是依赖Flash。 总之，"jquery进度条带flash...

    几十种 gif 动态进度条图片集，

    对于Web开发，"ajax_img"可能指的是与Ajax（Asynchronous JavaScript and XML）技术相关的图像。Ajax是一种创建动态网页的技术，允许部分页面更新，而不必重新加载整个页面。在Ajax请求中，动态进度条可以很好地指示...

    TweenMax.js+jQuery弹性滑动动画进度条特效

    TweenMax.js是由GreenSock公司开发的一个高级动画库，它提供了丰富的缓动函数和强大的时间线管理，使得动画制作更加便捷。jQuery则是一个轻量级的JavaScript库，简化了DOM操作、事件处理和Ajax交互。 在这个...

    jquery ajax file upload

    在Web开发中，jQuery AJAX File Upload 是一个常见且实用的技术，它允许用户在不刷新整个页面的情况下上传文件。这一技术极大地提升了用户体验，因为用户可以一边浏览网页，一边进行文件上传，提高了交互性和效率。...

    自己动手制作基于jQuery的Web页面加载进度条插件

    本知识点将详细讲解如何利用jQuery这一流行的JavaScript库来制作一个Web页面加载进度条插件。 ### 知识点1：页面加载进度条的作用 页面加载进度条可以为用户提供直观的加载反馈，让用户明确知道页面加载的进展情况...

    为你的Web程序加个启动画面

    综上所述，为Web程序添加启动画面是通过模拟进度条和动态更新视觉元素来提高用户体验的一种方法。虽然无法获取确切的页面加载进度，但我们可以通过创建动态的、模拟的进度条来让用户感受到程序的运行状态，从而提升...

    flah上传进度条.rar

    首先，**Flash**是一种曾经广泛使用的交互式内容创建平台，它允许开发者制作动画、游戏以及富媒体应用，包括在网络浏览器中实现文件上传功能。在HTML5出现之前，Flash是实现动态交互效果的主要工具，尤其是对于那些...

Magicbox
Global site tag (gtag.js) - Google Analytics