代码之家 › 专栏 › 技术社区 › Jakub NarÄbski adamtaub

如何实现web应用的“生成…请等待”信息(有或没有JavaScript)

progress-bar web-applications ajax

Jakub NarÄbski adamtaub · 技术社区 · 15 年前

如何实现显示“生成数据…”。。。please wait“信息从web应用程序发送到web浏览器(如果没有缓存数据,则可能需要一些时间来生成响应),是否使用JavaScript(AJAX)?

我对使用AJAX的解决方案(我可以用JavaScript代替加载消息)和只使用服务器进程而不使用JavaScript的解决方案(如果可能的话)都感兴趣。

我想尽快用响应代替加载消息。

6 回复 | 直到 15 年前

Paul Degnan 11 年前

使用Ajax调用很容易实现这一点。在页面上设置一个div以显示“正在生成…”。。。当您第一次进行Ajax调用时,出现“请稍候”消息。(一个简单的缺乏想象力的动画图形就足以提示用户对挂起操作的期望。Convention=understanding=good interface。)然后将一个函数传递给readystatechange处理程序,该处理程序在Ajax请求返回时用消息/进度图形更新div。

function ShowPendingOperation(){

    var resultHolder = document.getElementById( 'statusDiv' );
    resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";

    var request = GXmlHttp.create();
    request.open("post", "/yourScript", true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.onreadystatechange = function() {

        if (request.readyState == 4) {

            resultHolder.innerHTML = "operation complete";
            resultHolder.innerHTML += "result1";
            resultHolder.innerHTML += "result2";
            resultHolder.innerHTML += "etc";

        }

    }

    request.send( 'field1=data1&field2=data2' );

}

注意,上面的代码片段是从为Google地图站点编写的示例代码中提取的,您创建XMLHttpRequest对象的行可能会有所不同。。。

Shawn Steward 15 年前

您需要使用JavaScript来完成此任务,而无需重新加载页面。下面是使用jQuery创建这种效果的示例。

http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/

POST

Mr. Shiny and New å®å® 15 年前

我会这么做:

当您确定必须执行长操作时,启动一个线程,并将该线程与某种ID相关联。不要重复使用ID。
如果没有ajax,则使用元刷新定期重新加载具有指定ID的页面。重复此操作直到事务完成。注意:在这种情况下,您应该在页面上放置一条消息,指示何时进行刷新,并包含一个链接,以便为浏览器不支持(或忽略)元刷新的用户重新加载页面。

Sneakyness 15 年前

JqueryUI 的标签插件有这个内置的,你可以很容易地绑定到他们的插件做你想做的事,而不必自己写。

Danny T. 15 年前

不使用脚本:您可以重定向到中间网页,并显示一条“请稍候”消息,该消息将在进程完成时重定向到结果页。

使用脚本:你的页面可以有一个隐藏的div,显示一条“请稍候”的消息。这个div也可以和你的页面一样大,并且是透明的(消息在一个较小的div中),这样你的用户就不能在消息显示的时候点击页面了。

Jakub NarÄbski adamtaub 15 年前

我发现其中一个窍门就是 <meta http-equiv="refresh" content="0" /> 要重定向到就绪视图。。。但没有结束 html 标记并在最终响应就绪之前不关闭连接:

print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF

print "Generating...";
while (!is_ready()) {
    print ".";
    wait();
}
print <<EOF;
</body>
</html>
EOF