<html xmlns="http://www.w3.org/1999/xhtml"> <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 onclick="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); } %> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|