Важной технологией (инструментом), используемой при разработке AJAX, является объект XMLHTTPRequest. Объект XMLHttpRequest сегодня является технической основой для всех приложений AJAX и Web 2.0. Хотя поставщики программного обеспечения и сообщества с открытым исходным кодом сейчас предоставляют различные платформы AJAX для дальнейшего упрощения использования объекта XMLHttpRequest, нам все равно необходимо понимать свойства и методы этого объекта;
1. Что такое объект XMLHTTPRequest?
Наиболее распространенное определение: XmlHttp — это набор API-интерфейсов, которые могут передавать или получать XML и другие данные через протокол http в JavaScript, VbScript, Jscript и других языках сценариев. Самое большое применение XmlHttp заключается в том, что он может обновлять часть содержимого веб-страницы без обновления всей страницы. (Эта функция является одной из основных функций AJAX).
Объяснение из MSDN: XmlHttp предоставляет протокол для связи клиента с http-сервером. Клиент может отправить запрос на http-сервер через объект XmlHttp (MSXML2.XMLHTTP.3.0) и использовать объектную модель документов Microsoft XML (DOM) для обработки ответа.
Позвольте мне здесь отвлечься. На самом деле эта штука появилась очень рано. Однако раньше поддержка браузеров была недостаточной. Она поддерживалась только в IE, поэтому большинство WEB-программистов не особо ею пользовались. сильно изменился, Mozilla и Safari приняли его как стандарт де-факто, а основные браузеры начали поддерживать объект XMLHTTPRequest. Но здесь необходимо подчеркнуть, что XMLHTTPRequest еще не является стандартом W3C, поэтому производительность в разных браузерах немного различается.
2. Создайте объект XMLHTTPRequest
Говоря о различиях, давайте посмотрим, как его объявить (использовать). Прежде чем использовать объект XMLHTTPRequest для отправки запросов и обработки ответов, мы должны использовать JavaScript для создания объекта XMLHTTPRequest. (IE реализует XMLHTTPRequest как объект ActiveX, а другие браузеры [такие как Firefox/Safari/Opear] реализуют его как собственный объект javascript). Давайте посмотрим, как использовать JavaScript для его создания:
Ниже приводится цитата:
<script Language="javascript" type="text/javascript">
<!--
вар xmlhttp;
//Создаем объект XMLHTTPRequest
функция createXMLHTTPRequest(){
if(window.ActiveXObject){ // Определяем, поддерживается ли элемент управления ActiveX
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Создание объекта XMLHTTPRequest путем создания экземпляра нового экземпляра ActiveXObject.
}
else if(window.XMLHTTPRequest){ // Определяем, следует ли реализовать XMLHTTPRequest как локальный объект JavaScript
xmlhttp = new XMLHTTPRequest() // Создаем экземпляр XMLHTTPRequest (локальный объект JavaScript)
}
}
//-->
</script>3. Атрибуты и методы. Поскольку вещей слишком много, я буду использовать эту страницу для перечисления методов и атрибутов. Подробные примеры я приведу позже (в основном потому, что я тоже учусь).
<html>
<голова>
<title>Описание объекта XMLHTTPRequest DEMO</title>
<script Language="javascript" type="text/javascript">
<!--
вар xmlhttp;
//Создаем объект XMLHTTPRequest
функция createXMLHTTPRequext(){
если (window.ActiveXObject) {
xmlhttp = новый ActiveXObject('Microsoft.XMLHTTP');
}
иначе, если (window.XMLHTTPRequest) {
xmlhttp = новый XMLHTTPRequest();
}
}
функция PostOrder(xmldoc)
{
createXMLHTTPRequext();
// Метод: открыть
//Создаем новый http-запрос и указываем метод запроса, URL-адрес и информацию для проверки
// Синтаксис: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//параметры
// бстрМетод
//http-методы, такие как: POST, GET, PUT и PROPFIND. Нечувствительность к регистру.
// bstrUrl
//Запрошенный URL-адрес может быть абсолютным или относительным адресом.
// varAsync[необязательно]
// Логический тип, указывает, является ли этот запрос асинхронным. Значение по умолчанию — true. Если это правда, функция обратного вызова, указанная атрибутом onreadystatechange, будет вызываться при изменении состояния.
// bstrUser[необязательно]
// Если сервер требует проверки, укажите здесь имя пользователя. Если не указано, появится окно проверки, когда сервер потребует проверки.
// bstrPassword[необязательно]
// Пароль в проверочной информации. Если имя пользователя пустое, это значение будет игнорироваться.
// Примечание. После вызова этого метода вы можете вызвать метод send для отправки данных на сервер.
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// оповещение(book.xml);
// Атрибут: onreadystatechange
//onreadystatechange: укажите обработчик событий при изменении свойства ReadyState.
// Синтаксис: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// В следующем примере демонстрируется вызов функции HandleStateChange при изменении свойства ReadyState объекта XMLHTTPRequest.
// Когда данные будут получены (readystate == 4) кнопка на этой странице будет активирована
// Примечание. Это свойство доступно только для записи и является расширением объектной модели документа W3C.
xmlhttp.onreadystatechange = HandleStateChange;
// Метод: отправить
//Отправляем запрос на http-сервер и получаем ответ
// Синтаксис: oXMLHttpRequest.send(varBody);
// Параметры: varBody (Данные, которые будут отправлены через этот запрос.)
// Примечание. Синхронный или асинхронный режим этого метода зависит от параметра bAsync в открытом методе. Если bAsync == False, этот метод будет ждать завершения запроса или истечения времени ожидания перед возвратом. Если bAsync == True, этот метод. немедленно вернется.
// Этот метод принимает один необязательный параметр, который является requestBody. Допустимыми типами входных данных VARIANT являются BSTR, SAFEARRAY из UI1 (беззнаковые байты), IDispatch для объекта XML Document Object Model (DOM) и IStream *. используйте только фрагментированное кодирование (для отправки) при отправке типов ввода IStream *. Компонент автоматически устанавливает заголовок Content-Length для всех типов ввода, кроме IStream *.
// Если отправленные данные имеют формат BSTR, ответ кодируется как utf-8, а заголовок типа документа, содержащий кодировку, должен быть установлен в соответствующей позиции.
// Если тип ввода — SAFEARRAY UI1, ответ отправляется как есть, без дополнительного кодирования. Вызывающий объект должен установить заголовок Content-Type с соответствующим типом контента.
// Если отправленные данные представляют собой объект XML DOM, ответ будет закодирован в кодировке, объявленной в документе xml. Если в документе xml кодировка не объявлена, будет использоваться UTF-8 по умолчанию.
// Если тип ввода — IStream *, ответ отправляется как есть, без дополнительного кодирования. Вызывающий объект должен установить заголовок Content-Type с соответствующим типом контента.
xmlhttp.Send(xmldoc);
// Метод: getAllResponseHeaders
// Получаем все http-заголовки ответа
// Синтаксис: strValue = oXMLHttpRequest.getAllResponseHeaders();
// Примечание. Каждое имя и значение HTTP-заголовка разделяются двоеточием и заканчиваются rn. Этот метод можно вызвать только после завершения метода отправки.
оповещение(xmlhttp.getAllResponseHeaders());
// Метод: getResponseHeader
// Получаем указанный заголовок http из информации ответа
// Синтаксис: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Примечание. Этот метод можно вызвать только после успешного выполнения метода отправки. Если тип документа, возвращаемый сервером, — «текст/xml», то это предложение
// xmlhttp.getResponseHeader("Content-Type"); вернет строку "text/xml". Вы можете использовать метод getAllResponseHeaders для получения полной информации HTTP-заголовка.
alert(xmlhttp.getResponseHeader("Content-Type")); // Выводим столбец Content-Type в http-заголовке: версию и имя текущего веб-сервера.
document.frmTest.myButton.disabled = true;
// Метод: прерывание
//Отменяем текущий запрос
// Синтаксис: oXMLHttpRequest.abort();
// Примечание. После вызова этого метода текущий запрос возвращает статус UNINITIALIZED.
//xmlhttp.abort();
// Метод: setRequestHeader
// Отдельно указываем определенный http-заголовок запроса
// Синтаксис: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Параметры: bstrHeader (Строка, имя заголовка.)
// bstrValue(Строка, значение.)
// Примечание. Если заголовок http с таким именем уже существует, он будет перезаписан. Этот метод должен вызываться после открытого метода.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
функция HandleStateChange()
{
//Атрибут: готовое состояние
// Возвращаем текущий статус запроса XMLHTTP
// Синтаксис: lValue = oXMLHttpRequest.readyState;
// Примечания: переменная, этот атрибут доступен только для чтения, а статус представлен целым числом длиной 4. Определение следующее:
// 0 (неинициализированный) Объект создан, но не инициализирован (открытый метод еще не вызван)
// 1 (инициализация) Объект создан, а метод отправки еще не вызван.
// 2 (Отправить данные) Метод отправки был вызван, но текущий статус и http-заголовок неизвестны
// 3 (Данные передаются) Часть данных получена Поскольку заголовки ответа и http неполные, при получении части данных через responseBody и responseText произойдет ошибка.
// 4 (Завершено) Прием данных завершен. На данный момент полные данные ответа можно получить через responseBody и responseText.
если (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = ложь;
// Атрибут: тело ответа
// Возвращаем данные ответа сервера в определенном формате
// Синтаксис: strValue = oXMLHttpRequest.responseBody;
// Примечания: переменная, это свойство доступно только для чтения и представляет некодированные двоичные данные, возвращаемые непосредственно с сервера в формате беззнакового массива.
оповещение (xmlhttp.responseBody);
//Свойство: поток ответа
//Возвращаем информацию ответа в виде объекта Ado Stream
// Синтаксис: strValue = oXMLHttpRequest.responseStream;
// Примечания: переменная, это свойство доступно только для чтения и возвращает информацию ответа в форме объекта Ado Stream.
оповещение (xmlhttp.responseStream);
//Атрибут: ответтекст
// Возвращаем информацию ответа в виде строки
// Синтаксис: strValue = oXMLHttpRequest.responseText;
// Примечания: переменная, это свойство доступно только для чтения и возвращает информацию ответа в виде строки. XMLHTTP пытается декодировать информацию ответа в строку Unicode.
// XMLHTTP устанавливает кодировку данных ответа на UTF-8 по умолчанию. Если данные, возвращаемые сервером, содержат спецификацию (метку порядка байтов), XMLHTTP может это сделать.
// Для декодирования любых данных UCS-2 (с прямым или прямым порядком байтов) или UCS-4. Обратите внимание: если сервер возвращает документ XML, этот атрибут
// Свойства не обрабатывают объявления кодировки в документах XML. Чтобы справиться с этим, вам нужно использовать responseXML.
оповещение (xmlhttp.responseText);
//Атрибут: ответXML
//Форматируем информацию ответа в объект Xml Document и возвращаем ее
// Синтаксис: var objDispatch = oXMLHttpRequest.responseXML;
// Примечания: переменная, это свойство доступно только для чтения, форматируйте информацию ответа в объект XML-документа и возвращайте ее. Если данные ответа не являются допустимым XML-документом,
// Это свойство само по себе не возвращает XMLDOMParseError, а информацию об ошибке можно получить через обработанный объект DOMDocument.
alert("Результат = " + xmlhttp.responseXML.xml);
//Атрибут: статус
// Возвращаем код состояния http текущего запроса
// Синтаксис: lValue = oXMLHttpRequest.status;
// Возвращаемое значение: длинный стандартный код статуса HTTP, определенный следующим образом:
//Номер:Описание
// 100:Продолжить
// 101:Переключение протоколов
// 200:ОК
// 201: Создано
// 202:Принято
// 203:Неавторитетная информация
// 204: Нет содержимого
// 205: Сбросить содержимое
// 206: Частичное содержимое
// 300:Множественный выбор
// 301:Перемещено навсегда
// 302:Найдено
// 303: Посмотреть другое
// 304: Не изменено
// 305:Использовать прокси
// 307: Временное перенаправление
// 400: неправильный запрос
// 401: Неавторизованный
// 402:Требуется оплата
// 403: Запрещено
// 404: Не найдено
// 405:Метод не разрешен
// 406: Неприемлемо
// 407: Требуется аутентификация прокси
// 408: Тайм-аут запроса
// 409:Конфликт
// 410: Ушел
// 411:Требуемая длина
// 412: Предусловие не выполнено
// 413: Запрос слишком велик
// 414: Слишком длинный URI запроса
// 415: Неподдерживаемый тип носителя
// 416: Запрошенный диапазон не подходит
// 417: Ожидание не оправдалось
// 500: Внутренняя ошибка сервера
// 501: Не реализовано
// 502 Неверный шлюз
// 503: Служба недоступна
// 504: Тайм-аут шлюза
// 505: Версия HTTP не поддерживается
// Примечание: длинное целое, это свойство доступно только для чтения и возвращает код состояния http текущего запроса. Это свойство можно получить только после отправки и получения данных.
оповещение (xmlhttp.status);
//Атрибут: statusText
// Возвращаем статус строки ответа текущего запроса
// Синтаксис: strValue = oXMLHttpRequest.statusText;
// Примечания: строка, это свойство доступно только для чтения. Оно возвращает статус строки ответа текущего запроса в BSTR. Это свойство можно получить только после отправки и получения данных.
оповещение (xmlhttp.statusText);
}
}
//-->
</скрипт>
</голова>
<тело>
<form name="frmTest">
<input name="myButton" type="button" value="Нажмите на меня" onclick="PostOrder('http://localhost/example.htm');">
</форма>
</тело>
</html>