Prototype mintadarabok 5

Miután ennyi mindent kiveséztünk a prototype-ot bemutató sorozatunkban egyetlen egy dolog maradt hátra, és ez az Ajax. Valójában az Ajax használat ami a legtöbb JavaScript fejlesztőt arra ösztönöz, hogy beleássa magát valamelyik keretrendszerbe, de azért hagytuk a végére, hogy mindenki ismerkedhessen a prototype többi szolgáltatásával is.

Technikai korlátok

A Same Origin Policy (azonos forrás elve) miatt az Ajax lekérések nem mehetnek más domain felé mint amiről maga a megtekintett weblap származik. Ez a böngészők alapvető védelmi mechanizmusa, nem is okoz gondod, csak azért jegyzem meg itt, mert kezdő ajaxosok néha belecsusszannak abba a hibába, hogy megpróbálnak a http://enyimdomain.hu főoldaláról egy ajax lekérést indítani a http://ezmegnemazenyim.cc domain felé. Ha másik domainról akarunk adatokat lekérni, akkor ezt a saját domainünkön a szerver oldalon kell megtennünk, és ezzel már gond nélkül fogunkt tudni kommunikálni.

A másik korlát az pedig a csúnya csúnya két lekérési korlát. Ez a HTTP/1.1-ben rögzített standard, ami szerint ugyanaz a user nem tarthat fenn a szerverrel kettőnél több kapcsolatot. Ez azt jelenti, mondjuk egy kezdeti oldalbetöltődés esetén, hogy előszőr a kliens lekéri mondjuk a html oldalt, és az első belinkelt js filet, aztán a második js filet és a css-t, aztán a képeket kettesével. Persze a valóságban ez nem ennyire darabos, de ami ebből lényeges, hogy egyszerre csak két dolgot kaphat a szervertől, többet nem. Ez a mi szempontunkból akkor válik érdekessé amikor egy olyan ajax alkalmazást kreálunk ami sokszor és sokat szeretne a szerverrel kommunikálni.

XHR életciklus

Gyárilag az XMLHttpRequest kezeli az ajax kommunikációt és XHR-nek szokás rövidíteni. Egy normál XHR életciklus a következőképpen néz ki:

1. Létrehozzuk az XHR objektumot
2. Kapcsolatot kezdeményez a szerver felé
3. Ha szükséges összeállítja a kérés headerjeit
4. Elküldi a szerver felé a kérést
5. Elkezdi fogadni a szerver válaszát
6. Megkapja a teljes választ

A prototype praktikusan az életciklus bármelyik szakaszához tud eseménykezelőket rendelni, más kérdés, hogy éles környezetben ebből csak párat fogunk használni.

A prototype keretrendszer az Ajax objektumot adja a kezünkbe mindahhoz amit meg akarhatunk valósítani. Ennek a leggyakrabban használt két metódusa az Ajax.Updater és az Ajax.Request.

Ajax opciók

Minden Ajax objektum figyeli a létrehozásakor megadott opciókat, melyek a következők lehetnek.

asynchronous

true esetén az átvitel aszinkron módon történik (merthogy ettől ajax az ajax)
Alapértelmezett értéke: true

contentType

Ebben a formátumban küldjük a szervernek a lekérést. Ha megadjuk akkor a csomagunkhoz hozzáfűződik egy ilyen header, szóval a szervernek nem kell a csomag tartalma alapján kitalálni, hogy mi van benne.
Alapértelmezett értéke: application/x-www-form-urlencoded

encoding

A lekérésünk karakter kódolása. Célszerű nem piszkálni és alapértelmezetten hagyni.
Alapértelmezett értéke: utf-8

evalJS

A válasz automatikusan átadódik az eval függvénynek, vagyis ha a szerver válaszként JavaScriptet küld vissza, akkor az kiértékelődik. A prototype 1.6 előtt nem lehetett átállítani, és a lefelé kompatibilitás miatt (remélem csak egyenlőre) nem a false az alapértelmezett értéke.
Alapértelmezett értéke: true

evalJSON

Ha a szerver válaszul JSON-t küld vissza content type-ként application/json-t megjelölve akkor true esetén a válasz automatikusan kiértékelődik.
Alapértelmezett értéke: true

method

Milyen HTTP metódussal küldjük az adatokat a szerver felé. Többnyire jó az alapértelmezett érték, néha lehet, hogy get-et akarunk használni, a többi metódus foltokban támogatott, főleg az IE miatt.
Alapértelmezett értéke: post

parameters

A lekérésünk paraméterei vagy egy hash szerű objektumban, vagy pedig egy url encoded formában. A lekérés paraméterei azok az adatok amiket ténylegesen elküldünk a szervernek feldolgozásra, példul egy form adatai.
Alapértelmezett értéke: egy üres string

postBody

A kiküldött csomagunk “teste”. Normál esetben nem használatos, hanem helyette a parameters opcióban adjuk meg a küldendő adatokat.
Alapértelmezett értéke: nincs

requestHeaders

Kiegészítő headerek amiket kiküldünk a szerver felé. Hash szerű objektumként lehet őket megadni.
Alapértelmezett értéke:

X-Requested-With: XMLHttpRequest
X-Prototype-Version: a használt prototype verziója
Accept: text/javascript, text/html, application/xml, text/xml, */*
Content-Type: automatikusan generálódik a contentType és az encoding opciók alapján.


sanitizeJSON

Ha a válasz JSON-ként érkezik akkor átfutatja egy ellenőrző eljáráson XSS és másféle huncutságok elkerülése végett.
Alapértelmezett értéke: true

Callback függvények

Callback függvények megadásával reagálhatunk az XHR életciklus egyes állapotaira. Több mint 10 callback van definiálva az Ajax objektumban, de itt csak azokat sorolom fel amelyeket általánosságban használunk.

onCreate

Az Ajax objektum létrejött, a lekérés összeállt és elküldésre került a szerver felé. Ha például meg akarunk jeleníteni egy letöltés jelző kis animációt, akkor ennek a megjelenítését ehhez a metódushoz ajánlatos kötni.

onFailure

Megérkezett a szervertől a válasz, de a HTTP statusz kódja szerint valami hiba lépett fel (200-299 státusz kódok).

onComplete

A válasz megérkezett a szervertől.

onException

Ha valami gond van az XHR életciklusában bárhol, akkor azt ez a metódus elkapja.

Ajax.Response

Minden callback első paraméterül megkapja a létrejött Ajax.Response objektumot, ami a szerver válaszát tartalmazza. Ennek van néhány számukra fontos tulajdonsága.

headerJSON

Amennyiben a szerver válasza tartalmazott egy X-JSON headert akkor ennek kiértékelt tartalma kerül ebbe a változóba. Az X-JSON headert arra találták ki, hogy meggyorsítsák az adatkommunikációt, de limitált, hogy mennyi adatot küldhetünk ki vele, ezért ajánlatos óvatosan használni.

responseJSON

Ha a szerver a válaszát JSON formátumban küldte meg, akkor ezen a tulajdonságon keresztül érhetjük el.

responseXML

Ha a szerver válaszul XML-t küldött akkor azt ezen a tulajdonságon keresztül érhetjük el.

responseText

A szerver válaszának üzenetteste bármilyen formátumban is került kiküldésre.

Ajax.Request

Ez a legszélesebb körben használható ajax objektum.

new Ajax.Request(
	'getUsers.php',
	{
		method: 'post',
		parameters: document.forms[0].serialize(),
		onCreate: function(){
			$('ajaxloader').show();
			},
		onComplete : function(valasz){
			$('ajaxloader').hide();
			csinaljValamit(valasz.responseJSON);
			}
	});

A fenti példa a szerveren csücsülő getUsers.php filenak post metódussal elküldi a html oldalon lévő első form adatait. A kommunikáció indulásakor megjeleníti az ajaxloader id-jű elemet, amiben valószínűleg egy kis forgó kerék vagy ilyesmi található. Ezzel adjuk a user tudtára, hogy valami történik a háttérben. A szerver oldali file feldolgozza a kapott adatokat és küld az alkalmazásunknak valamiféle választ. Amikor ez megérkezik akkor meghívódik az onComplete callback, ami eltünteti az ajaxloder-t és meghívja a csinaljValamit függvényt átadva neki a válasz JSON részét.

Ajax.Updater

Az Ajax.Updater az Ajax.Request unokaöccse. Arra hivatott, hogy a szerver válaszát megjelenítse egy megadott html elemben.

new Ajax.Updater(
	$('eredmeny'),
	'getUsers.php',
	{
		method: 'post',
		parameters: document.forms[0].serialize(),
		onCreate: function(){
			$('ajaxloader').show();
			},
		onComplete : function(valasz){
			$('ajaxloader').hide();
			}
	});

A fenti függvény az eredmeny id-jű html elembe illeszti a szerver válaszát legyen az bármilyen formátumban is. Ebből kifolyólag a szervernek vagy sima szöveget vagy (x)html kódot kellene, hogy visszaadjon.

Ha valaki próbálkozott már keresztplatformos ajax kommunikációt összehozni kézzel nulláról indulva, akkor biztosan sokra értékeli majd, hogy a prototype pár sornyi kóddal milyen sok lehetőséget ad a kezébe. Aki még nem próbálkozott ilyennel, az meg egyszerűen csak örüljön neki, hogy nem is kell ezt tennie. Ennyi, kérem kapcsolja ki!