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