웹 브라우저 로딩 페이지를 보내고 얼마 후에 결과 페이지

인터넷 검색을 위해 회사 검색 시간을 최소 반나절 낭비했습니다. 여기에 답변을 드리겠습니다. 모든 다른 기술 선택 (긴 폴링, 아약스 스트리밍, 혜성, XMPP 등)의 차이를 이해할 수 없으며 PC에서 간단한 hello world 예제를 사용할 수 없습니다.웹 브라우저 로딩 페이지를 보내고 얼마 후에 결과 페이지

저는 Apache 2.2 및 ActivePerl 5.10.0을 실행하고 있습니다. JavaScript는이 솔루션에서 완전히 수용 가능합니다. 내가 원하는 것은 간단한 Perl CGI 스크립트를 작성하여 액세스 할 때 사용자에게 기다리거나 어쩌면 애니메이션 GIF를 보내는 일부 HTML을 반환하는 것입니다. 그런 다음 어떤 사용자 개입도없이 (마우스 클릭이나 기타없이) 나는 CGI 스크립트가 잠시 후 대기 메시지 또는 애니메이션 GIF를 쿼리의 실제 결과로 바꾸기를 원합니다.

나는 이것이 JavaScript를 사용하여 항상 간단한 작업을 수행한다는 것을 알고 있지만 Perl에서 작동 할 내 컴퓨터에 잘라 붙여 넣을 수있는 단일 작업 예제를 찾을 수 없습니다.

다음은 다양한 인터넷 소스에서 컴파일 한 간단한 Hello World 예입니다. 그러나 작동하지 않는 것 같습니다. 웹 브라우저에서이 Perl CGI 스크립트를 새로 고침하면 5 초 동안 아무것도 인쇄되지 않고 PLEASE BE PENTENT 웹 페이지가 인쇄되지만 결과 웹 페이지는 인쇄되지 않습니다. 따라서 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

프로세스가 쿼리 문자열 매개 변수에 의존하는 경우 간단한 메타 새로 고침이면 충분합니다. 예 :

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

그리고 당신의 "기다려주십시오"메시지가 일부 HTML : 그들은 http://yoursite.com/message?foo=1, 다음 메타 태그 같은 것을 출력 할 수로드합니다. realquery 스크립트는 실제로 쿼리를 실행하며 message에 의한 HTML 출력은 realquery이 약간의 출력을 제공 할 때까지 화면에 남아 있습니다.

쿼리가 POST 데이터를 사용하는 경우 POST를 리디렉션 할 수 없으므로 좀 더 복잡해집니다. 그러나 숨겨진 필드가있는 양식을 출력하고 자바 스크립트를 사용하여 양식을 제출할 수 있습니다. 예를 들면 : 당신이 AJAX 솔루션에 관심이 있다면

<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...

, 여기에 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 솔루션으로 응답하지 않으면이 솔루션을 사용할 것이다. 이점은 브라우저에서 전체 웹 페이지를 보내고 새로 고치지 않고 웹 페이지의 결과 섹션을 새로 고치는 것입니다. –

메타 리디렉션 솔루션의 또 다른 단점은 웹 브라우저의 쿼리 문자열로 URL을 혼잡하게 만드는 것입니다.이 URL에서는 Ajax 솔루션이 웹 페이지의 섹션을 업데이트 할 때 URL을 실제로 변경하지 않는다고 생각합니다. –

jQuery를 사용하여 Ajax 예제를 추가했습니다. – friedo

랜달 슈왈츠 (Randal Schwartz)의 Watching long processes through CGI을 참조하십시오.

출처

2010-04-05 22:27:43

이 기사는 대단히 유용합니다! – justkt

다음은 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

웹 브라우저 로딩 페이지를 보내고 얼마 후에 결과 페이지

답변

관련 문제