Я подготовил простой пример — демонстрацию технологии AJAX. Он доступен по адресу http://ajax_test.catethysis.ru/ — читайте сразу там. Суть: клиентская страница 5 раз в секунду запрашивает с сервера новое значение, а получив его — отображает в span.
Клиентская часть
Таймер на 200 миллисекунд создан javascript-функцией setInterval, запрос значения — функцией XMLHTTPRequest.
Ей нужно передать адрес, по которому находится требуемое значение:
http://ajax_test.catethysis.ru/value
Эта функция также предоставляет механизм отслеживания состояния запросов, и как только запрос исполнен и значение пришло — забираем его и складываем в элемент с id=»ajax». Вот код клиентской части:
window.onload = function() {
xmlhttp = new XMLHttpRequest();
setInterval(function() {
xmlhttp.open('GET', '/value?p='+Math.random(), false);
xmlhttp.send(null);
if(xmlhttp.status == 200)
document.getElementById('ajax').innerHTML = xmlhttp.responseText;
}, 500);
}
Серверная часть
На стороне сервера находится простой веб-сервер, написанный на node.js, но конечно, то же самое можно сделать и на более простых языках типа б-гомерзкого PHP. Сервер просто отдаёт текущее время. Вот его код:
var http = require('http');
var express = require('express');
var app = express();
app.use(express.bodyParser());
app.get('/value', function (req, res) {
today=new Date();
res.end(today.toLocaleTimeString());
});
app.listen(9280);
Более того, эта страница может быть даже статичной, т.е. просто html-файлом, который отдаст nginx — но особого смысла передавать аяксом статику нет, её проще закодить внутрь страницы.
Подробнее
Однако, мы можем столкнуться с проблемой — ajax-ответ может кешироваться как и любая другая страница! Но ведь ответ нашего сервера постоянно изменяется, его нельзя кешировать. Для борьбы с этим — просто добавим случайный параметр к запросу:
'http://ajax_test.catethysis.ru/value?p='+Math.random()
Теперь кеширование не будет работать, и будут отображаться свежие данные.
Свежие комментарии