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:", отображается зеленым цветом:
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()
Все таки надо понимать что на ваш сайт будут залазить совсем новички, чтобы пополнять свои знания, поэтому нужно более подробно пояснять методы объектов
Дааа. Тут каждый регистр важен...
заметил такую бредятину(? может, это и к лучшему): у XMLHttpRequest существует что-то вроде "блек-листа" для заголовков. Делая запрос на пхп-шник:
обнаружил что Accept-Charset и еще некоторые заголовки игнорируются при отправке из жабы...
P.S. Народ будьте аккуратнее при веб-серфе в рунете, быдлокодеры совсем офигели - tsr.boot virus словил вчера даже не понял как... но выкурить проблемы не было, ибо это быдлокодеры...
Больше примеров, пожалуйста! Что изменится, если сделать запрос методом POST? Как сформировать отправляемые данные, например, из ? Как и куда поступают отправленные данные?
Через XMLHTTPREQUEST можно залить файл на сервер.
Нет ну серьёзно:D скора на хабре постну
Не подскажете какой-нибудь способ обойти политику безопасности?
Автору +5!Прочитал курс новых и старых статей, обычно для изучения технология надо знать английский язык, а здесь читаю все на русском, кратко, внятно и главное ДОСТУПНО!!!Теперь буду более правильно делать свои скрипты.
"более правильно" = "правильнее"
onreadystatechange это же свойство а не метод? Или я не прав?
Столкнулся с одной проблемой, буду благодарен за дельный совет.
Использую функцию $.ajax для отправки запросов и в определенной ситуации нужно оборвать соединение через abort(). Это благополучно и делаю, но к сожалению abort() тригерит error(). Этому как раз и пытаюсь отучить.
Пробовал вот так:
$.ajax({ error: function( jqXHR, textStatus, errorThrown ) { if( jqXHR == 'abort' ) { return; } else { // show user friendly error message } } });К сожалению эта проверка по какой-то причине не всегда срабатывает.
Можно спросить? В getXmlHttp() мы сначала пытаемся поднять ActiveXObject "Msxml2.XMLHTTP", потом "Microsoft.XMLHTTP" и лишь когда не получается - стандартно вызываем XMLHttpRequest(). Это отражает некий табель о рагах?
(я привык видеть XMLHttpRequest на первом месте).