Javascript.RU

XMLHTTPRequest

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/ajax-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()

Обрыв соединения осуществляет метод

  • abort()

Ответ сервера находится в

  • 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


Автор: Павлик (не зарегистрирован), дата: 27 августа, 2008 - 19:04
#permalink

Замечательная статья!! Автору респект!


Автор: Гость (не зарегистрирован), дата: 2 октября, 2008 - 18:03
#permalink

Кстати, помнится читал о том, что можно посылать запросы и на др. сервера, но не каждый браузер это позволяет... правда это или нет?


Автор: orange, дата: 25 января, 2009 - 02:13
#permalink

если мне не изменяет память то это можно сделать, только если объект создан с использованием ActiveXObject, то есть в 5, 6 версии IE, а объект XMLHTTPRequest (то есть это все остальные браузеры, включая и IE 7>) не позволяет отправлять запросы на другие сервера - политика безопасности.
Если не прав - поправьте


Автор: Злата (не зарегистрирован), дата: 16 декабря, 2008 - 01:48
#permalink

естественно, почему бы и нет


Автор: Вадим (не зарегистрирован), дата: 16 января, 2009 - 17:53
#permalink

краткость сестра толанта, данный случай к коду.


Автор: Nikolas (не зарегистрирован), дата: 16 июня, 2009 - 23:58
#permalink

Вообще в ослине куча утечек памяти. Вот тут разбирался как с этим бороться: http://www.nik0las.ru/blog/2009/06/16/ajax_and_memory_leaks_at_ie.html


Автор: Илья Кантор, дата: 17 июня, 2009 - 09:34
#permalink

Какая версия IE ? Есть мнение, что с IE7 этой утечки нет, даже более того - возможно, на последнем IE6 ее тоже нет.


Автор: Nikolas (не зарегистрирован), дата: 17 июня, 2009 - 10:09
#permalink

На 6-м. На 7-м там уже есть нативный XMLHttpRequest.
Как обстоят дела с последним 6-м не знаю, тестил не на последнем.


Автор: Илья Кантор, дата: 17 июня, 2009 - 12:25
#permalink

На 6м IE вышел патч, вроде, в июне прошлого года, который эти мемлики исправил.

Соответственно, все компы, которые не обновляются вообще, имеют DOM/JS-мемлики.

А те, которые обновляются - по идее, наверно, уже IE8 поставили


Автор: B@rmaley.e><e (не зарегистрирован), дата: 22 сентября, 2009 - 18:43
#permalink

Контроль над заголовками далеко не полный. Попробуйте кроссбраузерно передать рефер.


Автор: bandolero, дата: 5 февраля, 2010 - 11:47
#permalink

Подсветка синтаксиса делает зеленым все, что следует за двумя слэшами (//). Поэтому в следующей строке все, что находится правее "http:", отображается зеленым цветом:
function getUrl(http://javascript.ru/forum/url, cb) {


Автор: HelpeR, дата: 10 марта, 2010 - 22:20
#permalink

Здравствуйте Илья Кантор. Хотел спросить на данный момент все браузеры (IE7, 8 FF2, 3, Opera 9, 10) сами автоматически удаляют XMLHttpRequest после получения данных с сервера и никакой утечки памяти не происходит?
И еще хотел спросить, не могли бы вы уточнить на счет этого (Можно отсылать документы из браузера в виде файлов, составляя POST-запрос вручную).
Заранее благодарен!


Автор: Илья Кантор, дата: 11 марта, 2010 - 00:48
#permalink

В общем, все почти ок с утечками. XMLHTTPRequest может формировать заголовки аналогичные тем, которые формирует браузер при посылке файла и тем самым пересылать как бы файл на сервер.


Автор: HelpeR, дата: 11 марта, 2010 - 22:20
#permalink

Значит именно таким образом происходит ajax загрузка файлов на сервер? Т.е. путь к файлу считывается с input type="file" и виде заголовка отправляется на сервер?


Автор: nikonian (не зарегистрирован), дата: 15 апреля, 2010 - 16:13
#permalink

Нет, не так. AJAX-загрузка осуществляется через iframe, через XMLHttp передача невозможна.
В статье имелось в виду - чисто теоретически, если вы установите в заголовках, что передаете файл и потом просто вручную вобьете в POST-запрос поток байтов - таки-да, будет принят файл.


Автор: Гость (не зарегистрирован), дата: 10 августа, 2010 - 14:39
#permalink

Привет всем, не подскажите почему в следующем коде не создается экземпляр объекта?

//ссылка на объект 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;
}

Автор: Гость (не зарегистрирован), дата: 10 августа, 2010 - 16:08
#permalink

Пардон... сам разобрался... Оказывается нужно XMLHttpRequest а не XmlHttpRequest


Автор: Гость (не зарегистрирован), дата: 7 ноября, 2010 - 00:53
#permalink

Все примеры только на стороне клиента, а как на сервере принимать данные, в какую переменную записывается отправляемое сообщение. В $_GET ?


Автор: B@rmaley.e><e, дата: 7 ноября, 2010 - 21:50
#permalink

Для сервера такой запрос идентичен обычному. Если метод запроса - GET, то значения нужно искать там, где находятся переменные GET запросов, если POST, то там, где им самое место.


Автор: Серега Kamillorn (не зарегистрирован), дата: 23 ноября, 2010 - 21:25
#permalink

Я делаю так:

var url = "agregator.php?param1="+значение1+"&param2="+значение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("Сервер не ответил");
			}
                
                 }

Автор: mister_maxim, дата: 19 марта, 2011 - 21:22
#permalink

Серега Kamillorn, а как в прочем и автор, а зачем вы используете Math.random() с GET запросом, на мой взгляд коли не хотите кэширования, то уж сразу посылайте POST запросом, и браузеру не будет морока запросы с Math.random циферки хранить.


Автор: Евгенннн (не зарегистрирован), дата: 18 октября, 2011 - 15:20
#permalink

Я только начинающий web-программист, и мне многое не понятно в этой статье
Например: для чего нужен метод onreadystatechange, тут этого не объяснено;
Как работают методы setRequestHeader() getResponseHeader() getAllResponseHeaders()
Все таки надо понимать что на ваш сайт будут залазить совсем новички, чтобы пополнять свои знания, поэтому нужно более подробно пояснять методы объектов


Автор: Ramzil_Nixon (не зарегистрирован), дата: 20 ноября, 2011 - 22:33
#permalink

Дааа. Тут каждый регистр важен...


Автор: allergencore, дата: 28 февраля, 2012 - 19:52
#permalink

заметил такую бредятину(? может, это и к лучшему): у XMLHttpRequest существует что-то вроде "блек-листа" для заголовков. Делая запрос на пхп-шник:

<?php
//... <- setting up headers :D
print_r($_SERVER);
?>

обнаружил что Accept-Charset и еще некоторые заголовки игнорируются при отправке из жабы...
P.S. Народ будьте аккуратнее при веб-серфе в рунете, быдлокодеры совсем офигели - tsr.boot virus словил вчера даже не понял как... но выкурить проблемы не было, ибо это быдлокодеры...


Автор: Дюк (не зарегистрирован), дата: 29 февраля, 2012 - 19:00
#permalink

Больше примеров, пожалуйста! Что изменится, если сделать запрос методом POST? Как сформировать отправляемые данные, например, из ? Как и куда поступают отправленные данные?


Автор: keithbently, дата: 22 мая, 2012 - 13:58
#permalink

Через XMLHTTPREQUEST можно залить файл на сервер.
Нет ну серьёзно:D скора на хабре постну


Автор: Гость (не зарегистрирован), дата: 21 августа, 2012 - 17:24
#permalink

Не подскажете какой-нибудь способ обойти политику безопасности?


Автор: Гость (не зарегистрирован), дата: 11 октября, 2012 - 22:14
#permalink

Автору +5!Прочитал курс новых и старых статей, обычно для изучения технология надо знать английский язык, а здесь читаю все на русском, кратко, внятно и главное ДОСТУПНО!!!Теперь буду более правильно делать свои скрипты.


Автор: Гость (не зарегистрирован), дата: 4 апреля, 2013 - 16:04
#permalink

onreadystatechange это же свойство а не метод? Или я не прав?


Автор: wbrframe, дата: 14 июня, 2013 - 22:18
#permalink

Столкнулся с одной проблемой, буду благодарен за дельный совет.
Использую функцию $.ajax для отправки запросов и в определенной ситуации нужно оборвать соединение через abort(). Это благополучно и делаю, но к сожалению abort() тригерит error(). Этому как раз и пытаюсь отучить.

Пробовал вот так:

$.ajax({
   error: function( jqXHR, textStatus, errorThrown )
   {
       if( jqXHR == 'abort' ) 
       {
           return;
       }
       else
       {
           // show user friendly error message
       }
   }
});

К сожалению эта проверка по какой-то причине не всегда срабатывает.


Автор: pol (не зарегистрирован), дата: 5 сентября, 2013 - 17:31
#permalink

Можно спросить? В getXmlHttp() мы сначала пытаемся поднять ActiveXObject "Msxml2.XMLHTTP", потом "Microsoft.XMLHTTP" и лишь когда не получается - стандартно вызываем XMLHttpRequest(). Это отражает некий табель о рагах?
(я привык видеть XMLHttpRequest на первом месте).


Автор: Гость (не зарегистрирован), дата: 15 марта, 2016 - 23:15
#permalink

1


Автор: Гость (не зарегистрирован), дата: 15 марта, 2016 - 23:17
#permalink

2


Автор: Гость (не зарегистрирован), дата: 15 марта, 2016 - 23:59
#permalink

11


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:34
#permalink

222


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:38
#permalink

3


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:39
#permalink

222


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:39
#permalink

222


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Автор: Гость (не зарегистрирован), дата: 16 марта, 2016 - 00:43
#permalink

SupAnatoli:)


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 7 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum