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:
- Létrehozzuk az XHR objektumot
- Kapcsolatot kezdeményez a szerver felé
- Ha szükséges összeállítja a kérés headerjeit
- Elküldi a szerver felé a kérést
- Elkezdi fogadni a szerver válaszát
- 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 acontentType
és azencoding
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!
Pingback:WebMánia » Amit a scriptaculousról tudni érdemes 4