AJAX расшифровывается как Asynchronous JavaScript + XML (асинхронный JavaScript+XML) и технологией в строгом смысле слова не является. Это просто аббревиатура, обозначающая подход к созданию веб-приложений с помощью следующих технологий:

• стандартизированное представление силами XHTML и CSS для создания Web-форм и указания полей для использования в вашем приложении.;
• динамическое отображение и взаимодействие с пользователем с помощью DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера;
• обмен и обработка данных в виде XML и XSLT. XML один из наиболее развитых способов ввода и вывода данных из клиентской части Ajax;
• асинхронные запросы с помощью XMLHttpRequest;
• JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.

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

Приложения на основе Ajax, с другой стороны, могут отсылать на веб-сервер запросы, извлекающие только те данные, которые требуются в данный момент, обычно используя SOAP или некоторые другие диалекты веб-сервисов на XML-основе.

Объект XMLHttpRequest

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

• Создание нового объекта XMLHttpRequest в случае, если вы пишете код для браузеров не от Microsoft, т.е. если вы не используете Internet Explorer

  var xmlHttp = new XMLHttpRequest();

• Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML, поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом, а именно

   var x = new ActiveXObject("Msxml2.XMLHTTP");

  или   

   var x = new ActiveXObject("Microsoft.XMLHTTP");

Перечислим методы и свойства объекта XMLHTTPRequest:

• XMLHTTPRequest.open("method", "URL", async, "uname", "pswd") - создает запрос к серверу.
• method - тип запроса
• URL - URL запроса
• async - если True, то будет использоваться асинхронный запрос, то есть выполнение скрипта продолжится после отправки запроса. В противном случае скрипт будет ожидать ответа от сервера, заморозив UI.
• uname, pswd - логин и пароль для простой веб-авторизации.
• XMLHTTPRequest.send("content") - отправляет запрос на сервер. Значением content могут быть данные для POST-запроса или пустая строка.
• XMLHTTPRequest.abort()-Прекращает текущий запрос.
• XMLHTTPRequest.onreadystatechange - обработчик событий срабатывающий на каждое изменение состояния объекта. Состояния объекта могут быть следующими:

0 - до того как запрос отправлен (uninitialized)

1 - объект инициализирован (loading)

2 - получен ответ от сервера (loaded)

3 - соединение с сервером активно (interactive)

4 - объект завершил работу (complete)

• XMLHTTPRequest.responseText - возвращает полученные от сервера данные в виде строки.
• XMLHTTPRequest.responseXML - если ответ сервера пришел в виде правильного XML, возвращает XML DOM объект.
• XMLHTTPRequest.status - возвращает статус HTTP-ответа в виде числа. Например, 404 если запрашиваемая страница не была найдена на сервере.
• XMLHTTPRequest.readyState-Хранит текущее состояние готовности HTML.

Выполнение запроса

Нужно следовать одной и той же основной схеме практически во всех ваших Ajax-приложениях:

• Получить какие-либо данные из Web-формы.
• Создать URL для подключения.
• Открыть соединение с сервером.
• Установить функцию для сервера, которая выполнится после его ответа.
• Передать запрос.

Пример Ajax-метода, который выполняет  эти операции

function callServer() {
// Получить  Name и Patronymic из web-формы, т. е. Имя и Отчество
 
var Name = document.getElementById("Name").value;
 
var Patronymic = document.getElementById("Patronymic").value;
 
// Продолжать только если есть значения обоих полей
 
if (( Name  == null) || ( Name  == "")) return;
 
if ((Patronymic == null) || (Patronymic == "")) return;
 
// Создать URL для подключения
 
var url = "/scripts/getSurname.php?Name=" + escape(Name) + "&Patronymic=" + escape(Patronymic);
 
// Открыть соединение с сервером. x является ранее созданным обьектом HTTPRequest
 
x.open("GET", url, true);
 
// Установить функцию для сервера, которая выполнится после его ответа
 
x.onreadystatechange = updatePage;
 
// Передать запрос
 
x.send(null);
 
}

Состояния готовности HTTP

Сервер, закончив обработку запроса, ищет, какой метод вызвать в свойстве onreadystatechange объекта XMLHttpRequest.  На самом деле он вызывает этот метод каждый раз, когда меняется состояние готовности HTTP. Пояснение будет позже, а пока познакомимся с этими состояними.

Состояние готовности HTTP отображает состояние или статус запроса. Оно используется для определения того, начат ли запрос, принимается ли ответ, или завершен ли цикл запрос/ответ. Это состояние помогает также при определении того, можно ли читать текст или данные, которые сервер мог предоставить в ответе.

• 0: Запрос не инициализирован (перед вызовом open()).
• 1: Запрос инициализирован, но не был передан (перед вызовом send()).
• 2: Запрос был передан и обрабатывается (на данном этапе вы можете обычно получить                заголовки содержимого из ответа).
• 3: Запрос обрабатывается; часто в ответе доступны некоторые частичные данные, но сервер не закончил свой ответ.
• 4: Ответ завершен; вы можете получить ответ сервера и использовать его.

Стоит учитывать, что эти состояния готовности используются несколько непоследовательно. Вы могли бы ожидать, что состояния всегда изменяются последовательно от 0 до 4 , но на практике это редкий случай. Некоторые браузеры никогда не выдают 0 или 1, а сразу перепрыгивают к 2, затем к 3 и 4. Другие браузеры выдают все состояния. Но некоторые выдают состояние 1 несколько раз.

Для Ajax-программирования единственное состояние, с которым вам придется иметь дело, - это состояние готовности 4, указывающее на то, что ответ сервера завершен и можно проверить ответные данные и использовать их. Для учета этого в вашем методе обработки ответа сервера должны быть следующие строки

// действительно ли сервер завершил процесс ?
function updatePage()
{
	if (x.readyState == 4)
	alert("Server is done!");
}

Несмотря на явный успех, существует одна проблема – что если сервер ответил на ваш запрос и завершил обработку, но возвращает ошибку? Связано это с тем, что ваш серверный код не знает, был ли вызван он Ajax-приложением, JSP-страницей, обычной HTML-формой или любым другим типом кода; он имеет только традиционные Web-методы оповещения.  HTTP-коды могут иметь дело с различными вещами, которые могут возникнуть в запросе.

Например, вы составили запрос к URL, ввели URL неправильно и получили код ошибки 404, указывающий, что страница отсутствует. Это один из многих кодов состояния, которые могут получать HTTP-запросы . Также распространенными являются коды 403 и 401, указывающие на то, что запрашиваются защищенные или запрещенные данные. В каждом из этих случаев есть коды, которые приходят в ответе. Другими словами, сервер выполнил запрос (означает, что состояние готовности HTTP равно 4), но, возможно, не возвращает данные, ожидаемые клиентом.

То есть, кроме состояния готовности вы должны также проверять HTTP-состояние. Вам подходит код состояния 200, просто означающий, что все в порядке. С состоянием готовности 4 и кодом состояния 200 вы готовы обработать серверные данные, и эти данные должны быть теми, которые вы запрашивали (и нет ошибок или другой проблемной информации). Поэтому следует добавить еще одну проверку в ваш методе обработки ответа сервера

function updatePage() 
{
	if (x.readyState == 4 && x.status == 200)
	alert("Server is done!");
}

По своему усмотрению можете добавить проверку ошибок 401, 403, 404

Чтение текста ответа

Теперь, когда вы убеждены, что запрос полностью обработан (через состояние готовности) и сервер вернул нормальный положительный ответ (через код состояния), можно, наконец, заняться данными, переданными от сервера.Сервер будет записывать свой ответ в свойстве x.responseText объекта XMLHttpRequest.

Подробности о тексте в responseText, в терминах формата или длины, преднамеренно оставлены неопределенными. Это позволяет серверу установить этот текст виртуально во все что угодно. Например, один сценарий может возвратить разделенные запятыми значения, другой – разделенные вертикальной чертой значения (символ "|"), а третий может возвратить одну длинную строку текста. Все это решает сервер.

В нашем случае сервер возвращает Фамилии  и Возраста, разделенные запятыми. Имя и отчество используются для установки элементов формы

//обработка ответа сервера
function updatePage()
{
   if (request.readyState == 4)
  {
           if (request.status == 200)
           {
                    var response = request.responseText.split(",");
                    document.getElementById("SurName").innerHTML = response[0].regplace(/\n/g,  " ");
                   document.getElementById("Age").value =  response[1];
           } else  alert("status is " + request.status);
   }
}

Сначала извлекается responseText и разделяется на части по символам запятой (",") при помощи метода JavaScript split(). Получившийся массив значений присваивается массиву response.  Значения массива response являются Фамилией и Возрастом полученные по Имени и Отчеству . Поскольку строки в адресе разделены обычными разделителями строк (символ "\n"), нужно заменить их XHTML-разделителями строк <br />. Это выполняется при помощи функции replace() с регулярным выражением. Наконец, модифицированный текст устанавливается как inner HTML элемента div в форме HTML. В результате этого форма неожиданно обновляется пользовательской информацией.

Если сервер решил ответить в XML-формате, то он будет записывать ответ в свойстве x.responseXML объекта XMLHttpRequest.

Работа с XML ответом существенно отличается от работы с обычным неформатированным текстом и включает работу с синтаксическим анализатором, Document Object Model (DOM) и некоторые другие соображения.

Заключение

Прочитав данную статью Вы уже можете начать понимать основную идею о том, как работают такие приложения и что такое объект XMLHttpRequest. Хоть XMLHttpRequest является частью Ajax, информации написанной в данной статье должно хватить для написания Вами собственного простого Ajax-приложения. Ajax  основывается не только на XMLHttpRequest, но также на CSS, DOM, и других технологиях.

Некоторые особенности PHP-скриптов работающих с XMLHttpRequest

Для корректной работы с XMLHttpRequest, ваш PHP скрипт должен посылать ряд заголовков, а именно: тип содержимого и его кодировку (важно, если вы хотите работать с кириллическим выводом), а также параметры кеширования содержимого — нужно устранить любое кеширование (понятное дело, чтобы полученная информация была всегда свежей).

Посыл этого набора заголовков на PHP выглядит примерно так:

header("Content-type: text/plain; charset=windows-1251");

header("Cache-Control: no-store, no-cache, must-revalidate");

header("Cache-Control: post-check=0, pre-check=0", false);

Ещё, если вы планируете вывод в формате text/plain (как у меня), учтите, что специальные символы (типа /n,/r,/t..) обрабатываются по умолчанию только в строках с двойными кавычками ("таких"):

//правильно
echo "Строка\nЕщё строка";
//неправильно
echo 'Строка\nЕщё строка';