Создав объект XMLHttp, можно приступать к выполнению запросов HTTP из кода JavaScript. Первый шаг заключается в вызове метода open (),который
инициализирует объект. Этот метод принимает три аргумента:
• Тип запроса. Строка, определяющая тип выполняемого запроса; обычно GET или POST (только эти два типа поддерживаются всеми броузерами).
• URL. Строка, определяющая URL, куда должен быть отправлен запрос.
• Async. Логическая величина, определяющая режим выполнения запроса (асинхронный или синхронный).
Последний аргумент, async, имеет большое значение, поскольку он задает порядок исполнения запроса. Если он имеет значение true, то запрос передается асинхронно, и сценарий JavaScript продолжает свою
работу, не ожидая получения ответа, поэтому, для того чтобы перехватить ответ сервера, необходимо предусмотреть обработчик события.
Если в этом аргументе передается значение false, то запрос передаете синхронно, и исполнение сценария JavaScript будет приостановлен в этой точке до получения ответа сервера. Это означает, что если ответ
сервера будет идти достаточно долго, то пользователь в течение этот времени не сможет взаимодействовать с броузером. Поэтому обычно в приложениях, разрабатываемых на базе технологии Ajax, применяются
асинхронные запросы, а с помощью синхронных запросов организуют обмен короткими сообщениями между клиентом и сервером.
Так, чтобы с помощью асинхронного запроса GET запросить файл info.txt , надо начать со следующих строк:
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", "info.txt", true);
Обратите внимание, что в этом случае указание типа запроса в таком виде вполне допустимо, хотя формально типы запросов должны запи сываться в верхнем регистре.
Далее необходимо определить обработчик события on readystatechange.
Объект XMLHttp имеет свойство readyState, которое изменяет свое значение по мере прохождения запроса. У этого свойства есть пять возможных значений:
• 0 (не инициализирован): Объект был создан, но метод ореп() еще я вызывался.
• 1 (ввод): Метод open () был вызван, но сам запрос еще не был отправлен
• 2 (отправлен): Запрос был передан.
• 3 (идет обмен): Ответ сервера принят частично.
• 4 (завершен): Все данные были приняты и соединение было закрыто.
Всякий раз, когда изменяется значение свойства readyState, возникает событие readystatechange и вызывается его обработчик. В разных броузеpax объект XMLHttp реализован немного по-разному, и во всех броузерах имеются только значения свойства readyState, равные 0, 1 и 4. Однако в большинстве случаев для разработчика представляет интерес толко значение 4, свидетельствующее о том, что получен ответ от сервера:
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", "info.txt", true);
oXmlHttp.onreadystatechange = function(){
if (oXmlHttp.readyState == 4) {
alert ("Получен ответ. ");
}
};
Последний шаг процедуры отправки запроса - это вызов метода send(),выполняющий отправку запроса. Этот метод принимает единственный аргумент - строку с телом запроса. Если запрос не имеет тела (запросы типа GET не имеют тела), то в этом аргументе передается значение null:
var oXmlHttp = zXmlHttp.createRequest() ;
oXmlHttp.open("get", "info.txt", true);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
alert("Получен ответ.");
}
};
oXmlHttp;. send( null);
Вот и все! Запрос послан, а когда приходит ответ, выводится сообщение. Главная особенность объекта XMLHttp состоит в том, что он позволяет получить доступ к возвращаемым данным, состоянию ответа и к заголовкам ответа.
Для того чтобы получить данные, возвращаемые по запросу, можно прибегнуть к свойству responseText или responseXML. Первое возвращает строку, содержащую тело ответа, а второе - объект документа XML и используется только в том случае, если возвращаемые данные имеют
тип text/xml. (Документы XML рассмотрены в главе 4.) Таким образом, чтобы извлечь текст, содержащийся в файле info, txt,необходимо выполнить следующий вызов:
var sData = oXmlHttp.responseText;
Обратите внимание: этот вызов вернет содержимое файла info.txt только в том случае, если во время его передачи не возникло ошибок.
Если, например, файл info.txt не существует, то свойство responseText будет содержать сообщение сервера, описывающее ошибку 404. К счастью,
есть возможность проверить наличие ошибок.
Свойство status содержит код статуса HTTP, передаваемый в ответе, а свойство statusText - текст описания статуса (например, «ОК» или «Not Found»). Эти два метода позволяют или убедиться, что получении
именно те данные, которые вы запрашивали,или сообщить пользователю о возникшей ошибке:
if (oXmlHttp.status == 200) {
alert ("Получены следующие данные: " + oXmlHttp. responseText;
} else <
alert("Возникла ошибка: " + oXmlHttp.statusText;
}
Вообще, чтобы убедиться в успешном завершении запроса, следует всегда проверять код статуса, который в этом случае будет равен 200.
Свойство readyState будет иметь значение 4 даже в случае появления ошибки, поэтому проверки одного этого свойства будет недостаточно.
В этом примере содержимое свойства responseText отображается только тогда, когда свойство status содержит код 200, а в противном случае выводится сообщение об ошибке.
Свойство statusText не реализовано в Opera, а в других броузерах иногда возвращает неточное описание статуса. Нельзя полагаться на свойстве statusText для проверки наличия ошибок.
Как уже упоминалось, объект XMLHttp предоставляет возможность получить доступ к заголовкам ответа. Конкретный заголовок можно извлечь» посредством метода getResponseHeader(), передав ему имя требуемого заголовка.
Один из наиболее часто используемых заголовков - Content-Type, который несет в себе информацию о типе переданных данных:
var sContentType = oXmlHttp.getResponseHeader("Content-Type");
if (sContentType == "text/xml") {
alert("Принят документ XML.");
} else if (sContentType == "text/plain") {
alert("Принят обычный текст.");
} else {
"alert("Приняты данные неверного типа.");
}
Этот фрагмент кода проверяет тип содержимого ответа и выводит сообщение, описывающее тип полученных данных. Чаще всего от сервера принимаются данные только в формате XML (тип содержимого text/xml) или в виде обычного текста (text/plain), потому что данные этш
типов проще всего обрабатывать с помощью JavaScript.
Для того чтобы увидеть сразу все заголовки, возвращаемые сервером,можно обратиться к методу getAHResponseHeaders().Заголовки возвра щаются в строке и отделяются друг от друга либо символом перевода строки (символ \n), либо парой символов (возврата каретки и перевода строки, символы \r\n); т.е. выделить заголовки можно так:
var sHeaders = oXmlHttp.getAHResponseHeadersO;
var aHeaders = sHeaders.split(/\r?\n/);
for (var i=0; i < aHeaders.lengthy i++) {
alert(aHeaders[i]);
}
Этот пример разбивает строку на массив заголовков с помощью мето,split(),которому в качестве аргумента передается регулярное выражение (это выражение выполняет поиск совпадений с символом перевода строки, которому, возможно, предшествует СИМВОЛ возврата каретки).
Теперь можно обойти в цикле все заголовки и сделать с ними все, что вам заблагорассудится. Запомните: каждая строка в массиве aHeaders представлена как имя_заголовка:содержимое_заголовка.
Кроме того, можно добавить свой заголовок в запрос, прежде чем отправить его. Этот прием позволяет указать тип передаваемых данных или передать некоторые дополнительные сведения, которые могут потребоваться
серверу для обслуживания такого запроса. Для этого надо
перед обращением к методу send() вызвать метод setRequestHeader():
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", "info.txt", true);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
alert("Получен ответ.");
}
};
oXmlHttp.setRequestHeader("myheader", "myvalue");
oXmlHttp.send(null);
В этом фрагменте кода к запросу перед его отправкой добавляется заголовок с именем myheader. Этот заголовок будет добавлен к заголовкам по умолчанию в виде myheade г: myvalue.
До этого момента мы имели дело только с асинхронными запросами,которые более предпочтительны в большинстве ситуаций. При работе с синхронными запросами нет необходимости назначать обработчик события onreadystatechange, поскольку метод send() вернет управление только после получения ответа. Это позволяет писать такие фрагменты кода:
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", "info.txt", false);
oXmlHttp.send(null);
if (oXmlHttp.status == 200) {
alert("Получены следующие данные; " + oXmlHttp.responseText;
} else {
alert("Возникла ошибка; " + oXmlHttp.statusText;
}
Синхронные запросы (когда в третьем аргументе методу send() передается значение false) позволяют обрабатывать полученные данные сразу после вызова send(). Это может оказаться удобным в случаях, когда
необходимо, чтобы пользователь дождался получения ответа или когда ожидается получить небольшой объем данных (например, меньше 1 Кбайт). В случае передачи больших объемов данных следует предпочесть асинхронные запросы.