www.Litecode.ru – Сборник рецептов для создания сайтов

Ajax в классическом примере

ГлавнаяJavaScript → Ajax в классическом примере

С Вашего позволения немного теории. Ajax - Asynchronous Javascript and XML, что по русски означает “Асинхронный Javascript и XML”. По сути, ajax это xml – запрос, который формируется средствами javascript. Готовые варианты Ajax на jQuery или Ext JS конечно здорово, но ведь интересно как оно работает на чистом javascript. Хочу предупредить, что классический вариант ajax несовершенен и требует доработки кросбраузерности. Сейчас поймете сами, по коду.

Работает классический ajax так:

<script>

var oXmlHttp = createXMLHttp(); 
oXmlHttp.open("GET","/cgi-bin/cgi.pl?",true); 

oXmlHttp.onreadystatechange = function() {
    if(oXmlHttp.readyState == 4) {
        if(oXmlHttp.status == 200) {
            
            alert(oXmlHttp.responseText);
        } 
    }
};
oXmlHttp.send(null);

function createXMLHttp() {
	
	if(!navigator.userAgent.match(/MSIE/)) {
	 
		return new XMLHttpRequest();
	 
	} else if(window.ActiveXObject) { 
		
		var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];
		for (var i = 0; i < aVersions.length; i++) {
			try {
				var oXmlHttp = new ActiveXObject(aVersions[i]); 
				return oXmlHttp;
			} catch (oError) {
			  
			}
		}
		
		throw new Error("Невозможно создать объект XMLHttp.");
		
	}
}
<script>

Функция createXMLHttp создает объект. Заметно, что для IE прописаны гвозди и гарантий что будет везде работать нет. Но в целом принцип таков: разделяем на IE или все остальное. Если не IE, то возвращаем объект new XMLHttpRequest. Иначе используем ActiveXObject.

Если удалось создать объект xml, то дальше обращаемся к серверному скрипту и делаем что нужно.