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
Все примеры только на стороне клиента, а как на сервере принимать данные, в какую переменную записывается отправляемое сообщение. В $_GET ?
Для сервера такой запрос идентичен обычному. Если метод запроса - GET, то значения нужно искать там, где находятся переменные GET запросов, если POST, то там, где им самое место.
Я делаю так:
var url = "agregator.php?param1="+значение1+"¶m2="+значение2+"&random=" + Math.random(); // random (случайное число) - чтобы не было глюков с кешированием request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); function updatePage() { if (request.readyState == 4) if (request.status == 200) { // Вызов функции обработки ответа и передача ей ответа tmp=request.responseText; // тут хранится ответ от agregator.php delete request; } else { alert("Сервер не ответил"); } }Серега Kamillorn, а как в прочем и автор, а зачем вы используете Math.random() с GET запросом, на мой взгляд коли не хотите кэширования, то уж сразу посылайте POST запросом, и браузеру не будет морока запросы с Math.random циферки хранить.
Я только начинающий web-программист, и мне многое не понятно в этой статье
Например: для чего нужен метод onreadystatechange, тут этого не объяснено;
Как работают методы setRequestHeader() getResponseHeader() getAllResponseHeaders()
Все таки надо понимать что на ваш сайт будут залазить совсем новички, чтобы пополнять свои знания, поэтому нужно более подробно пояснять методы объектов
Дааа. Тут каждый регистр важен...
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.