如何发送网页浏览器的加载页面，然后一段时间后结果页面
我已经浪费了我的公司至少半天的时间在互联网上寻找答案，我正在这里缠绕轴。我无法弄清所有不同的技术选择（长轮询，ajax流媒体，彗星，XMPP等）之间的差异，我无法获得在我的PC上工作的简单的Hello World例子。如何发送网页浏览器的加载页面，然后一段时间后结果页面
我正在运行Apache 2.2和ActivePerl 5.10.0。这个解决方案完全可以接受JavaScript。我所要做的就是编写一个简单的Perl CGI脚本，当它被访问时，它立即返回一些HTML，告诉用户等待或者发送一个GIF动画。然后，在没有任何用户干预的情况下（没有鼠标点击或任何东西），我希望CGI脚本稍后用他们的查询中的实际结果替换等待消息或动画GIF。
我知道这是简单的东西，网站一直都在使用JavaScript，但我找不到一个可以剪切并粘贴到我的机器上的工作示例，该机器将在Perl中工作。
这是我从各种互联网来源编译的简单的Hello World示例，但它似乎不起作用。当我在我的网络浏览器中刷新这个Perl CGI脚本时，它不打印5秒，然后打印PLEASE BE PATIENT网页，但不打印结果网页。所以Ajax XMLHttpRequest的东西显然是不正确的。我究竟做错了什么？
#!C:\Perl\bin\perl.exe
use CGI;
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
sub Create_HTML {
my $html = <<EOHTML;
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<script type="text/javascript" >
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
</script>
<title>Ajax Streaming Connection Demo</title>
</head>
<body>
Some header text.
<p>
<div id="response">PLEASE BE PATIENT</div>
<p>
Some footer text.
</body>
</html>
EOHTML
return $html;
}
my $cgi = new CGI;
print $cgi->header;
print Create_HTML();
sleep(5);
print "<script type=\"text/javascript\">\n";
print "\$('response').innerHTML = 'Here are your results!';\n";
print "</script>\n";
如果你的进程依赖于查询字符串参数，一个简单的元刷新就足够了。例如。如果他们加载http://yoursite.com/message?foo=1，然后可以输出元标记，如：
<meta http-equiv="refresh" content="0; http://yoursite.com/realquery?foo=1" />
并具有你的“请等待”消息的一些HTML。 realquery脚本实际上会执行查询，message的HTML输出将保留在屏幕上，直到realquery提供一些输出。
如果查询依赖于POST数据，则会变得更复杂一点，因为您无法重定向POST。但是，您可以输出带有一些隐藏字段的表单并使用Javascript来提交。例如：
<script type="text/javascript">
window.onload = function() {
document.getElementById('form_with_hidden_fields').submit();
}
</script>
<form method="POST" action="realquery" id="form_with_hidden_fields">
<input type="hidden" name="foo" value="1" />
...
</form>
Please wait while your query is processed...
如果你有兴趣的AJAX解决方案，这是一个使用jQuery的一个例子：
$('#submit-button').click(function() {
// show a "please wait" image
$('#status-div').html('<img src="please_wait.gif" />'); // animated gif
// get form values
var formdata = { foo: $('input#foo').val(),
...
};
// submit form via ajax:
$.ajax({ type: "POST", url: "/realquery", data: formdata, success: function() {
$('#status-div').html('<img src="success.gif" />');
});
});
而且你可以附上的表格，如：
<form>
<input type="text" name="foo" id="foo" />
<input type="submit" id="submit-button" />
<div id="status-div"> </div>
</form>
空的status-div div将收到一个指向“请稍等”图片的图片标签（这可以是一个动画gif）。当Ajax查询结束时，它被替换为“成功”图像。
这是一个使用friedo的HTTP元刷新解决方案的完整工作示例。这不是我个人的首选解决方案，因为它修改了浏览器中的URL，并且它还刷新了整个网页。
#!C:\Perl\bin\perl.exe
use CGI;
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
sub html_page {
my ($meta_string, $results_string) = @_;
my $html = <<EOHTML;
<html>
<head>
$meta_string
<title>Two Stage Web Page Demo</title>
</head>
<body>
Some header text.
<p>
$results_string
<p>
Some footer text.
</body>
</html>
EOHTML
return $html;
}
my $cgi = new CGI;
print $cgi->header;
if ($cgi->param()) {
if ($cgi->param('doResults') eq "true") {
sleep(5);
print html_page('', 'Here are your results!');
}
}
else {
my $meta_refresh = '<meta http-equiv="refresh" content="0; /cgi-bin/twoStageScript.pl?doResults=true" />';
print html_page($meta_refresh, 'PLEASE BE PATIENT');
}
exit;
终于得到了一个Ajax版本的工作。 slow.pl文件是需要一段时间才能返回的文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Two Stage web page demo using Ajax</title>
</head>
<body>
<h1>Two Stage web page demo using Ajax</h1>
<div id="result">
Users input form goes here.
<p>
<input type="submit" value="Here is your submit button" id="load_basic" />
</div>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "Please be patient, this could take a while. <p> <img src='img/load.gif'/>";
// load() function
$("#load_basic").click(function(){
$("#result").html(ajax_load).load("/cgi-bin/slow.pl");
});
</script>
</body>
</html>
好的，工作。感谢您的解决方案！如果没有人用Ajax解决方案回答，我将使用此解决方案。好处是只刷新网页的结果部分，而无需发送和刷新浏览器上的整个网页。 – 2010-04-05 22:29:48
元重定向解决方案的另一个缺点是它在网络浏览器中混淆了查询字符串的URL，我相信在更新网页部分时，Ajax解决方案实际上不会更改URL。 – 2010-04-05 22:39:38
我使用jQuery添加了一个Ajax示例。 – friedo 2010-04-06 00:18:49