Главная » 2015 » Январь » 17 » динамическое обновление новостей на сайте с помощью java script
13:04
динамическое обновление новостей на сайте с помощью java script
Хотя техника DHTML, описанная в главе 15, предоставляет возможность динами-чески изменять и обновлять содержимое страниц, она оказывается несколько огра-ниченной в том смысле, что логика и содержимое, которые вы хотите использовать, обязательно должны быть частью страницы (т.е. записаны в сценарии). Кроме изобра-жений и фреймов, нет других вариантов динамического обновления страницы, если дело касается HTML-контекста, получаемого от сервера. Однако, имея подходящий программный код JavaScript и соответствующую программную поддержку на сервере, с помощью DHTML можно реализовать истинно динамическую обработку содержимого.
Фундаментальным носителем, обеспечивающим доступ к извлекаемому сервером содержимому, являются сценарии с внешними связями. Когда требуется извлечь со-держимое сервера, с помощью программного кода JavaScript в страницу добавляется дескриптор <script>, для src которого указывается адрес URL исполняемой про-граммы сервера. Этой серверной программе можно передать "аргументы", добавив в URL параметры запроса, во многом аналогично тому, как это делалось выше в случае изображений, файлов cookie и перенаправлении. Когда соответствующая программа сервера получает запрос, она обрабатывает информацию, закодированную в URL, а затем возвращает в качестве ответа программный код JavaScript, который записывает нужное динамическое содержимое. Программный код JavaScript в ответе связан со страницей с помощью дескриптора <script>, так что браузер загрузит и выполнит его, а в результате будет выполнено обновление страницы.
Для иллюстрации подхода, о котором идет речь, рассмотрим следующий документ, в котором создается область содержимого для отображения последних новостей. Каждые пять минут программный код JavaScript выдает RPC-запрос к серверу, чтобы получить новое содержимое для области новостей.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HОBОCTИ JavaScript Ref</title>
</head>
<body>
<h2>Новости JavaScript со всего мира</h2>
<form name="newsform" id="newsform" action="#" method="get">
Загружать no<input type="text" name="numstories" id="numstories" size="1" value="5" />
статей каждые <input type="text" name="howoften" id="howoften" size="2" value="5" /> минут.
<input type="button" value="Get News" onclick="updateNews();" />
</form>
<hr />
<div id="news">
Загрузка новых статей...
</div>
<br />
<script type="text/javascript">
var commandURL = "http://demos.javascriptref.com/getnews.php?";
// Отправка RPC с данным url. Сервер возвратит программный код
// JavaScript, который должен выполнить необходимые действия,
function sendRPC(url)
{
var newScript = document.createElement('script');
newScript.src = url;
newScript.type = "text/javascript";
document.body.appendChild(newScript);
}
// Получить несколько статей с новостями от сервера с помощью RPC.
// После отправки запроса устанавливается таймер
// для обновления списка статей через некоторое время.
function updateNews()
{
var params = "numstories=" + document.newsform.numstories.value;
sendRPC(commandURL + params);
var checkAgain = 5 * 60 * 1000; // по умолчанию: 5 минут
if (parseInt(document.forms.newsform.howoften))
checkAgain = parseInt(document.forms.newsform.howoften) * 60 * 1000;
setTimeout(updateNews, checkAgain);
}
updateNews();
</script>
</body>
</html>
Замечание. Потенциальной проблемой этого примера является то, что по причине постоянного добавления в страницу новых элементов <script> браузер пользователя может занять очень много памяти, если страница остается открытой, например, несколько часов или дней. Поэтому, вероятно, лучше изменять значение src существующего сценария, однако и в этом случае нет гарантии, что в долгосрочной перспективе вы не столкнетесь с проблемами памяти.
Сценарий сервера, выполняющий RPC-запрос, должен получать новые статьи из соответствующего источника, а затем компоновать и возвращать программный код JavaScript, записывающий статьи на страницу. Например, программный код JavaScript, возвращаемый для http: / /demos .javascriptref.com/getnews. php?numstories=4 может быть следующим:
var news = new Array();
news[0] = "<h2>Plan 9 заменяет Windows на рынке 0C</h2>" + "(<a href='/news/stories?id=431'>подробнее</a>)";
news[l] = "<h2>McDonald's представляет новый SuperMac</h2>" + "(<a href='/news/stories?id=l93'>подробнее</a>)";
news[2] = "<h2>toiacTep Google демонстрирует самосознание</h2>" + "(<a href='/news/stories?id=731'>подробнее</a>)";
news[3] = "<h2>Результаты опроса: авторы научных книг лишены остроумия </h2>" + "(<a href='/news/stories?id=80'>подробнее</a>)";
var el = document.getElementByld("news"); // куда поместить
el.innerHTML = ""; // очистить текущее содержимое
for (var i=0; i<news.length; i++)
el.innerHTML += news[i]; // записать новое содержимое
Понятно, что аналогичного эффекта можно достичь с помощью meta-обновлений или перенаправления JavaScript, но динамическое изменение содержимого не требует перезагрузки страницы и позволяет обновлять различные области содержимого не-зависимо, используя при этом разные источники. Здесь требуется внимательность и последовательность в выборе имен, чтобы возвращаемые сервером сценарии могли получить доступ к подходящим частям страницы.
