ajax进度条

最新推荐文章于 2024-05-06 17:34:57 发布
最新推荐文章于 2024-05-06 17:34:57 发布
阅读量1.4k 收藏
点赞数
分类专栏： Java 文章标签： ajax action encoding button null div

1.进度条由DIV框和数个有背景颜色的SPAN组成；
2.初始化时DIV不可见，SPAN背景色与网页背景色一致；
3.根据服务器返回的进度百分比，计算出应显示几个SPAN块，并为SPAN块设置背景色；



progressBar.html:

程序代码 程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ProgressBar</title>
    <script type="text/javascript" src="js/progressBar.js"></script>
</head>
<body>
    <h1>Ajax Progress Bar</h1>
    <input id="btn" type="button" value="Start" onClick="doStart();" />
    <br /><br />
    <div id="bar" style="width:156px; border:#000000 2px solid; padding:1px; visibility:hidden;">
        <span id="bar1" style="background-color:#FFFFFF">   </span>
        <span id="bar2" style="background-color:#FFFFFF">   </span>
        <span id="bar3" style="background-color:#FFFFFF">   </span>
        <span id="bar4" style="background-color:#FFFFFF">   </span>
        <span id="bar5" style="background-color:#FFFFFF">   </span>
        <span id="bar6" style="background-color:#FFFFFF">   </span>
        <span id="bar7" style="background-color:#FFFFFF">   </span>
        <span id="bar8" style="background-color:#FFFFFF">   </span>
        <span id="bar9" style="background-color:#FFFFFF">   </span>
        <span id="bar10" style="background-color:#FFFFFF">   </span>
        
    </div>
    <br />
    <div id="result"></div>
</body>
</html>



progressBar.js:

程序代码 程序代码

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function doStart() {
    init();
    document.getElementById("bar").style.visibility = "visible";
}

function init() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleChange;
    var url = "progressBar.mgc?action=init×tamp=" + new Date().getTime();
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function handleChange() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            refresh();
        }
    }
}

function refresh() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = callback;
    var url = "progressBar.mgc?action=run×tamp=" + new Date().getTime();
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    setTimeout("refresh()", "500");
}

function callback() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            parseResult();
        }
    }
}

function parseResult() {
    var xmlDoc = xmlHttp.responseXML;
    var pros = xmlDoc.getElementsByTagName("progress");
    var result = "";
    for (var i = 0; i < pros.length; i++) {
        var massage = pros[i].childNodes[0].childNodes[0].nodeValue;
        var percent = pros[i].childNodes[1].childNodes[0].nodeValue;
        result += massage + "[" + percent + "%]" + "<br />";
    }
    document.getElementById("result").innerHTML = result;
    clearBar();
    var percents = xmlDoc.getElementsByTagName("percent");
    var nowPercent = percents[percents.length - 1].childNodes[0].nodeValue;
    var count = parseInt(nowPercent / 10);
    for (var i = 0; i <= count; i++) {
        if (i != 0) {
            var bar = document.getElementById("bar" + i);
            bar.style.backgroundColor = "#bababa";
        }
    }
}

function clearBar() {
    for (var i = 1; i <= 10; i++) {
        var bar = document.getElementById("bar" + i);
        bar.style.backgroundColor = "#FFFFFF";
    }
}



progressBar.java:

程序代码 程序代码

package cn.edu.ahau.mgc.ajax.progressbar;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProgressBar extends HttpServlet {
    
    private int count;
    private StringBuffer str;
    public static final int TOTAL = 25;

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        if ("init".equals(action)) {
            this.count = 1;
            this.str = new StringBuffer();
        } else if ("run".equals(action)) {
            if (this.count <= TOTAL) {
                int percent = count * 100 / TOTAL;
                str.append("<progress><massage> 完成了 " + (this.count++) + "个任务</massage><percent>" + percent + "</percent></progress>");
            }
            response.setContentType("text/xml; charset=UTF-8");
            response.setHeader("Cache-Control", "no-cache");
            PrintWriter out = response.getWriter();
            out.print("<response>" + str + "</response>");
            out.flush();
            out.close();
        }
    }

}



web.xml:

程序代码 程序代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ProgressBar</servlet-name>
    <servlet-class>cn.edu.ahau.mgc.ajax.progressbar.ProgressBar</servlet-class>
  </servlet>







  <servlet-mapping>
    <servlet-name>ProgressBar</servlet-name>
    <url-pattern>/progressBar.mgc</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
socoolfj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax进度条(非常实用)
08-31
ajax进度条.doc ajax进度条.doc
Ajax制作Web进度条
weixin_34415923的博客
05-24 66
1.index.jsp 1 &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; 2 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; 3 &lt;html&gt; 4 &lt;head&gt; 5
Ajax显示进度条
hty68024352的专栏
05-06 194
文件一览 progressBar.html ProgressBarServlet.java progressBar.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;h...
Ajax进度条
David's Blog!
04-09 5529
共需要3个文件,ProgressBarServlet.java,web.xml,progressBar.html;林,如果没看太明白,我会多写点注释...---ProgressBarServlet.javapackage dawei;import java.io.IOException;import java.io.PrintWriter;import javax.servle
AJAX 进度条实现代码
10-29
AJAX 进度条实现代码，基于java后来，大家可以学习下。
Ajax 进度条
12-30
在asp.net下显示进度条，在查询数据等操作时，自动加载进度条，提高用户体验.zip
Ajax 实现加载进度条
10-20
本文给大家介绍ajax实现加载进度条效果，非常不错，具有参考借鉴价值，需要的朋友参考下
ajax进度条，实现很炫的效果
08-05
可用于站点中，使网站更加具备交互性，使用简单，直接插入原代码的相应位置即可
Ajax - 显示进度条
lin49940的专栏
08-16 2894
4.5  显示进度条无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。在代码清单4-9所示的例子
Ajax实现进度条
07-18 7869
     业务逻辑：在web应用建立进度条。    页面：progressBar.jspAjax进度条 //xmlHttpRequest对象 var xmlHttp; var key;        //进度条颜色        var bar_color=gray;  var span_id=block;         var clear="   
AJAX 数据传输进度条设计与实现
hahahhahahahha123456的博客
06-08 3180
AJAX 无疑是主流的客户端和服务器端通信的方式，AJAX 通信方式当然有很多优点，但是缺点也一定程度上是由优点造成的，因为AJAX 通信过程中，页面不会全局刷新，这在传输的数据量比较小且网速比较好的时候，是没有什么问题的，但是当数据量比较大的时候，页面就会长时间没有任何反应，可能让用户误以为请求失败，所以在数据传输没有完成的等待时间内，我们以一个进度条或者缓冲环给用户以正在通信的可视化效...
数据交换和异步请求(JSON&Ajax))
vV_Leon的博客
05-06 809
数据交换异步请求技术
node-v5.11.1-sunos-x64.tar.xz
最新发布
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于BP用matlab实现车牌识别.zip
05-09
基于MATLAB的系统
Java毕业设计-基于SSM框架的学生宿舍管理系统(源码+演示视频+说明).rar
05-09
Java毕业设计-基于SSM框架的学生宿舍管理系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：ssm+vue 架构：B/S 数据库：mysql 【演示视频-编号：445】 https://pan.quark.cn/s/b3a97032fae7
HTML+CSS+JS小项目集合.zip
05-09
html Tab切换 检测浏览器 事件处理 拖拽 Cookie JavaScript模板 canvas canvas画图 canvas路径 WebGL示例 HTML5+CSS3 照片墙 幽灵按钮 综合实例 100du享乐网 高仿小米首页
jquery实现ajax进度条请求加载
12-06
以下是使用jQuery实现ajax进度条请求加载的示例代码： ```javascript // 显示进度条 $(document).ajaxStart(function() { $('.progressbar .bar').css('width', '5%'); $('.progressbar').fadeIn(); }); // 隐藏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值