Материалы

SEO
Железо
Сети
Интернет
CSS
HTML
PHP
JavaScript
AJAX
MySQL
Apache
FAQ
Windows
Linux
Дизайн
Программирование
Безопасность

[:NetFAQ://]

Поиск

[:NetFAQ://]

Партнеры

[:NetFAQ://]

Реклама

Выставка экстренного оборудования: услуги охраны.

автозапчасти форд

[:NetFAQ://]

Уроки AJAX. Использование XMLHttp.

Данный урок позволит составить представлени об использовании объекта XMLHttp, на конкретном примере освоить метод синхронной/асинхронной отправки запросов на сервер, обработку состояний readyState, посылку заголовков, а так-же отслеживание ошибок в ходе сетевого взаимодействия.

В предыдущем уроке было описано создание объекта XMLHttp, с ним можно ознакомиться здесь, что я настоятельно рекомендую сделать в том случае, если вы его по каким-то причинам пропустили.

Использование XMLHttp.

Итак, начнём. Создав объект XMLHttp, можно приступить к выполнению запросов HTTP из кода JavaScript. Первый шаг заключается в вызове метода open(), который инициализирует объект. Этот метод принимает три аргумента:

Типа запроса. Строка, определяющая тип выполняемого запроса; обычно GET или POST (только эти два типа поддерживаются всеми браузерами).
URL. Строка, определяющая URL, т.е. куда должен быть отправлен запрос.
Async. Логическая величина, определяющая режим выполнения запроса (асинхронный или синхронный)

Последний аргумент async, имеет большое значение, поскольку он задаёт порядок исполнения запроса. Если он имеет значение true, то запрос передается асинхронно, и сценарий JavaScript продолжает свою работу, не ожидая получения ответа, поэтому для того чтобы перехватывать ответ сервера, необходимо предусмотреть обработчик события.
Если в этом аргументе передается значение false, то запрос передается синхронно, и использование сценария JavaScript будет приостановлено в этой точке до получения ответа сервера. Это означает, что если ответ сервера будет идти достаточно долго, то пользователь в течении этого времени не сможет взаимодействовать с браузером. Поэтому обычно в AJAX приложениях применяются асинхронные запросы, а с помощью синхронных запросов организуют обмен короткими сообщениями между клиентом и сервером.

Так, чтобы с помощью асинхронного запроса GET запросить файл info.txt, надо начать со селудующих строк:

var oXmlHttp = createXMLHttp(); /* исспользуем ф-цию из предыдущего урока */
oXmlHttp.open("get","info.txt",true);

Далее необходимо определить обработчик onreadystatechange.
Объект XMLHttp имеет свойство readyState, которое изменяет свое значение по мере прохождения запроса. У этого свойства есть пять возможных значений:

0 (не инициализирован): Объект был создан, но метод open() ещё не вызывался.
1 (ввод): Метод open() был вызван, но сам запрос ещё не был отпавлен.
2 (отправлен): Запрос был передан.
3 (идёт обмен): Ответ сервера принят частично.
4 (завершен): Все данные были переданы и соединение закрыто.

Всякий раз, когда изменяется значение свойства readyState, возникает событие readystatechange и вызывается его обработчик. В разных браузерах, объект XMLHttp реализован немного по разному, и во всех браузерах имеются значения свойства readyState, равные 0,1 и 4. Однако в большинстве случаев, для разработчиков представляет интерес только значение 4, свидетельствующее о том что был получен ответ от сервера:

var oXmlHttp = createXMLHttp();
oXmlHttp.open("get","info.txt",true);
oXmlHttp.onreadystatechange = function() {
  if(oXmlHttp.readyState == 4) {
    alert("Получен ответ!");
  }
};

Последний шаг процедуры отправки запроса - это вызов метода send(), выполняющего собственно отправку запроса :-)
Этот метод принимает единственный аргумент - строку с телом запроса. Если запрос не имеет тела (запросы типа GET не имеют тела), то в этом аргументе передаётся значение null.

var oXmlHttp = createXMLHttp();
oXmlHttp.open("get","info.txt",true);
oXmlHttp.onreadystatechange = function() {
  if(oXmlHttp.readyState == 4) {
    alert("Получен ответ!");
  }
};
oXmlHttp.send(null);

Вот и всё! Запрос послан, а когда приходит ответ, выводится сообщение. Главная особенность объекта XMLHttp состоит в том, что он позволяет получить доступ к возвращаемым данным, состоянию ответа и к заголовку ответа.

Для того что-бы получить данных, возвращаемые по запросу, можно прибегнуть к свойству responseText или responseXML.
Первое возвращает строку, содержащую тело ответа, а второе объект документа XML и используется только в том случае, если возвращаемые данные имеют типа text/xml. Таким образом, что-бы извлечь текст, содержащийся в файле 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);
}

Как уже упоминалось, объект XMLHttp предоставляет возможность получить доступ к заголовкам ответа. Конкретный заголовок можно извлечь посредством метода getResponseHeader(), передав ему имя требуемого заголовка. Один из наиболее часто употребляемых заголовков - Content-Type, который несет в себе информацию о типе переданных данных:

var sContentType = oXmlHttp.getResponseHeader("Content-Type");
if(sContentType == "text/xml") {
  alert("Принят документ XML");
} else if(sContentType == "text/plain") {
  alert("Принят обычный текст.");
} else {
  alert("Приняты данные неверного типа!");
}

Для того чтобы увидет сразу все заголовки, возвращаемые сервером, можно обратиться к методу getAllResponseHeaders(). Заголовки возвращаются в строке и отделяются друг от друга либо символом перевода строки \n либо парой символов \r\n т.е. выделить заголовки можно так:

var sHeaders = oXmlHttp.getAllResponseHeaders();
var aHeaders = sHeaders.split(/\r?\n/);

for(var i = 0; i < aHeaders.length; i++) {
alert(aHeaders[i]);
}

Кроме того, можно отправить свой заголовок в запрос, прежде чем отправить его. Этот приём позволяет указать тип передаваемых данных или передать некоторые дополнительные сведения, которые могут потребоваться серверу для обслуживания такого запроса. Для этого надо перед обращением к методу send() вызывать метод setRequestHeader():

var oXmlHttp = createXMLHttp();
oXmlHttp.open("get","info.txt",true);
oXmlHttp.onreadystatechange = function() {
if(oXmlHttp.readyState == 4) {
alert("Получен ответ!");
}
};
oXmlHttp.setRequestHeader("myheader","myvalue");
oXmlHttp.send(null);

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

var oXmlHttp = createXMLHttp();
oXmlHttp.open("get", "info", false);
oXmlHttp.send(null);

if(oXmlHttp.status == 200) {
alert("Получены следующие данные: " + oXmlHttp.responseText);
} else {
alert("Возникла ошибка: " + oXmlHttp.statusText);
}

Синхронные запросы (когда в третьем аргументе open() передаётся false) позволяют обрабатывать полученные данные сразу после вызова send(). Это может оказаться удобным в случаях когда необходимо, чтобы пользователь дождался получения ответа или когда ожидается получить небольшой объём данных (например меньше 1 КБ). В случае передачи больших объемов данных следует предпочесть асинхронные запросы.

Урок окончен.
В следующий раз будем изучать запросы GET на примере реального web-приложения. Thank you for attention ;-)

Опубликовано: 2008-06-24 15:17:08 purple_m0nkey

в последнем блоке кода: var oXmlHttp = createXMLHttp(); oXmlHttp.open("get", "info", false); oXmlHttp.send(null); if(oXmlHttp.status == 200) { alert("Получены следующие данные: " + oXmlHttp.responseText); } else { alert("Возникла ошибка: " + oXmlHttp.statusText); } ошибка, надо не info, а info.txt