Fatal编程技术网
  • javascript/
  • Javascript 如何向web浏览器发送加载页，然后在稍后发送结果页

Javascript 如何向web浏览器发送加载页，然后在稍后发送结果页

javascript ajax perl streaming

Javascript 如何向web浏览器发送加载页，然后在稍后发送结果页,javascript,ajax,perl,streaming,cgi,Javascript,Ajax,Perl,Streaming,Cgi,我已经浪费了我公司至少半天的时间在互联网上寻找答案，我现在正忙得不可开交。我无法找出所有不同技术选择（长轮询、ajax流、comet、XMPP等）之间的区别，也无法在我的PC上获得一个简单的hello world示例 我正在运行Apache2.2和ActivePerl5.10.0。此解决方案完全可以接受JavaScript。我只想编写一个简单的Perl CGI脚本，当访问该脚本时，它会立即返回一些HTML，告诉用户等待，或者发送一个动画GIF。然后，在没有任何用户干预的情况下（没有鼠标点击或任何

我已经浪费了我公司至少半天的时间在互联网上寻找答案，我现在正忙得不可开交。我无法找出所有不同技术选择（长轮询、ajax流、comet、XMPP等）之间的区别，也无法在我的PC上获得一个简单的hello world示例

我正在运行Apache2.2和ActivePerl5.10.0。此解决方案完全可以接受JavaScript。我只想编写一个简单的Perl CGI脚本，当访问该脚本时，它会立即返回一些HTML，告诉用户等待，或者发送一个动画GIF。然后，在没有任何用户干预的情况下（没有鼠标点击或任何操作），我希望CGI脚本在以后的某个时候用查询的实际结果替换等待消息或动画GIF

我知道这很简单，网站一直都在使用JavaScript，但我找不到一个可以剪切并粘贴到我的机器上的用Perl工作的工作示例

下面是我从各种互联网资源编译的简单Hello World示例，但它似乎不起作用。当我在web浏览器中刷新这个Perl CGI脚本时，它会在5秒钟内不打印任何内容，然后打印请耐心等待的网页，但不会打印结果网页。所以AJAXXMLHttpRequest的东西显然不能正常工作。我做错了什么

#!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";

#！C:\Perl\bin\Perl.exe
使用CGI；
使用CGI:：Carp qw/fatalsToBrowser warningsToBrowser/；
子创建HTML{
my$html=标题；
打印创建HTML（）；
睡眠（5）；
打印“\n”；
打印“\$（'response'）。innerHTML='这是您的结果！'；\n”；
打印“\n”；
如果您的流程依赖于查询字符串参数，则简单的元刷新就足够了。例如，如果它们加载
http://yoursite.com/message?foo=1
，则可以输出元标记，如：

<meta http-equiv="refresh" content="0; http://yoursite.com/realquery?foo=1" />
如果您对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" />' );
    } );
} );

$（“#提交按钮”）。单击（函数（）{
//显示“请稍候”图像
$（'#status div'）.html（''）//动画gif
//获取表单值
var formdata={foo:$（'input#foo'）.val（），
...
};
//通过ajax提交表单：
$.ajax（{type:“POST”，url:“/realquery”，数据：formdata，成功：function（）{
$（'#status div'）.html（''）；
} );
} );
您可以将其附加到如下表单：

<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查询完成时，它将被一个“success”替换图像。

请参见Randal Schwartz。

这里是一个使用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;

#！C:\Perl\bin\Perl.exe
使用CGI；
使用CGI:：Carp qw/fatalsToBrowser warningsToBrowser/；
子网页{
我的（$meta\u string，$results\u string）=@；
my$html=param（））{
if（$cgi->param（'doResults'）eq“true”）{
睡眠（5）；
打印html_页面（“这是您的结果！”）；
}
}
否则{
我的$meta_refresh=''；
打印html页面（$meta_刷新，'请耐心等待'）；
}
出口
终于有了一个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的两阶段web页面演示
使用Ajax的两阶段web页面演示
用户输入表单在这里。

$.ajaxSetup({
缓存：false
});
var ajax_load=“请耐心等待，这可能需要一段时间。”；
//load（）函数
$（“#加载_基本”）。单击（函数（）{
$（“#result”）.html（ajax_load.load（“/cgi-bin/slow.pl”）；
});
好的，成功了。感谢您提供的解决方案！如果没有人使用Ajax解决方案回答问题，我将使用此解决方案。好处是只刷新网页的结果部分，而不在浏览器上发送和刷新整个网页。元重定向解决方案的另一个缺点是它会将URL与查询混为一谈web浏览器中的字符串，我相信Ajax解决方案在更新网页部分时不会实际更改URL。我使用jQuery添加了一个Ajax示例。我尝试了您的jQuery示例，但无法使其正常工作。请发布完整的工作示例，而不是简短的代码片段。无需使用动画GIF…只需输入这里有一些文本。我不确定我是否将您的代码片段放在正确的位置并正确使用它们。我以前从未使用过Ajax或Jquery。本文非常有用！ 
<!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>