这个进度条怎么做

firstDemo 2010-08-12 03:38:53

我们系统在用户登录后加载了很多用户的信息以及系统的信息
所以在输入用户名和密码后点确定要等挺久才能看到我们系统的首页，
我想做个进度条显示，
，
主要是后台执行到哪步根本不清楚，系统采用的struts2，在登录后是一个action来处理用户的信息以及加载一些别的系统信息，至于这个action执行到哪步了根本不知道

思路不明
请各位大虾帮忙给些意见

...全文

250 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

firstDemo 2010-08-18

打赏
举报

谢谢各位的回复，ext现在不是要收费了吗，后来弄了个gif图片

myloveyoyo1314 2010-08-13

打赏
举报

不会用到那么长时间吧如果时间短弄个图片显示加载中就好了啊如果你的程序登陆需要等待几分钟那么... 别做了算了

sustbeckham 2010-08-13

打赏
举报

可以考虑EXTJS 的特效

ibookvip 2010-08-13

打赏
举报

思路：1.服务端响应整个的数据量
2.客户端计算已下载数据量，百分比显示在UI上

好吃的松子 2010-08-13

打赏
举报

建议还是优化登录逻辑为好。把一些不是用户独享的数据提出来放在别的地方处理。

hexing_x 2010-08-13

打赏
举报

如果不是要等1分钟以上别做了，显示正在登陆就可以了！
如果非要做可以用JQuery做

aisino_hjp 2010-08-13

打赏
举报

用AJAX的框架很容易实现
4.5 显示进度条

无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。

在代码清单4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，从而每隔2秒调用一次服务器。在processResult()方法中，只是从服务器查找已完成比例（百分数）的第一位数字，从而得出要将进度条中的哪些进度块着色（灰色）。

代码清单4-9 progressBar.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Ajax Progress Bar</title>

<script type="text/javascript">

var xmlHttp;

var key;

var bar_color = 'gray';

var span_id = "block";

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 = "ProgressBarServlet?task=create";

var button = document.getElementById("go");

button.disabled = true;

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 = "ProgressBarServlet?task=poll&key=" + key;

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 = "Complete!";

document.getElementById("go").disabled = false;

}

}

}

}

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>

<h1>Ajax Progress Bar Example</h1>

Launch long-running process:

<input type="button" value="Launch" id="go" onclick="go();"/>

<p>

<table align="center">

<tbody>

<tr><td>

<div id="progressBar"

style="padding:2px;border:solid black 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>

这个例子的服务器代码“模拟”了一个长时间运行的事务（见代码清单4-10）。在真实环境中，这期间可能还要同时创建多个新实例并注册，之前还需要客户发出请求。为简单起见，我们忽略了这点，也没有编写线程代码。

代码清单4-10 ProgressBarServlet.java

package ajaxbook.chap4;

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ProgressBarServlet extends HttpServlet {

private int counter = 1;

/** Handles the HTTP <code>GET</code> method.

* @param request servlet request

* @param response servlet response

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String task = request.getParameter("task");

String res = "";

if (task.equals("create")) {

res = "<key>1</key>";

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();

}

}

图4-10显示了实际工作中的进度条，图4-11显示了完成时的情况。

图4-10 进度条示例

图4-11 进度条完成