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

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

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

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

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

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

Браузер формирует некий запрос (на получение новой странички или для обработки заполненной формы).
Браузер отправляет запрос на Сервер и блокирует управление страничкой.
Сервер обрабатывает полученный запрос и формирует ответ.
Браузер получает данные от Сервера и выводит их на страничку.
Браузер передает управление страничке.

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

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

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

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

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

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

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

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

Практика

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

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

Объект XMLHttpRequest

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

Алгоритм работы будет следующим:

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

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

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

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();

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

Соединение с сервером открывается методом open() с передачей следующих параметорв:

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

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

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

Обработчик ответа

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

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

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

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);

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

Библиотека jQuery

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

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

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

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

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

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

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

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);

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);
  }
});