Question

我有一个带有单个div的小网页，其内容需要定期更新。服务器使用包含要在div中更新的新数据的函数发送Javascript。这是服务器发送的代码的第一部分：

<html>
<head>
 <script>
  function bar() {
   document.getElementById("foo").innerHTML = "0";
  }
</script>
 </head>

 <body onLoad="bar()">
 <div id="foo"></div>
 </body>

延迟（2秒）后，服务器发送以下代码：

<script type="text/javascript">
  function bar() {
   document.getElementById("foo").innerHTML = "1";
  }
</script>
</script>

</html>

问题是我从未看到div显示“0” - 浏览器等待整个页面加载，并且在div中直接显示“1”。当服务器没有发送整个页面时，如何让div显示“0”？

我不是在考虑使用任何JQuery或AJAX代码 - 请仅限制您对JavaScript的回答。

Answer 1

我不确定是否可以按照你的方式去做。浏览器将始终等待页面完全加载，因此它将一直等到您发送第二批文件。

如果你不想使用AJAX或jQuery，你可以尝试一个hacky版本来获得你想要的东西。

你可以做的是在你的页面上指定一个回调函数，用参数填充div，所以像

callback = function(data) {
    document.getElementById('foo').innerHTML = data;
}

然后，在页面上设置超时以向服务器发送请求以动态加载调用该函数的javascript文件。再说一次：

myTimeout = function() {
    var script = document.createElement('script');
    script.src = "http://myserver.com/mydynamicscript"; 
    document.getElementByTagName('head').appendChild(script);
}
setTimeout(myTimeout, 2000);

您正在加载的脚本可以是静态的，也可以是一些返回javascript文件的servlet / php文件，即它将内容类型标题设置为“text / javascript”。

在该脚本中，您将生成以下内容：

callback("whatever I want to put in my div...");

一旦加载了它，它将调用您之前声明的前一个函数，并在该div中加载内容。

它实际上是一种hacky形式的AJAX，但不是AJAX。

Answer 2

您无法使用onload - ＆gt;只有在整个页面完全加载后才会被触发。

此外，您还必须在第一个响应中添加更多字节，因为大多数浏览器仅在接收到大量数据后才开始对页面进行增量呈现。

这应该有效：

<html>
<head>
 <script>
  function bar(x) {
   document.getElementById("foo").innerHTML = x;
  }
</script>
 </head>

 <body>
 <!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA -->
 <div id="foo"></div>
 <script type="text/javascript">
    bar(0);
 </script>
 </body>

--- DELAY ---

<script type="text/javascript">
  bar(1);
</script>
</script>

</html>

这是node.js中的一个工作示例：

var http=require('http');

var server=http.createServer(function(req,res){
    res.write('<html><head> <script>  function bar(x) {  document.getElementById("foo").innerHTML = x;  }</script> </head> <body><!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA --> <div id="foo"></div><script>bar(0);</script> </body>');
    setTimeout(function(){
        res.end('<script type="text/javascript">  bar(1); </script></html>');
    },2000);
});

server.listen(8080);

首先显示“0”然后在2秒后显示“1”

如何在页面未完全加载时刷新javascript中的div内容？

2 个答案: