Как обновить содержимое div в javascript, когда страница загружена не полностью? - PullRequest
Новая
       4

Как обновить содержимое div в javascript, когда страница загружена не полностью?

0 голосов
/ 28 марта 2012

У меня есть небольшая веб-страница с одним 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» - браузер ждет, пока загрузится вся страница, и сразу же показывает «1» в div. Как я могу получить в div значение «0», пока сервер не отправил всю страницу?

Я не использую какой-либо код JQuery или AJAX - пожалуйста, ограничьте свои ответы только JavaScript.

Ответы [ 2 ]

1 голос
/ 28 марта 2012

Вы не можете использовать 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>

--- ЗАДЕРЖКА --- 

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

1 голос
/ 28 марта 2012

Я не уверен, что это можно сделать так, как вы пытаетесь. Браузер будет всегда ждать, пока страница полностью загрузится, поэтому он всегда будет ждать, пока вы отправите второй пакет.

Если вы не хотите использовать AJAX или jQuery, вы можете попробовать хакерскую версию, чтобы получить то, что вы хотите.

Что вы можете сделать, это указать функцию обратного вызова на вашей странице, чтобы заполнить 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);

Сценарий, который вы загружаете, может быть статическим или неким файлом сервлета / php, который возвращает файл javascript, т. Е. Он устанавливает заголовок типа контента на «text / javascript».

В этом сценарии вы должны сгенерировать следующее: 

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

Как только это будет загружено, оно вызовет предыдущую функцию, которую вы объявили ранее, и загрузит содержимое в этот div.

Это по сути хакерская форма AJAX, но не AJAX.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...