Если я не собираю информацию с сервера, но я хочу перезагрузить / обновить 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, прототип и т. Д. EDIT II: Не знаю, почему люди говорят, что div не меняется … содержимое в нем динамично захватывается (скажем, соскоблил) из Интернета … и каждый раз, когда он идет, чтобы захватить материал, материал изменился у источника … примером может быть захват результатов поиска из твиттера, которые меняются очень быстро …
Да, вам нужен Ajax, потому что по определению это Ajax. ESPECIALLY, если вы хотите захватить контент с другого сайта.
Я знаю, что вы сказали, что хотите использовать простой javascript, но проверьте это, может быть, вам это понравится. Взгляните на этот потрясающий плагин jQuery. https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
ОЧЕНЬ ПРОСТОЙ ИСПОЛЬЗОВАТЬ его, давайте вам исполнять Ajax sing jQuery с ОЧЕНЬ БОЛЬШОЙ РАЗЛИЧНОСТЬЮ: вы можете захватывать контент из ЛЮБОГО (например, другой сайт, откуда приходит ваш контент). Вы просто используете один и тот же метод jQuery.load () или .ajax (), как и на своем собственном сервере, за исключением того, что вы можете захватывать контент из любого места!
Просто добавьте скрипт плагина на страницу (после jQuery), затем используйте метод .load (), как описано здесь .
Поэтому в вашем случае вы можете сделать что-то вроде этого:
$('div#target').load('http://somewhere.com #newContent');
Это приведет к #newContent from something.com и поместит его в #target на вашем сайте.
Вы можете сделать что-то подобное, используя setInterval javascript:
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 на http://yoursite.com/whatever-the-current-page-is
В целом, это простой способ загрузки контента. jQuery имеет размер только 31 КБ (уменьшен), и я считаю, что он того стоит. Нет необходимости изобретать колесо, когда jQuery может делать то, что вы хотите, и эффективно на этом, если вы не пытаетесь изучить javascript. Если вы просто хотите, чтобы ваш сайт работал (конечный результат имеет значение), тогда дайте супер простой метод, который я только что объяснил.
Вы можете сделать рекурсивную функцию, которая изменит содержимое вашего 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 .
Хорошо, так что вам нужен AJAX. Ну, а не часть «X», вам просто нужна асинхронная часть Javascript. Сервер может возвращать XML или JSON, но в вашем случае проще всего просто вернуть blob HTML, который вы хотите поместить в div.
Но вам нужно сделать кругооборот на сервере, потому что в браузере ничего не изменилось, изменилось только содержимое страницы на сервере.
Вот 30-секундный учебник, который объясняет все. Я приспособию его к тому, что вы хотите здесь.
Во-первых, на стороне сервера у вас уже есть PHP-скрипт, назовем его «page.php», который возвращает всю эту HTML-страницу. Вам нужно будет сделать второй PHP-скрипт, назовем его «div.php», который возвращает только содержимое div.
(Вы также можете иметь page.php искать параметр, например $ _GET ['divonly'], и таким образом иметь только один скрипт PHP, который обрабатывает оба задания. Это не имеет значения … вы можете сделать это, как хотите , до тех пор, пока у вас есть второй 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);
Посмотрите на jQuery.load () . Обратите внимание, что reload загружайте информацию с сервера.
Если вы хотите сделать это самостоятельно, чтобы избежать накладных расходов, включая полную библиотеку, такую как jquery, вы можете взглянуть на это.
http://www.dynamic-tools.net/toolbox/ajax/
Простая демонстрация запроса ajax показывает, как извлечь html из URL-адреса. Вы захотите заменить триггер щелчка на setInterval для постоянного опроса вместо запуска по требованию.
Другой способ – использовать «Метаданные могут использоваться браузерами (как отображать страницу контента или перезагрузки), поисковые системы (ключевые слова) или другие веб-сервисы»
Короткий ответ :
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) ;.
В качестве бокового узла использование этой версии функции setTimout не рекомендуется, и лучшим подходом является передача функции в качестве первого параметра
setTimeout(window.location.reload,1000); // we are passing the function, // not the function result
Надеюсь, это поможет.