====== Принцип AJAX технологии ======

В сети все чаще можно встретить сайты, которые используют, так называемое обновление данных без перезагрузки страницы. Это и есть технология [[wp>Ajax_(programming)|AJAX]]. AJAX позволяет сократить трафик, нагрузку на сервер, а как результат поднять производительность системы.

Однако надо понимать, что AJAX это не самостоятельная технология, а некая концепция использования нескольких технологий.

Прежде чем начать разбираться с AJAX, давайте вначале взглянем на процесс происходящий при обычном общении браузера и сервера.

===== Синхронный запрос =====

Итак вы зашли на некую страничку и нажали на какую-нибудь ссылку или заполнили форму регистрации. При этом происходит следующее:

  - Браузер формирует некий запрос (на получение новой странички или для обработки заполненной формы).
  - Браузер отправляет запрос на Сервер и блокирует управление страничкой.
  - Сервер обрабатывает полученный запрос и формирует ответ.
  - Браузер получает данные от Сервера и выводит их на страничку.
  - Браузер передает управление страничке.
	
Другими словами, при запросе нам нужно подождать пока Сервер обработает запрос и Браузер отобразит ответ. Надо отметить, что все подключаемые стили и скрипты будут получены заново.

Как вы уже заметили у нас есть два участника всех событий - Браузер и Сервер. Давайте взглянем, что можно получить используя технологию AJAX.

===== AJAX (асинхронный) запрос =====

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

Что же получается:

  - JavaScript готовит некие данные для передачи Серверу и сообщает Браузеру, что пора отправлять.
  - Браузер отправляет запрос серверу и сразу возвращает управление странице.
  - Сервер обрабатывает полученный запрос и формирует ответ.
  - Браузер получает данные от Сервера и передает их в JavaScript.
  - JavaScript обновляет страничку.

Как видно из описания процесса нам не нужно ждать пока запрос обработается сервером, а можно сразу продолжать работать. К тому же у нас появился третий участник процесса - JavaScript.

Принцип работы очень прост, но давайте же рассмотрим все на практике.

===== Практика =====

Вначале мы рассмотрим различные реализации клиентского кода написанного на JavaScript. Далее посмотрим на серверный код, написанный на PHP.

==== Код на стороне клиента (JavaScript) ====

=== Объект XMLHttpRequest ===

Объект [[wp>XMLHttpRequest|XMLHttpRequest]] позволяет оправлять запросы напрямую к веб-серверу и загружать данные ответа сервера напрямую в вызывающий скрипт. Этот объект реализован во всех современных браузерах, однако, создание объекта отличается (мы все любим IE).

Алгоритм работы будет следующим:
  - Создание экземпляра объекта XMLHttpRequest.
  - Открытие соединения.
  - Установка обработчика события (нужно делать после открытия и до отправки в IE).
  - Отправка запроса.

== Создание объекта ==

Как я говорил выше, в разных браузерах создание XMLHttpRequest реализовано по разному, поэтому предлагаю вам сразу написать универсальную функцию создания:

<code javascript>
JavaScript:

function ajaxRequest() {
  if(typeof XMLHttpRequest === 'undefined') {
    XMLHttpRequest = function() {
      try {
        return new ActiveXObject("Msxml2.XMLHTTP"); 
      }
      catch(e) {}
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e) {}
      throw new Error("This browser does not support XMLHttpRequest.");
    };
  }
  return new XMLHttpRequest();
}

var request = new ajaxRequest();
</code>

== Открытие соединения ==

Соединение с сервером открывается методом open() с передачей следующих параметорв:
	
  * тип запроса - в общем случаи POST или GET.
  * URL по которому отправляется запрос.
  * флаг асинхронно/синхронно (да и тут можно отправить обычный запрос).
  * логин пользователя, при необходимости.
  * пароль пользователя, при необходимости.

К примеру, отправляем POST запрос скрипту ajax.php:

<code javascript>
JavaScript:

var request = new ajaxRequest();
request.open('POST', 'ajax.php', true);
</code>
	
== Обработчик ответа ==

По мере обработки запроса сервером, он будет оповещать браузер о состоянии (инициализация, процесс обработки, готово...). При этом браузер каждый раз передает в JavaScript эту информацию. Давайте взглянем:

<code javascript>
JavaScript:

var request = new ajaxRequest();
request.open('POST', 'ajax.php', true);

//цепляем обработчик
request.onreadystatechange = function() {
  //состояние "готово" и статус "OK"
  if(request.readyState == 4 && request.status == 200) {
    var answer = request.responseText;
    //обработка полученных данных
  }
}
</code>

== Отправка данных ==

Для отправки данных серверу используется метод send(). Для GET запросов можно в качестве параметра указать null. Строго говоря для IE это обязательное требование, но мы же не знаем, какой браузер будет у пользователя, поэтому для отправки пустых данных всегда используйте параметр null.

<code javascript>
JavaScript:

var param = 'login=' + encodeURI(input_login) + '&pass=' + encodeURI(input_pass);
var request = new ajaxRequest();
request.open('POST', 'ajax.php', true);
request.onreadystatechange = updatePage;
request.send(param);
</code>

Вот и вся основная идея работы с XMLHttpRequest. 

=== Библиотека jQuery ===

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

Тут я приведу только общий пример AJAX запроса, а комментарии к коду и описанная идея должны дополнить картину:

<code javascript>
JavaScript:

$.ajax({
  type: 'POST',     //тип запроса
  url: 'ajax.php',  //адрес скрипта-обработчика на сервере
  data: {login: input_login, pass: input_pass},  //передаваемые данные
  dataType: 'json'  //ответ в формате JSON
}).done(function(answer) {
  //обработка ответа от сервера
});
</code>

В реализации jQuery вам не нужно думать о том какой браузер запускает AJAX, да и данные передать гораздо проще (меньше писать). Кстати в jQuery есть еще реализации $.get и $.post, которые работают аналогично $.ajax, толко уже сразу подразумевается какой тип запроса будет отправлен - GET или POST.

==== Код на стороне сервера (PHP) ====

По большому счету код на стороне сервера останется тем же, что и при отправке обычного запроса, только вот в качестве ответа будет не страница целиком, а лишь нужные нам данные. Кстати можно вообще вернуть чистые данные в виде json, к примеру, а уже потом в JavaScript обернуть их в HTML. Подобный подход может существенно разгрузить сервер, однако нагрузка на операционную систему пользователя возрастет.

Серверный код я буду рассматривать на языке PHP - для меня он ближе, но вы должны пониать, что в качестве серверного языка вы в праве выбрать любой удобный вам. Так же я рассмотрю случай возвращения данных в виде JSON.

<code php>
PHP:

$login = !empty($_POST['login']) ? $_POST['login'] : '';
$pass = !empty($_POST['pass']) ? $_POST['pass'] : '';

if(!empty($login) && !empty($pass)) {
  if($login == 'login' && $pass == 'password') {
    $result = array(
      'status' => 'done',
      'message' => 'Привет, как дела?'
    );	
  }
  else {
    $result = array(
      'status' => 'error',
      'message' => 'Неверный логин или пароль!'
    );	
  }
}
else {
  $result = array(
    'status' => 'error',
    'message' => 'Укажите логин и пароль!'
  );
}

echo json_encode($result);
</code>

JavaScript обработчик может выглядить так:
<code javascript>
JavaScript:

$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: {login: input_login, pass: input_pass},
  dataType: 'json'
}).done(function(answer) {
  if(answer.status == 'done') {
    alert(answer.message);
  }
  else if(answer.status == 'error') {
    console.log('ERROR: ' + answer.message);
  }
});
</code>