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

我有一个小网页，其内容需要定期更新。服务器向Javascript发送一个包含要在div中更新的新数据的函数。下面的代码的第一部分服务器发送：如何在页面尚未完全加载时刷新JavaScript中的div内容？

<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的答案。

来源

2012-03-27 Specksynder

你为什么不富的不支持JavaScript的内容设置为0时，服务器会发送HTML？加载页面后，您可以删除innerHTML并使用javascript将其设置为1。 – 2012-03-27 23:49:16

我需要div的内容随着更多的JavaScript从服务器进来而不断变化。主要问题是浏览器在所有返回之前都没有渲染页面。请查看下面接受的答案以获得解释。 – Specksynder 2012-03-28 16:09:20

您不能使用onload - >仅在整个页面完全加载后才会触发。

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

这应该工作：

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

这里是节点的工作示例。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”

来源

2012-03-28 00:26:38 stewe

谢谢，这工作得很好！ – Specksynder 2012-03-28 16:07:51

我不确定是否可以按照您尝试的方式进行操作。浏览器会一直等到页面完全加载，所以它会一直等到您发送第二批。

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

你可以做的是指定页面上的回调函数来填充参数的股利，所以像

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文件的一些小服务程序/ php文件，即它设置它的Content-Type标题为“text/JavaScript的”。

在该脚本，你会再产生这样的：

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

一旦已加载，它会叫你早些时候宣布先前的功能，并加载在该专区的内容。

这实际上是一个hacky的AJAX形式，但不是AJAX。

来源

2012-03-27 23:49:37

感谢您的答案，但我会与下面建议的答案，因为它似乎更适合我的使用情况。 – Specksynder 2012-03-28 16:09:52

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

回答

相关问题