Простой пример использования AJAX

Я подготовил простой пример — демонстрацию технологии 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()

Теперь кеширование не будет работать, и будут отображаться свежие данные.