Обновление только одного <div> на странице с помощью обычного Javascript

Если я не хватаю любую информацию с сервера, но я хочу перезагрузить/обновить div каждые N секунд, как это сделать?

Новое в javascript: я пробовал что-то вроде

 <script type = 'text/javascript'>
    function refresh(){
        setTimeout(window.location.reload(), 10000);
    }

    </script>

    <div id='target' onLoad='refresh()'>
<?    
var =grab some rapidly changing content from the web    
print var
  ?>  
    </div>
    <div>
    some stuff that doesn't get refreshed
    </div>

Мне не ясно, что мне нужен AJAX, если я не получаю новую информацию с сервера... так что теперь я хотел бы знать, как заставить ее работать только в javascript

EDIT: я предпочитаю не использовать библиотеку для этой базовой операции, поэтому в идеале я бы не использовал jquery, prototype и т.д. EDIT II: Не знаю, почему люди говорят, что div не меняется... контент в нем динамичен, он захватывается (скажем, скребется) из Интернета... и каждый раз, когда он идет, чтобы захватить вещи, материал изменился у источника.... пример может захватывать результаты поиска из твиттера, которые меняются очень быстро...

Ответы

Ответ 1

Да, вам нужен Ajax, потому что по определению это Ajax. ESPECIALLY, если вы хотите захватить контент с другого сайта.

Я знаю, что вы сказали, что хотите использовать простой javascript, но проверьте это, может быть, вам это понравится. Взгляните на этот потрясающий плагин jQuery. https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

Это ОЧЕНЬ ПРОСТОЕ ИСПОЛЬЗОВАНИЕ, это позволяет вам выполнять AJAX петь jQuery с ОЧЕНЬ БОЛЬШОЙ РАЗЛИЧНОСТЬЮ: вы можете захватывать контент от ЛЮБОЙ (например, другой сайт, на котором ваш контент поступает из). Вы просто используете один и тот же метод jQuery.load() или .ajax(), как и на своем собственном сервере, за исключением того, что вы можете захватывать контент из любого места!

Просто добавьте плагин script на страницу (после jQuery), затем используйте метод .load(), как описано здесь.

Итак, в вашем случае вы можете сделать что-то вроде этого:

$('div#target').load('http://somewhere.com #newContent');

Это приведет к #newContent from something.com и поместит его в #target на вашем сайте.

Вы можете сделать что-то подобное, используя javascript setInterval:

setInterval( function() {
    $('div#target').load('http://somewhere.com #newContent');
}, 5000); //repeat function every 5000 milliseconds

Это повторит все, что находится внутри функции() {} каждые 5000 миллисекунд (ака 5 секунд).

Вы также можете получить контент со своего сайта:

$('div#target').load('http://yoursite.com/some-page #someContent');

Это положит #someContent и все, что находится внутри него, из http://yoursite.com/some-page в #target на <а4 >

В целом, это очень простой способ загрузки контента. jQuery имеет размер только 31kb (уменьшен), и я считаю, что это того стоит. Нет необходимости изобретать колесо, когда jQuery может делать то, что вы хотите, и эффективно при этом, если только вы не пытаетесь изучить javascript внутри и снаружи. Если вы просто хотите, чтобы ваш сайт работал (конечный результат - это важно), тогда дайте супер простой метод, который я просто объяснил попробовать.

Ответ 2

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

Здесь функция

var gIndex = 1;
function refreshDiv(){
    document.getElementById('target').innerHTML = "Timer " + gIndex++;
    var refresher = setTimeout("refreshDiv()", 1000);
}

<body onLoad="refreshDiv()">
    <div>
        <span>HTML Content</span>
        <div id="target"></div>
    </div>
</body>

Вы увидите, что время установлено, когда setTimeout снова вызовет refreshDiv(), так что это приведет к перезагрузке содержимого div. Перед вызовом refreshDiv() снова измените значение div.

Ответ 3

ОК, так что вам нужен AJAX. Ну, а не часть "X", вам просто нужна асинхронная часть Javascript. Сервер может возвращать XML или JSON, но в вашем случае проще всего просто вернуть blob HTML, который вы хотите поместить в div.

Но вам нужно сделать кругооборот на сервере, потому что в браузере ничего не изменилось, изменилось только содержимое страницы на сервере.

Здесь 30-секундный учебник, который объясняет все. Я приспособию его к тому, что вы хотите здесь.

Во-первых, на стороне сервера у вас уже есть PHP script, назовем его "page.php", который возвращает всю эту HTML-страницу. Вам нужно будет сделать второй PHP скрипт, пусть назовите его "div.php", который возвращает только содержимое div.

(У вас также может быть параметр page.php, например $_GET ['divonly'], и таким образом есть только один PHP script, который обрабатывает оба задания. Это не имеет значения... вы можете сделайте это, как хотите, до тех пор, пока у вас есть второй URL-адрес, чтобы попасть на сервер, чтобы получить новый контент для div.)

В HTML файле page.php у вас уже есть:

<div id="target"> ... </div>

И теперь вы добавили div.php, который возвращает только "...", а не полную HTML-страницу.

ОК, так что теперь, Javascript. Вам не нужно использовать библиотеку, если вы этого не хотите, - что приятно в библиотеках, так это то, что они заботятся обо всех проблемах с несколькими браузерами.

Но вот что вы хотите, адаптированный из примера в чистом Javascript:

var refreshDelay = 10000;

/* Creates the XMLHTTPRequest object depending on the browser */
function createRequestObject() {
    var ro;
    if(navigator.appName == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();

/* Makes the request back to /div.php ... change the URL to whatever
   script you put on the server side to return the contents of the div only */    
function sndReq() {
    http.open('get', '/div.php');
    http.onreadystatechange = handleResponse;
    http.send(null);
}

/* Does the work of replacing the contents of the div id="target" when
   the XMLHTTPRequest is received, and schedules next update */
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('target').innerHTML = response;
        setTimeout(sndReq(), refreshDelay);
    }
}

/* Schedules the first request back to the server. Subsequent refreshes 
   are scheduled in handleResponse() */
setTimeout(sndReq(), refreshDelay);

Ответ 4

Посмотрите jQuery.load(). Обратите внимание, что reload извлекает информацию с сервера.

Ответ 5

Если вы заинтересованы в том, чтобы сделать это самостоятельно, чтобы избежать накладных расходов, включая полную библиотеку, такую ​​как jquery, вы можете взглянуть на это.

http://www.dynamic-tools.net/toolbox/ajax/

Простая демонстрация запроса ajax показывает, как извлечь html из URL-адреса. Вы захотите заменить триггер щелчка с помощью setInterval для постоянного опроса вместо запуска по требованию.

Ответ 6

Другой способ - использовать "Метаданные могут использоваться браузерами (как отображать контент или страницу перезагрузки), поисковые системы (ключевые слова) или другие веб-сервисы"

Ответ 7

Короткий ответ:

1 . div 'onload' doesn't exist. So you need to register a listener for the page
    load event, or put it in "<body onload='refresh()'"
2 . function refresh(){
        setTimeout("window.location.reload()", 10000); // note the ""
    }

Длинный ответ:

Ваша страница не обновляется просто потому, что вы не выполняете функцию. Во-вторых, если вы поместите его как есть, страница будет обновлена, как только загрузится страница, из-за setTimeout (window.location.reload(), 10000);.

Как сторона node, использование этой версии функции setTimout не рекомендуется, и лучший подход - передать функцию в качестве первого параметра

setTimeout(window.location.reload,1000); // we are passing the function,
                                         // not the function result

Надеюсь, это поможет.