Этапы выполнения AJAX запроса

Рассмотрим этапы выполнения AJAX запроса, представленные на схеме рис. 89.

Рисунок 89 – Этапы выполнения AJAX запроса

Создание экземпляра объекта XMLHttpRequest

Объект XMLHttpRequest позволяет получать данные с сервера в фоновом режиме. Как правило, возвращаемая информация представляется в формате XML, но данный объект также позволяет работать с любыми текстовыми данными. Объект XMLHttpRequest впервые был реализован компанией Microsoft в виде объекта ActiveX. Сейчас он уже доступен в браузерах Mozilla, Netscape (начиная с 7-ой версии) а также в Safari (с версии 1.2), естественно, не в виде ActiveX-компоненты. Объект XMLHttpRequest представляет собой набор API функций, используемый в JavaScript, VBScipt и т.п. для передачи данных XML по протоколу HTTP.

AJAX запросы создаются с использованием свойств и методов объекта XMLHttpRequest. Первым шагом становится создание экземпляра объекта XMLHttpRequest

Стандартный синтаксис создания экземпляра объекта XMLHttpRequest

Старые браузеры типа IE6 используют объект ActiveXObject вместо объекта XMLHttpRequest, поэтому синтаксис для создания экземпляра объекта для него будет отличатся от приведенного выше.

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

Свойства объекта XMLHttpRequest

Основные свойства объекта XMLHttpRequest представлены в таблице 11.

Таблица 11 – Основные свойства объекта XMLHttpRequest

Название метода	Описание метода
responseXML	Хранит ответ сервера как XML файл.
status	Хранит код ответа сервера.
onreadystatechange	Функция, код которой будет исполнен при изменении состояния готовности сервера.
responseText	Хранит ответ сервера как строку символов.

Методы объекта XMLHttpRequest

Основные методы объекта XMLHttpRequest представлены в таблице 12.

Таблица 12 - Основные методы объекта XMLHttpRequest

Название метода	Описание метода
open(тип_запроса, url, способ)	Создает запрос. тип_запроса устанавливает тип запроса (GET или POST). url устанавливает путь к запрашиваемому файлу. способ устанавливает способ выполнения запроса. При значении true запрос будет выполнен асинхронно, при false синхронно.
send('данные')	передает данные на сервер.
setRequestHeader(заголовок, значение)	добавляет HTTP заголовок к запросу. заголовок содержит имя заголовка значение содержит значение заголовка

Отправка запроса на сервер

На сервер данные отправляются при помощи методов open() и send() объекта XMLHttpRequest.

Метод open()

Варианты вызова:

open( method, URL );

open( method, URL, async );

open( method, URL, async, userName );

open( method, URL, async, userName, password ).

Параметр method представляет собой HTTP-метод. Чаще всего используются методы GET либо POST, однако иногда возникает необходимость использовать методы TRACE/DELETE/PUT. Подробное описание методов представлено в таблице 13.

Таблица 13 – Описание методов передачи данных

Метод	Описание
GET	передает информацию в адресе страницы
POST	передает информацию в заголовках
TRACE	При запросе методом TRACE, клиент может увидеть, какие изменения были сделаны в запросе, промежуточными серверами.
DELETE	Удаляет ресурс, расположенный по заданному URI.
PUT	Используется для загрузки данных запроса на указанный URI. В случае отсутствия ресурса по указанному в заголовке URI, сервер создает его и возвращает код статуса 201 (Created), если ресурс присутствовал и был изменен в результате запроса PUT, выдается код статуса 200 (Ok) или 204 (No Content).

Параметр URL – адрес запроса. Чаще всего используется протокол HTTP/HTTPS, однако есть возможность использовать протоколы FTP или FILE: //. При передаче данных действует ограничение безопасности " same origin policy".

Примечание. Принцип одинакового источника (англ. same origin policy) — это важная концепция безопасности для клиентских языков программирования, например JavaScript. Политика разрешает сценариям, находящимся на страницах одного сайта, доступ к методам и свойствам друг друга без ограничений, но предотвращает доступ к большинству методов и свойств для страниц на разных сайтах. Одинаковыми признаются источники, у которых совпадают три основных параметра:

ü домен;

ü порт;

ü протокол.

Параметр async. Принимает значение true или false, тем самым включая или отключая возможность отправки асинхронных запросов. Значение true устанавливается при использовании асинхронных запросов;

Параметр userName, password - Передаются значения имени пользователя и пароля, нужные для HTTP-аутентификации.

Примечание. Имя пользователя и пароль небезопасно хранить в скрипте, в особенности на клиентской части, так как данные аутентификации будут доступны сторонним пользователям.

Рассмотрим стандартный синтаксис запроса с использованием метода GET.

Синтаксис запроса:

Метод send()

Синтаксис запроса:

Данный метод открывает соединение и отправляет запрос на сервер.

В body находится тело запроса. Не у всякого запроса есть тело, например, у GET-запросов тела нет, а у POST – основные данные как раз передаются через body.

Вместе с AJAX запросом на сервер могут быть переданы различные данные.

Например, требуется создать калькулятор, складывающий два числа. Код будет выглядеть следующим образом:

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

Для работы с личными данными применяется метод POST. Рассмотрим стандартный синтаксис запроса с использованием метода POST:

Как видно из примера, данные не передаются на сервер в теле запроса, тем самым обеспечивая большую конфиденциальность и безопасность передаваемых значений.

⇐ Предыдущая 27 28 29 30 31 32 333435 36 Следующая ⇒