如何發送網頁瀏覽器的加載頁面，然後一段時間後結果頁面

我已經浪費了我的公司至少半天的時間在互聯網上尋找答案，我正在這裏纏繞軸。我無法弄清所有不同的技術選擇（長輪詢，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";

來源

2010-04-05 Kurt W. Leucht

如果你的進程依賴於查詢字符串參數，一個簡單的元刷新就足夠了。例如。如果他們加載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查詢結束時，它被替換爲「成功」圖像。

來源

2010-04-05 21:54:38 friedo

好的，工作。感謝您的解決方案！如果沒有人用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

參見Randal Schwartz的Watching long processes through CGI。

來源

2010-04-05 22:27:43

這篇文章非常有幫助！ – justkt 2010-08-05 17:06:04

這是一個使用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;

來源

2010-04-05 22:52:56

終於得到了一個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>

來源

2010-04-06 02:06:19

如何發送網頁瀏覽器的加載頁面，然後一段時間後結果頁面

回答

相關問題