Немного об AJAX
|
Автор: Артемьев Сергей Игоревич ICQ: 438856621 email: _spin_@bk.ru |
Ajax (читается как «аякс» или "аджакс") – это эволюция JS. Обычные скрипты JS, которые мы использовали в примерах, начинают свою работу с загрузки страницы и заканчивают при ее закрытии (или раньше, если выполнились полностью). Обновление страницы (по кнопке «обновить») браузера равносильно ее закрытию и последующему открытию, а это значит, что скрипт будет опять выполняться с самого начала. Например:
<script type="text/javascript" language="javascript">
var myCounter = 0
function runMultiple() {
var cntDiv = document.getElementById("counter");
if(cntDiv)
{
cntDiv.innerHTML = myCounter;
cntDiv.style.backgroundColor = '#'
+ (myCounter + 100) * 1234;
myCounter++;
}
}
var timerMulti = window.setInterval("runMultiple();", 1000);
</script>
...
<div id="counter" style="border:1px dotted blue;
top:100px;left:100px;position:absolute;
width:50px;height:20px;text-align:center;">
0
</div>
Как видите, при обновлении страницы счетчик всегда сбрасывается в исходное значение.
Иногда такое выполнение бывает очень неудобным. Представьте, что вы загрузили фотогалерею фотографий высокого разрешения (а значит и большого размера). Одна из них вам понравилась, и вы решили поставить ей оценку «отлично». Выбираете нужную оценку и жмете на кнопку «Оценить». Браузер пошлёт оценку на сервер, который занесёт её в базу и вернёт браузеру пересчитанную среднюю оценку. Но чтобы отобразить ее , браузер перезагрузит всю страницу (обновит её). Естественно будут перезагружены и все картинки, а это лишний трафик и время ожидания.
Рассмотренный пример называется синхронным выполнением, т.е. скрипт выполняется синхронно с документом. Технология AJAX (расшифровывается как "Асинхронный JavaScript") позволяет скрипту работать как-бы независимо от основной страницы. Почему "как-бы" вы поймете после изучения данного урока.
Внутреннее устройство Ajax достаточно сложное и понимание его требует от программиста хороших глубоких знаний. Мы не будем вдаваться в дебри протоколов, а воспользуемся готовой библиотекой, например JsHTTPRequest. Эта библиотека предоставляет простой и понятный механизм использования Ajax для программистов даже с небольшим опытом.
Для начала работы надо скачать библиотеку, например отсюда. Кроме того, нам понадобится сервер, где мы будем размещать серверную часть Ajax. Серверная часть в данном случае состоит из нескольких скриптов на языке PHP ( файлов библиотеки JsHTTPRequest и файла нашего скрипта обновления оценок). В качестве сервера можно взять Denver, ZendCore или что-то подобное.
Итак, изменим предыдущий пример таким образом, чтобы счетчик не сбрасывался при посылке данных на сервер.
Скрипт счётчика остаётся прежним:
<script type="text/javascript" language="javascript">
var myCounter = 0
function runMultiple() {
var cntDiv = document.getElementById("counter");
if(cntDiv)
{
cntDiv.innerHTML = myCounter;
cntDiv.style.backgroundColor = '#'
+ (myCounter + 100) * 1234;
myCounter++;
}
}
var timerMulti = window.setInterval("runMultiple();", 1000);
</script>
Добавим подключение библиотеки JsHTTPRequest и специальный метод для обработки клика на кнопке оценки:
// подключаем файл библиотеки
<script src="JsHttpRequest.js"></script>
<script type="text/javascript" language="JavaScript">
function doLoad(value) {
// Создаём новый объект JsHttpRequest
var req = new JsHttpRequest();
// Определяем код функции, который будет
// автоматически вызван по окончании
// запроса к серверу
req.onreadystatechange = function() {
if (req.readyState == 4) {
// Записываем результаты в соответствующий блок
document.getElementById('result').innerHTML =
'<b>Оценка пользователя: '
+ req.responseJS.usrMark+ '<br> '
+ '<b>Новая средняя оценка: '
+ req.responseJS.avgMark+ '<br> ';
// Выводим возможные ошибки и отладочную инфу
document.getElementById('debug').innerHTML =
req.responseText;
}
}
// Готовим подключение к серверной части
req.open(null, 'smpl_backend.php', true);
// Посылаем данные на сервер
req.send( { mark: value } );
}
</script>
Осталось добавить немного HTML-кода для кнопки и размещения результатов:
<form>
Ваша оценка: <input type="text" name="text" />
<input type="button" value="Оценить"
onclick="doLoad(this.form.text.value)" />
</form>
<div id="result" style="border:1px solid #000; padding:2px">
Блок результатов
</div>
<div id="debug" style="border:1px dashed red; padding:2px">
Блок ошибок и отладочной информации
</div>
Этот скрипт работает следующим образом: при нажатии на кнопку «отправить» вызывается метод объекта JsHTTPRequest, с параметром в виде массива значений. Массив может иметь любой формат и содержать практически любые данные. Одновременно с этим мы описываем так называемую «callback» функцию. Эта функция (функция обратного вызова onreadystatechange) будет вызвана, когда будет получен ответ от сервера и надо будет обработать результаты. Наша функция просто отображает результаты запроса в соответствующих блоках.
В общем виде выполнение Ajax происходит в 3 этапа:
- Подготовка данных и интерфейса (например, блокировка полей ввода и отображение картинки с бегущей строкой или часами);
- Передача данных и ожидание результата;
- Обработка полученных результатов с помощью функции обратного вызова (например, скрытие картинки ожидания, отображение результатов и ошибок, разблокировка полей ввода).
Теперь рассмотрим серверную часть:
<?php
// подключаем AJAX-объект
require_once "JsHttpRequest.php";
// Создаём экземпляр AJAX-объекта и
// обязательно указываем кодовую страницу
$JsHttpRequest =& new JsHttpRequest("windows-1251");
// Получаем данные, переданные браузером пользователя
$userMark = @$_REQUEST['mark'];
$averageMark = $userMark + rand(1, 10);
// сохраняем результаты в выходной массив
$GLOBALS['_RESULT'] = array(
"usrMark" => $userMark,
"avgMark" => $averageMark
);
?>
В данном случае мы не учитываем предыдущие оценки, а для примера меняем оценку пользователя на случайную величину в диапазоне от 1 до 10.
Как видите, использовать Ajax довольно несложно. Главное правильно описывать передаваемые и возвращаемые параметры, а также постоянно помнить, что скрипт выполняется асинхронно, а значит надо предупреждать пользователя о необходимости подождать. Но иногда бывают ситуации, когда получить ответ становится невозможно (разрыв соединения, отключение сервера или отказ в обслуживании из-за перегрузки). В этом случае на помощь придёт специальный таймер, который взводится в момент отправки данных на сервер. Этот таймер срабатывает через заданный разработчиком промежуток времени (например, 30 секунд), сообщает пользователю об ошибке, разблокирует кнопки и поля ввода, а так же может попросить пользователя повторить попытку позже.
Использование Ajax дает разработчику массу полезных и эффективных способов построения интерфейса страницы. Опытный программист может создать веб-страницу, мало отличающуюся по внешнему виду и функциональности от обычного приложения. Яркий пример – сервис gmail, любимый многими пользователями за простоту и удобство.
