AJAX, a webturbó: szervizcsomag az Internethez Nem szerencsétlenkedünk többet szörfözés közben! Egy új technológia egyre több weboldalt tesz gyorssá és kényelmessé. Ráadásul AJAX-ot a saját weboldalán is bárki bevetheti. Vannak weboldalak, ahol még egy 6 megabites ADSL sem segít minden kattintás után elmehetünk kávézni. A böngészőablak először végtelen hosszan fehér marad, azután egy örökkévalóság, míg megjelenik a következő oldal, letöltődnek a képek, ábrák, szövegek és animációk. Az AJAX most mindennek véget vet. Amiről hangzásra a jól bevált tisztítószerre tippelnénk, az valójában egy új programozási technika, amely elejét veszi a bosszantó várakozási időknek és egyre több oldalon található meg. A nagy játékosoknál már mindenütt jelen van: a Google Maps, Microsoft Live.com és a Yahoo fotószolgáltatása már az új web-turbóra alapoznak. Hogyan is alkalmazza az új technológiát a Google Maps (http://maps.google.com)? Tekintsünk egy hagyományos térképszolgáltatást (például http:// www.multimap.com)! Ha a felhasználó meg akarja változtatni a pozícióját a térképen, a megfelelő irányt jelző linkre kell kattintania a térkép szélén és utána várni, míg a szerver fogadja a kérését, majd válaszul egy új weblapot szolgál ki, amely tartalmazza az új térképrészletet láthatóvá tevő képek hivatkozásait, s a böngésző csak ezek után kezd neki az új képek letöltéséhez. Nem így történik mindez az AJAX-ot használó Google-nél. Itt ha új részletet akarunk megtekinteni, egyszerűen húzd-és-vidd módszerrel megragadjuk a térképet az egérmutatóval, s tetszőlegesen el tudunk mozdulni a térképen - mindezt közel valós sebességgel. Ez nem varázslat! És nem is túl erőforrásigényes: ugyanis az AJAX a háttérben csak és kizárólag az új
nézethez tartozó térképkivágásokat tartalmazó XML fájlt fogja letölteni (nem egy formázott HTML dokumentumot), s innen fogja a megfelelő képek hivatkozásait kigyűjteni, s ezt is a háttérben letölteni. Ezeket csak akkor mutatja meg, ha teljesen betöltődtek - így nemcsak kényelmesebb, hanem gyorsabb is, mert csak a tényleges információ kerül kommunikálásra: így kevesebb sávszélességet igényel az adatátvitelhez, valamint az adatletöltés jobban párhuzamosítható. Mindez drága hightech-nek tűnhet, de az AJAX nem csupán a Google és a többi vezető tartalomszolgáltató exkluzív körének van fenntartva - mindenki számára könnyen elérhető. A következő oldalakon egy egyszerű példán keresztül azt is megmutatjuk, hogyan integrálható a technika egészen egyszerűen saját weboldalunkba. Az AJAX ugyanis semmi más, mint egy okosan megírt JavaScript kódrészlet, kiegészítve más, szabványos webes technológiákkal. Hogy mi ez és mit tud, már a teljes nevéből is következik: Asynchronous JavaScript and XML (extensible Markup Language) [Aszinkron JavaScript és az XML (bővíthető jelölő nyelv) ]. Példánkban egy hagyományos HTML oldal tartalmát fogjuk AJAX-szal dinamikusan megváltoztatni, CSS, JavaScript és XML használatával. Ez a gyakorlatban a következőt jelenti: ahelyett, hogy minden kattintott linkre egy weboldalat és annak minden elemét újra töltené, csak a meghatározott változásokat tölti le, s fűzi hozzá az eredeti weboldalhoz, annak frissítése nélkül. Eddig hasonló hatást csak Flash-sel vagy frame-ek használatával lehetett elérni. E két megoldással viszont az a probléma, hogy nem minden böngészővel működnek: a Flash animációkhoz feltétlenül szükséges egy külön telepítendő beépülő modul (plugin), a frame-ek pedig böngészőnként különbözően jelennek meg. Ezzel szemben az AJAX
minden modern böngészővel működik (Microsoft Internet Explorer 6, Mozilla Firefox 1.5, Opera 8.5, Apple Safari 2.0.3). Általánosan elmondható, hogy csak azoknál a felhasználóknál jelenthet gondot, akik kikapcsolták a JavaScript futtatását. Érdekességként megemlíthetjük, hogy az AJAX lassan teret hódít a PC-k mellett mobil eszközökön is: a PocketPC-ken és a mobiltelefonokon is megjelennek az új tudású böngészőprogramok, amelyek már tartalmazzák az AJAX futtatásához szükséges tudást. Főszerepben: a JavaScript Az AJAX legfontosabb alkotórésze az XMLHttp Request JavaScript parancs. Ez leegyszerűsítve egy böngésző-a-böngészőben függvénytár: hasonlóan a böngészőben való kattintáshoz, Form küldéshez - ez is HTTP Get/Post parancsokkal kommunikál a szerverrel: elküldi a lekérdezést, s fogadja a szerver erre adott válaszát. Ténylegesen ez a komponens az, amely a komplett kommunikációt bonyolítja a szerverrel, mondhatjuk: intelligens proxyként működik. Ha oldalunkon rákattintunk egy hivatkozásra, a weblap először változatlan marad nem tűnik el teljesen, mint ahogy ezt eddig a betöltési folyamatnál megszoktuk. A háttérben az AJAX működésbe lép: küldi és fogadja az adatokat. Ha megfelelő válasz érkezik a szervertől, a DOM-on (Document Object Model - a HTML dokumentumok szerkezetének változtatását lehetővé tevő függvénytár) keresztül beépíti ezt a HTML-oldalba, hozzáigazítja a CSS-stíluslapot és a böngésző -érzékelve a HTML dokumentum szerkezetében történt változást - immár a hozzáadott, formázott tartalmat jeleníti meg.
Egészen egyszerű: így illesztjük az AJAX-ot saját oldalunkba A legfontosabb minden weboldalhoz egy megfelelő JavaScript, amelyet egyszerűen csak testre kell szabni. Honnan kapjuk ezt meg? Nagyon egyszerű. Olyan weboldalakon, mint a www.ajaxian.com, számtalan sablont találunk a legkülönbözőbb alkalmazásokhoz. Egy példa a www.chip.de oldalon is van, letölthető a»chip AJAX-példa«cím alól (szerk meg.: gondolom ez az: http:// www.chip.de/downloads/c1_downloads_hs_getfile_v1_19547268.html? t=1149417978&v=3600&s=9f79d33b198b733d81c37ee5c3f0a952). Ezzel az egyszerű példaprogrammal egy kattintással egy utólagosan betöltött szövegrészletet tudunk az eredeti weboldalba illeszteni. Példánkban az egyszerűség kedvéért ez csak ennyi:»hello világ«. Az AJAX használata során a weblap alapvető szerkezete, vagyis a táblák, űrlapok és más elemek, vagy mint például a DIV-tagek, változatlanok maradnak. Az AJAX szempontjából ez utóbbiak érdekesek: helykitöltőként szolgálnak, és a tartalmakat a szerkezethez csatolják. Egy egyszerű DIV-tag az AJAX-hoz így néz ki: <div id="test"></div> Ebben az esetben a DIV-tagnek a»test«az egyértelmű azonosítója. Ez azért fontos, hogy az AJAX később pontosan ebben a DIV elemben tudja helyezni a kívánt szöveget. Példánkban ehhez az ID-hez még egy formázás is hozzá van rendelve. Ez egy külön CSS-fájl (Cascading Style Sheet - Egymásba ágyazható stíluslapok) befűzésével történik. Ez így fog kinézni: #test { display: none; } Mindenesetre ez a design itt most több, mint egyszerű: a display: none értékpár azt rögzíti, hogy a szöveg (jelen esetben a»hello világ«), s a szöveget tartalmazó DIV
ne legyen látható. Hogy megjelenjen, ahhoz a JavaScriptnek le kell kérnie az XML fájlt a szerverről. Ez azonban csak akkor történik meg, ha a felhasználó egy linkre való kattintással kiadja ezt a parancsot. Az XML-fájl tartalma így néz ki: <?xml version="1.0" encoding= UTF-8 > <root><chip>hello világ</chip></root> A»chip«XML-tag helyett bármilyen tetszőleges név állhat, mivel az XML-ben nincs kötött utasításkészlet (szemben a HTML-lel). JavaScriptünkben a»chip«definiálja a megjelenítendő szöveg forrását. Az AJAX függvény innen fog dolgozni, amint azokat a szerver XML-formátumban rendelkezésre bocsátotta. A DIV-tag most így néz ki: <div id="test">hello világ</div> A JavaScript még a DIV stílus tulajdonságait is megváltoztatja. Hogy példánkban a tartalom meg is jelenjen a weboldalon, most a»display: none«-ból»display: block«lesz. Ha a szöveg hosszabb lenne, mint a»hello világ«, ennek megfelelően most blokkban jelenne meg a weboldalon: #test { display: block; } Ha végiggondoljuk a példánkat, Az AJAX-szal egészen egyszerűen lehet olyan hatásokat megvalósítani, mint az animált és helyzetfüggően változó menük. Ezek bár működésükben sokkal egyszerűbben, majdnem úgy fognak hatni, mint a sokkal bonyolúltabban előállítható hasonló tudású Flash állományok. Vigyázat: Az AJAX használatának nem csak előnyei vannak! Például sok esetben a böngésztő Vissza gombja elvesztheti a funkcióját. A böngésző ugyanis mindig az utolsó ismert címre ugrik vissza, és nem az utolsó, az AJAX által
megváltoztatott tartalomhoz. Ezért ajánlott az AJAX-os oldalaknak csak a nyitólapját elmenteni a kedvencek közé. Hasonló problémájuk van vele a keresőknek is: a keresőrobotok ismerik, de egyelőre még nem tudják futtatni is az AJAX-os tartalmakat. Ennek következménye, hogy minden információ lesz az ilyen oldalakon indexelve. Aki az oldalai tervezésénél a fogyatékkal élőkre is tekintettel szeretne lenni, ugyancsak le kell mondania az AJAX-ról. Ugyanis azok a segédprogramok, melyek a weboldalakat felolvassák vagy fordítják, nem minden esetben tudják kezelni a dinamikus tartalmakat. Összefoglaló és kitekintés: Az AJAX megváltoztatja a világhálót Az AJAX már most is gazdagítja a webet. Hogy még praktikusabbá tegye és teljes mértékben megváltoztathassa, ahhoz a böngészőket és a keresőgépeket is hozzá kell igazítani. Biztató jel, hogy a Google is az AJAX-ot válaszotta szolgáltatásainak alapjául. A Google Mail, a Google Maps, a Google Pages és a Google Suggest is jó példa erre - mindegyik kiemelkedően egyedi megoldás mind a felhasználás, mind a megvalósítás szempontjából. Biztosak lehetünk benne, hogy a Google keresőrobotjai hamarosan boldogulni fognak az AJAX-szal. Utána pedig már a Microsoft, a Yahoo és a többi nagy játékos sem fog sokáig váratni magára. Linkajánló http://www.ajaxian.com http://www.adaptivepath.com
http://www.ajaxpatterns.org