HTML, Excel, Word, SEOОсновы JavaScript ⇒ Немного об AJAX

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney



Немного об 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 этапа:

  1. Подготовка данных и интерфейса (например, блокировка полей ввода и отображение картинки с бегущей строкой или часами);
  2. Передача данных и ожидание результата;
  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, любимый многими пользователями за простоту и удобство.



В начало страницы



В начало страницы