<html xmlns="">
<head> <style> #divProgress{width:300px;height:24px;position:relative;} #divProgress div{position:absolute;left:0;top:0;height:24px;} #progressBg{background-color:#B9F8F9;z-index:10;} #progressText{z-index:15;text-align:center;width:100%;} </style> </head> <body> <div id="divProgress"> <div id="progressBg"></div> <div id="progressText"></div> </div> <br /> <button οnclick="send()">�ύ���</button> <script> var t = document.getElementById("progressText"); var bg = document.getElementById("progressBg"); function send(){ t.innerHTML = "loading..."; bg.style.width = "0px"; var xhr = new window.XMLHttpRequest(); if(!window.XMLHttpRequest){ try { xhr = new window.ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} } xhr.open("post","index.jsp?count=6"); var oldSize=0; xhr.onreadystatechange = function(){ if(xhr.readyState > 2){ var tmpText = xhr.responseText.substring(oldSize); oldSize = xhr.responseText.length; if(tmpText.length > 0 ){ t.innerHTML = tmpText + "/6"; var width = parseInt(tmpText)/6*300; bg.style.width = width+"px"; } } if(xhr.readyState == 4){t.innerHTML = "ִ�����";
bg.style.width = "300px"; } } xhr.send(null); } </script> </body> </html>
服务端：
index.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% // 下面设置Content-Type:application/x-javascript 是为了适应Webkit的浏览器(chrome,safari) response.setHeader("Content-Type","application/x-javascript"); int count = 6; // 处理6条数据 for(int i=0;i<count;i++){ // 处理完毕一条，输出结果到客户端 out.println(i+1); out.flush(); // 这里假设每条数据处理时间为1秒 Thread.currentThread().sleep(1000); } %>