Как отправить веб-браузеру страницу загрузки, а через некоторое время страницу результатов - PullRequest
Новая
       18

Как отправить веб-браузеру страницу загрузки, а через некоторое время страницу результатов

2 голосов
/ 06 апреля 2010

Я потратил, по крайней мере, полдня времени моей компании, ища ответ в Интернете, и меня тут затягивает ось.Я не могу понять разницу между различными технологиями (длинный опрос, потоковая передача ajax, комета, XMPP и т. Д.), И я не могу получить простой пример "Hello World", работающий на моем ПК.

Я использую Apache 2.2 и ActivePerl 5.10.0.JavaScript полностью приемлем для этого решения.Все, что я хочу сделать, это написать простой CGI-скрипт на Perl, который при обращении к нему сразу возвращает 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";

Ответы [ 4 ]

3 голосов
/ 06 апреля 2010

Если ваш процесс использует параметры строки запроса, достаточно простого мета-обновления. Например. если они загружают http://yoursite.com/message?foo=1, то это может вывести метатег как: 

<meta http-equiv="refresh" content="0; http://yoursite.com/realquery?foo=1" />

И некоторый HTML-код с вашим сообщением "пожалуйста, подождите". Сценарий realquery фактически выполнит запрос, и вывод HTML с помощью message останется на экране, пока 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-запрос завершается, он заменяется «успешным» изображением.

2 голосов
/ 06 апреля 2010
1 голос
/ 06 апреля 2010

Вот полный рабочий пример использования решения HTTP meta meta обновления friedo. Это не мое первое решение, так как оно изменяет 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;
0 голосов
/ 06 апреля 2010

Наконец-то заработала версия 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...