XMLHTTPRequest
Объект XMLHTTPRequest - низкоуровневая основа большинства AJAX-приложений. Знание его методов, свойств и особенностей не только помогает писать приложения на низком уровне с минимумом javascript-кода, но и позволяет понять, что происходит внутри фреймворков, которые, увы, часто несовершенны или тянут много лишнего.
Основные методы для посылки запросов XMLHttpRequest:
- open(Method, Url, async)
- send(data)
- onreadystatechange
Правильная последовательность open/onreadystatechange/send:
req.open("GET", url, true)
req.onreadystatechange = handler
req.send(null)
Методы для манипуляции заголовками:
- setRequestHeader()
- getResponseHeader()
- getAllResponseHeaders()
Обрыв соединения осуществляет метод
Ответ сервера находится в
- responseText
- responseXML
- status
- statusText
Причем responseXML заполняется только в случае, когда Content-Type с сервера имеет значение text/xml (кроме overrideMimeType-метода, но он есть только в Firefox).
Краткая сводка плюсов и минусов
- Возможна синхронная передача (хотя и подвешивает браузер)
- Полный контроль над заголовками
- Можно отсылать документы из браузера в виде файлов, составляя POST-запрос вручную
- В явном виде выдает ошибки коммуникации
- Ограничение безопасности при помощи same origin policy
- Невозможна отправка файлов, выбранных в форме
- Утечки памяти при неправильном применении в старых IE
Пример небольшой функции getUrl, которая делает запросы:
function getXmlHttp(){
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (ee) {
}
}
if (typeof XMLHttpRequest!='undefined') {
return new XMLHttpRequest();
}
}
// Получить данные с url и вызывать cb - коллбэк c ответом сервера
function getUrl(http://javascript.ru/forum/url, cb) {
var xmlhttp = getXmlHttp();
// IE кэширует XMLHttpRequest запросы, так что добавляем случайный параметр к URL
// (хотя можно обойтись правильными заголовками на сервере)
xmlhttp.open("GET", url+'?r='+Math.random());
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
cb(
xmlhttp.status,
xmlhttp.getAllResponseHeaders(),
xmlhttp.responseText
);
}
}
xmlhttp.send(null);
}
Более подробно о свойствах и применении XMLHTTPRequest - на http://xmlhttprequest.ru
|
Замечательная статья!! Автору респект!
Кстати, помнится читал о том, что можно посылать запросы и на др. сервера, но не каждый браузер это позволяет... правда это или нет?
если мне не изменяет память то это можно сделать, только если объект создан с использованием ActiveXObject, то есть в 5, 6 версии IE, а объект XMLHTTPRequest (то есть это все остальные браузеры, включая и IE 7>) не позволяет отправлять запросы на другие сервера - политика безопасности.
Если не прав - поправьте
естественно, почему бы и нет
краткость сестра толанта, данный случай к коду.
Вообще в ослине куча утечек памяти. Вот тут разбирался как с этим бороться: http://www.nik0las.ru/blog/2009/06/16/ajax_and_memory_leaks_at_ie.html
Какая версия IE ? Есть мнение, что с IE7 этой утечки нет, даже более того - возможно, на последнем IE6 ее тоже нет.
На 6-м. На 7-м там уже есть нативный XMLHttpRequest.
Как обстоят дела с последним 6-м не знаю, тестил не на последнем.
На 6м IE вышел патч, вроде, в июне прошлого года, который эти мемлики исправил.
Соответственно, все компы, которые не обновляются вообще, имеют DOM/JS-мемлики.
А те, которые обновляются - по идее, наверно, уже IE8 поставили
Контроль над заголовками далеко не полный. Попробуйте кроссбраузерно передать рефер.
Подсветка синтаксиса делает зеленым все, что следует за двумя слэшами (//). Поэтому в следующей строке все, что находится правее "http:", отображается зеленым цветом:
function getUrl(http://javascript.ru/forum/url, cb) {
Здравствуйте Илья Кантор. Хотел спросить на данный момент все браузеры (IE7, 8 FF2, 3, Opera 9, 10) сами автоматически удаляют XMLHttpRequest после получения данных с сервера и никакой утечки памяти не происходит?
И еще хотел спросить, не могли бы вы уточнить на счет этого (Можно отсылать документы из браузера в виде файлов, составляя POST-запрос вручную).
Заранее благодарен!
В общем, все почти ок с утечками. XMLHTTPRequest может формировать заголовки аналогичные тем, которые формирует браузер при посылке файла и тем самым пересылать как бы файл на сервер.
Значит именно таким образом происходит ajax загрузка файлов на сервер? Т.е. путь к файлу считывается с input type="file" и виде заголовка отправляется на сервер?
Нет, не так. AJAX-загрузка осуществляется через iframe, через XMLHttp передача невозможна.
В статье имелось в виду - чисто теоретически, если вы установите в заголовках, что передаете файл и потом просто вручную вобьете в POST-запрос поток байтов - таки-да, будет принят файл.
Привет всем, не подскажите почему в следующем коде не создается экземпляр объекта?
//ссылка на объект XmlHttpRequest var xmlHttp = createXmlHttpRequestObject(); //создаем экземпляр XmlHttpRequest function createXmlHttpRequestObject() { //для хранения ссылки на XmlHttpRequest var xmlHttp; //следующий код работает во всех браузерах //кроме IE6 и более ранних версиях try //обработка ошибок { //попытаться создать объект XmlHttpRequest xmlHttp = new XmlHttpRequest(); } catch(e) { //событие происходит если используется IE6 или более раняя версия var XmlHttpVersions = new Array("MSXML2.XMLHHTP.6.0", "MSXML2.XMLHHTP.5.0", "MSXML2.XMLHHTP.4.0", "MSXML2.XMLHHTP.3.0", "MSXML2.XMLHHTP", "Microsoft.XMLHHTP"); //попоробовать все возможные версии (prog id), пока что то не подойдет =) for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) { try { xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch(e){} } } if (!xmlHttp) { alert("Ошибка создания объекта XmlHttpRequest"); } else return xmlHttp; }Пардон... сам разобрался... Оказывается нужно XMLHttpRequest а не XmlHttpRequest
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.