Jul 10 2009

AJAX wrapper

Ajax jest najlepszym sposobem na podniesienie wydajnosci, plynnosci statycznych stron. Dynamiczna wymiana tresci strony bez potrzeby jej przeladowywania przypomina juz zaawansowane aplikacje typu RIA.

Niby nic, niby technologia wiekowa a nadal ciezko spotkac prosty skrypt upraszczajacy korzystanie z niej. Dlatego tez, stworzymy prosty wrapper umozliwiajacy wykonywanie zapytan do serwera w celu wysylania i pobrania tresci.

Wstepnie tworzymy klase o nazwie loAJAX zawierajaca obiekt xmlHttp.

loAJAX = function()
{
	this.xmlHttp = null;
};

Nastepnie dodajemy metode inicjujaca obiekt xmlHttp.

loAJAX.prototype.init = function()
{
	if (window.navigator.appName == "Microsoft Internet Explorer") {
		try {
			this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				this.xmlHttp = new XMLHttpRequest();
			}
		}
	} else {
		this.xmlHttp = new XMLHttpRequest();
	}
};

Tak, wiem o czy myslisz try..catch, try..catch. Majac dosc spore doswiadczenie uwazam, ze zaden kawalek kodu nie jest bezpieczny jezeli mamy do czynienia z obiektami MS’a ;) . To co w przypadku innych przegladarek wyglada prosto XMLHttpRequest(); w IE i innych podobnych tworach korzystajacych z axka roznie to wyglada.

Wiec zostawiamy kwestie po co, dlaczego i dolaczymy do naszego obiektu metode generujaca zapytanie.

loAJAX.prototype.request = function(url, ajaxListener)
{
	this.xmlHttp.abort();
	this.xmlHttp.open("GET", url, true);
	this.xmlHttp.onreadystatechange = ajaxListener;
	this.xmlHttp.send(null);
};

Nowy obiekt ajaxListner ma za zadanie nasluchiwac i gdy otrzyma czytaj dalej