社区
Java EE
帖子详情
这个进度条怎么做
firstDemo
2010-08-12 03:38:53
我们系统在用户登录后加载了很多用户的信息以及系统的信息
所以在输入用户名和密码后点确定要等挺久才能看到我们系统的首页,
我想做个进度条显示,
,
主要是后台执行到哪步根本不清楚,系统采用的struts2,在登录后是一个action来处理用户的信息 以及加载一些别的系统信息,至于这个action执行到哪步了根本不知道
思路不明
请各位大虾帮忙给些意见
...全文
244
16
打赏
收藏
这个进度条怎么做
我们系统在用户登录后加载了很多用户的信息以及系统的信息 所以在输入用户名和密码后点确定要等挺久才能看到我们系统的首页, 我想做个进度条显示, , 主要是后台执行到哪步根本不清楚,系统采用的struts2,在登录后是一个action来处理用户的信息 以及加载一些别的系统信息,至于这个action执行到哪步了根本不知道 思路不明 请各位大虾帮忙给些意见
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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 进度条完成
泽风
2010-08-13
打赏
举报
回复
只是登录,没必要用滚动条吧!用一个提示等待的就行了吗!用Ajax请求
请求前: var mask = new Ext.LoadMask(Ext.getBody(), {
msg: '请等待........'
});
mask.show();
请求成功: mask.hide();
vinegardou
2010-08-13
打赏
举报
回复
来学习
a154825321
2010-08-13
打赏
举报
回复
高见啊
狂想者
2010-08-13
打赏
举报
回复
学习中。。。。。。。。。
firstDemo
2010-08-12
打赏
举报
回复
谢谢各位的解答,就是思路有点不明,比如文件上传,我可以利用ajax来获得已上传文件和总文件的百分比来设置进度条的百分比,但是这个登陆,后台没有参照物啊
经常在黑云中出没
2010-08-12
打赏
举报
回复
ext,JQuery,都有这种进度条的,用起来也很简单
lc999
2010-08-12
打赏
举报
回复
[Quote=引用 1 楼 w_hanxian 的回复:]
可以考虑下用js的各种框架
[/Quote]
正解
w_hanxian
2010-08-12
打赏
举报
回复
可以考虑下用js的各种框架
易语言画板
做
进度条
易语言画板
做
进度条
源码,画板
做
进度条
《 用VB
做
个漂亮的
进度条
》...
VB之精彩编程-《 用VB
做
个漂亮的
进度条
》
QML自定义
进度条
使用Quick2进行自定义
进度条
动画控制
进度条
移动 封装自定义
进度条
易语言用画板来
做
漂亮的
进度条
源码
资源介绍:。用画板来
做
进度条
鉴于易语言自带的
进度条
超级难看,自己用画板
做
了一个
进度条
。资源作者:。@易语言知识库。资源界面:。资源下载:。
javascript
做
的
进度条
javascript
做
的数据加载
进度条
,只要在数据加载时调用就行
Java EE
67,513
社区成员
225,879
社区内容
发帖
与我相关
我的任务
Java EE
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器,保护我们的业务核心组件(中间件),以延续它的生命力,而不是依赖J2SE/J2EE版本。
复制链接
扫一扫
分享
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器,保护我们的业务核心组件(中间件),以延续它的生命力,而不是依赖J2SE/J2EE版本。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章