Основы AJAX для начинающих

Все начинающие web-мастера рано или поздно сталкиваются с проблемой динамического изменения данных на HTML странице, причем без перезагрузки этой самой страницы. И на помощь приходит, конечно же, JavaScript, но он не умеет обращаться к серверу и получать данные без перезагрузки страницы, но зато это умеет AJAX и о нем мы сегодня и поговорим.

Примечание. Если вы не знаете основы JavaScript, и не можете понять простой код на JavaScript, советую, для начала, прочитать вот эти статьи "JavaScript для начинающих – Простые примеры" и "JavaScript – Пример расширения формы регистрации" так как без знаний JavaScript учить AJAX бессмысленно!

Для начала дадим определение.

AJAX (Asynchronous JavaScript and XML) - асинхронный JavaScript и XML, это механизм взаимодействия с сервером по средствам которого происходит обмен данными с этим сервером, не перезагружая всю страницу целиком.  Запрос на AJAX может быть не только асинхронный, но и просто синхронным, но такие запросы используются редко. Так как при них браузер зависает, до того момента пока не будет получен ответ с сервера, в отличие от асинхронного запроса, при котором посылается запрос и пользователь может делать на странице все что угодно, а когда будет получен ответ от сервера сработает обработчик и появятся изменения на странице.  Как посылать синхронные и асинхронные запросы научимся ниже в примерах, за это отвечает всего один параметр.

Теперь поговорим о том, для чего нам нужен ajax

И первое что приходит на ум это, конечно же, быстрый и удобный интерфейс для пользователя. Другими словами пользователь любит, когда у него быстро все работает и не нужно делать лишних телодвижений, к тому же чтобы это все красиво выглядело, JavaScript и AJAX с этим отлично справляются.

Второе что хотелось бы отметить это уменьшение нагрузки на сервер. Так как при перезагрузке страницы или при открытии новой страницы нагрузка на сервер гораздо больше в отличие от запроса и получение конкретных данных. По-другому можно объяснить еще и так, при открытии страницы отрабатывают все серверные скрипты, которые нужны для отображения этой страницы, а при запросе через ajax отрабатывает только один скрипт нужный для обработки конкретного запроса, а вывод на экран происходит уже с помощью JavaScript, который является клиентской технологией.

В-третьих, это, конечно же, уменьшение трафика, так как вес всей страницы намного больше небольшого куска данных, которые Вы будете получать через запрос на ajax.

Не могу не отметить и небольшие недостатки данного механизма. Во-первых, JavaScript и AJAX работает на стороне клиента, поэтому для того чтобы все работало нужно включить поддержку JavaScript в браузере, просто она, в целях безопасности может быть выключена и ваше творение просто на всего может не работать.

Во-вторых, можно отметить то, что при использовании ajax полученные данные не индексируются поисковыми системами и, конечно же, нельзя поставить закладки в браузере.

Хватит теории, перейдем к практике. Сразу скажу, что ajax это не сложно, и если вы разобрались с JavaScript, то разобраться с ajax будет очень просто даже легче чем с JavaScript!

И начну я с того, что весь ajax строится на объекте XMLHttpRequest, у которого есть несколько свойств и несколько методов, которые легко освоить и запомнить. Объект XMLHttpRequest это своего рода мини-браузер от имени, которого и будет посылаться запрос к серверному скрипту.

Весь механизм начинается с создания этого объекта, и создать его можно по-разному, в старых браузерах это делается одним способом, а во всех новых другим способом. Если вдруг вы не планируете использовать ajax на старых браузерах, например вы создаете ajax приложение для корпоративной сети, в которой установлены современные браузеры, и вы можете смело создать этот объект одной строкой:

var request = new XMLHttpRequest();

где, в переменной request и будет хранится наш объект.

Но если ваше приложение могут использовать и в старых браузерах то лучше использовать универсальный способ создания данного объекта, мне например, нравится вот такой способ:

function getXmlHttpRequest()
{
	if (window.XMLHttpRequest) 
	{
		try 
		{
			return new XMLHttpRequest();
		} 
		catch (e){}
	} 
	else if (window.ActiveXObject) 
	{
		try 
		{
			return new ActiveXObject('Msxml2.XMLHTTP');
		} catch (e){}
		try 
		{
			return new ActiveXObject('Microsoft.XMLHTTP');
		} 
		catch (e){}
	}
	return null;
}

Для создания объекта XMLHttpRequest мы просто вызовем функцию  getXmlHttpRequest, которая вернет нам нужный объект.

Объект создан, теперь можно писать код на JavaScript, который будет формировать запрос на сервер и обработку данных полученных с сервера.

Для того чтобы наш урок прошел полноценно нам потребуется небольшой серверный скрипт, я буду использовать серверный язык программирования PHP, и наш скрипт будет просто возвращать текущие время на сервере. Назовем его mytime.php, его код:

Код mytime.php:

<?php
//серверный скрипт(обработчик запроса)
//посылаем заголовок для правильной кодировки
header("Content-Type:" . "text/html; charset=utf8");
// Чтение параметра в запросе
	if (isset($_GET["MyTime"])){
			echo date("H:i:s");// Текущее время
		}
?>

Здесь я думаю все понятно, мы проверяем параметр, пришедший к нам методом GET, т.е. MyTime, и если параметр действительно к нам пришел, то возвращаем текущие время на сервере. Советую при разработке ajax приложения на серверном скрипте делать больше проверок, так как ajax запрос можно подделать. Можно делать вот такие проверки, например:

• - можно дополнительно посылать  заголовок  X-REQUESTED-WITH а на серверном обработчике проверять его;
• - также добавить проверку реферера, т.е. откуда пришел запрос;
• - еще можно осуществлять проверку с помощью сессий.

Далее идет сам код (я оформил его также в php файл index.php), в самом коде я все подробно комментирую, поэтому вопросов возникнуть не должно.

Код index.php:

<?php
header("Content-Type:" . "text/html; charset=utf8");
?>
		<script type="text/javascript" charset="UTF-8">
	//функция создания объекта XMLHttpRequest
	function getXmlHttpRequest(){
			if (window.XMLHttpRequest) 
			{
				try 
				{
					return new XMLHttpRequest();
				} 
				catch (e){}
			} 
			else if (window.ActiveXObject) 
			{
				try 
				{
					return new ActiveXObject('Msxml2.XMLHTTP');
				} catch (e){}
				try 
				{
					return new ActiveXObject('Microsoft.XMLHTTP');
				} 
				catch (e){}
			}
			return null;
	}
	function serverTime(){
	  // Объект XMLHttpRequest
	  var request = getXmlHttpRequest();
	  /*свойство onreadystatechange это обработчик события, которое реагирует 
	  на любое изменения данного объекта*/
	  request.onreadystatechange = function (){
	  /*свойство readyState - состояние объекта		
	  0 — не инициализирован
	  1 — открыт, 
	  2 — отправка данных, 
	  3 — получение данных,  
	  4 — данные загружены
	  рекомендую использовать только 4*/
	  if (request.readyState == 4) {
	  /*свойство status это HTTP-статус ответа: 200-OK, 404-Not Found*/
	  if (request.status == 200){
			var result = document.getElementById("MyId"); // Чтение ответа
			result.firstChild.nodeValue = request.responseText; // Вывод на экран
			} else document.write("Произошла ошибка. Обнови страничку");
		}
	  }
	  // Адрес серверного скрипта
	  var url = "mytime.php?MyTime";
	  /* Запрос на сервер, true означает что это асинхронный запрос
	  если было бы false то это синхронный запрос*/
	  request.open("GET", url, true);  
	  request.setRequestHeader("Content-type", "charset=utf8");
	  request.send(null); // посыл данных
		}
	</script>
<?php
	echo '<h1 id = "MyId">Поле для времени</h1>';
	echo '<p><button onclick="serverTime()">Узнать время</button></p>';
?>

Вот два файла (mytime.php и index.php) с помощью которых вы легко можете проверить работу ajax, код этих файлов представлен выше.

Кстати в вышеуказанном примере мы использовали передачу данных методом GET, есть много способов передачи данных и все основные данные передаются с помощью метода POST. Давайте переделаем нашу функцию serverTime чтобы она передавала данные методом post, это сделать очень легко так как поменять нужно всего несколько строк.

Код функции serverTime с передачей параметров методом post:

function serverTime(){
	  var request = getXmlHttpRequest();
	  request.onreadystatechange = function (){
	  if (request.readyState == 4) {
		  if (request.status == 200){
			  var result = document.getElementById("MyId"); 
			  result.firstChild.nodeValue = request.responseText; 
	  	  } else document.write("Произошла ошибка. Обнови страничку");
	  	}
	  }
	  var url = "mytime2.php";//изменим адрес серверного  обработчика
	  var data = "MyTime=1";//задаем параметры
	  request.open("POST", url, true); // указываем метод post
	  //посылаем два заголовка: тип данных и размер данных 
	  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  request.setRequestHeader("Content-Length", data.length);
	  request.send(data); // посыл данных, вместо null вставляем переменную с параметрами
}

Не забудьте изменить серверный обработчик, чтобы он проверял данные пришедшие методом post. Измените строку isset($_GET["MyTime"] на isset($_POST["MyTime"] и все будет работать точно так же как и с помощью GET.

Как вы заметили ajax совсем не сложная штучка, хотя это только основы, но все равно если вы разобрались, например с JavaScript то освоить ajax будет не проблема.

В сегодняшнем уроке мы рассмотрели только основы, в ajax есть еще что изучать (хотя не много), например передача сложных данных и т.д., но надеюсь, этот урок вам помог узнать, что же такое ajax и в следующих уроках мы продолжим изучать этот механизм взаимодействия с сервером! Удачи!