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

How to refresh a div content in javascript when the page has not loaded completely?

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

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>

function bar() {
document.getElementById("foo").innerHTML ="0";
}

</head>

<body onloadx="bar()">

</body>

延迟(2秒)后，服务器发送以下剩余代码：

1
2
3
4
5
6
7
8

麻烦的是，我从没看到div的显示为" 0"-浏览器一直等到整个页面被加载，并且div上的显示为" 1"。服务器未发送整个页面时，如何使div在其中显示" 0"？

我没有使用任何JQuery或AJAX代码-请仅将答案限于JavaScript。

相关讨论

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

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

这应该工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>

function bar(x) {
document.getElementById("foo").innerHTML = x;
}

</head>

<body>


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

</body>

-延迟-

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10

它首先显示" 0"，然后在2秒后显示" 1"

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

如果您不想使用AJAX或jQuery，则可以尝试使用破解版本来获得所需的内容。

您可以做的是在页面上指定一个回调函数，以使用参数填充div，例如

1
2
3

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

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

1
2
3
4
5
6

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

您正在加载的脚本可以是静态的，也可以是返回javascript文件的servlet / php文件，即将其内容类型标头设置为"文本/ javascript"。

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

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

加载后，它将调用您先前声明的上一个函数，并将内容加载到该div中。

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