Az AJAX elemei...
Jelen írásunkban azokra a webfejlesztési technikákra koncentrálunk, amelyek hamarosan a jelenlegi böngészési élmény átformálásához vezetnek majd - egy gyorsabb, használhatóbb, látványosabb, s talán még okosabb webet kínálva az internetezőknek.
Napjaink modern oldalaiért az AJAX néven jegyzett technikák „felelnek”. (Asynchronous JavaScript + XML, azaz aszinkron JavaScript és XML). A rövidítés a következő összetett megoldásokat foglalja magában:
- szabványalapú megjelenítőréteg, azaz az XHTML és a CSS használata,
- dinamikus felhasználói felület és interakció a DOM segítségével,
- aszinkron adatátvitel a böngésző és a szerver között az XMLHttpRequest objektummal,
- adatcsere és manipuláció XML és XSLT alapokon, továbbá
- a JavaScript intenzív használata, amely mindezeket összekapcsolja.
Lényeges megemlíteni, hogy nem csak akkor beszélünk AJAX-es kialakításról, ha a weblap ezek mindegyikét tartalmazza. Az AJAX célja, hogy rugalmasabb oldalalat (melyeknek csak a részei töltődnek újra a szerverről), gyorsabb interakciót és gazdagabb élményt kínáljon a látogatónak. Vegyük sorra, hogy melyik elem mire való, s mi célt szolgál!
Változó felület
A szabványos megjelenítőréteget talán nem szükséges bemutatni: ezekkel találkozhatunk az átlagos weboldalakon – bár az esetek többségében manapság még szabványtalan, hibás módon (amelyeket azután a különféle böngészők csak több-kevesebb sikerrel dolgoznak fel). Az XHTML az oldal tartalmának, a CSS az oldal megjelenésének a leírására szolgál.
Hirdetés
A DOM (Document Object Model, dokumentum objektum modell) egy főként XML vagy ahhoz hasonló (a HTML is ilyen) dokumentum manipulálására használható egységes eljárás. Bármely nyelven is programozzunk, létezik olyan ajánlás, amely nyelvfüggetlenül definiálja az eljárásneveket, és azok pontos működését. Esetünkben nagyrészt a JavaScript oldal manipulációs képességéről beszélhetünk, amely lehetővé teszi az oldal elemeinek elérését, változtatását, s azt, hogy az oldalon új elemeket jelenítsünk meg, illetve töröljünk onnan.
Az XMLHttpRequest objektum egy nem szabványos, eredetileg csak az Internet Explorer alatt működő megoldás. A lényege az, hogy az oldal JavaScriptje közvetlenül képes a szerverhez fordulni, adatokat átadni, illetve onnan visszakapni. Gyakorlati haszna egy olyan oldalkialakítás, amely által – kevesebb sávszélességet használva – lehetséges az oldal egyes részeinek újratöltése. Az ilyen kommunikáció segítségével pár különleges „effekt” is lehetővé válik, mint például élő adatok megjelenítése a böngészőnkben (folyamatosan változó számláló), vagy élő keresési lehetőség (egyből megjelenik az eredménylista).
Az Internet Explorer mellett ma már a Firefox (illetve a Gecko-alapú böngészők), az Opera, a Safari és a Konqueror is támogatja az XMLHttpRequest objektumot, azaz az elterjedtebb grafikus böngészők mindegyike, így voltaképp de facto szabvánnyá vált. Az XML a szerverrel történő adatcsere során a kommunikáció nyelvét jelentheti (bár a nevével ellentétben az XMLHttpRequest kapcsolat nemcsak XML, hanem bármely szöveges adatformátum alapú lehet), az XSLT pedig gyors feldolgozási, átalakítási lehetőséget nyújt mind kliens-, mind szerveroldalon.
Végül, de nem utolsósorban: a böngészőben futó JavaScript program az a nyelv, amely összefogja ezeket, és lehetővé teszi az összetett működést. Ha a böngészőnkben le van tiltva a JavaScript futtatás lehetősége, akkor az AJAX megoldások nem fognak működni.
...és gyakorlati alkalmazásuk
A Google sikersztori
Az AJAX segítségével a weben eddig ismeretlen megoldások kivitelezhetők. Jó példa erre a Google csapata: számos felületükön élnek már az új lehetőségekkel. AJAX-re épít a GMail levelezőjük, a Google Maps térképoldal, illetve a Google Suggest szolgáltatás is, amely már a keresőszavak beírásakor egészíti ki azokat, illetve jeleníti meg a várható találati számot. Talán az első, széles körben ismertté vált megoldás a BitFlux Blog élő keresője volt, ahol az előbb is említett módon, azaz a keresőszavak gépelése közben már listázásra kerülnek a találatok is.
A GMail levelezőfelülete egy igen összetett példa. Az egyes fülek, illetve levelek a teljes oldal újratöltése nélkül, csak a lényeget letöltve jelennek meg a böngészőnkben, az indexre pedig egy kattintással, mindennemű adatforgalom nélkül tudunk visszatérni. Érdekes megoldás a kedvenc levelek megjelölése is, ahol a levél melletti csillagra kattintva az egyből kedvenccé válik, s erről a szerveren az alkalmazás is egyből értesül. További kiemelendő szolgáltatás a címzettek felajánlása a címzett mező kitöltésekor. Egy alkalmazás, s (legalább) három újdonság. Az egyik az újszerű működés, amely során gyorsabban, kisebb adatmennyiség átvitelével lehet levelezni. A másik a korszerű űrlapértelmezés: ha megváltozik egy mező értéke, arról a szerver egyből értesül, elküldés gomb és hasonlók nélkül. A harmadik megoldásban pedig a hagyományos, többsoros szövegbeviteli mezőt (text area) egészítették ki, új funkciókat kínálva, használhatóbbá téve a felvitelt.
A Google Maps Észak-Amerika, s újabban Nagy-Britannia térképét jeleníti meg utcaszintű, nagyítható nézetben vagy akár műholdképek formájában is. A térkép egyszerű képek segítségével jelenik meg (alapvetően ez még nem AJAX), a keresés viszont újratöltés nélkül működik – az egyes helyszínek bejelölése vagy az útvonalak kirajzolása már az AJAX felhasználásával történik.
[+]
A Google Maps esetén – a megjelenítés mellett – újdonság az AJAX grafikai alkalmazása, amely dinamikusan teszi lehetővé az egyes pontok és útvonalak bejelölését. A megoldás lényege, hogy a szervertől kapott információk alapján képeket és szöveget pozicionál a korábban már megjelenített térkép fölé.
A Google Suggest a Google kereső beviteli mezőjét (vagyis ahova a keresendő szavakat írjuk) ruházza fel egy új lehetőséggel, az éppen gépelt szavak potenciális kiegészítéseit, illetve azok találati számát megjelenítve. Ez a megoldás a hagyományos szövegbeviteli (input) mezőt egészíti ki egy legördülő listával.
[+]
A BitFlux blog keresője a Google Suggesthez hasonlóan működik. Itt is a beviteli mező kiegészítéséről van szó, ebben az esetben azonban egyből az eredmények jelennek meg. A módszer nagy előnye a gyorsaság: a találati lista kihagyásával, közvetlenül ugorhatunk a találatokra, akár teljesen kihagyva egy oldalletöltési lépést.
A bemutatott és kétségkívül talán a legnépszerűbb példákon felül is számos érdekes megvalósítással találkozhatunk. Ilyen az Amazon Zuggest, amely a Google Suggest felületét kombinálja az Amazon keresőjével – gépelés közben egy-egy zenei anyagra, könyvre vagy más, az Amazon által kínált termékre jeleníti meg a találati listát képekkel, metainformációkkal együtt. Hasonló technológiát alkalmaz a Fonz nevű kalandjáték is: egy kis ablakban kínál szöveges kommunikációs lehetőséget a szerverrel, parancsszavakra mozogva, tárgyakat felvéve és használva stb.
Programozás
A változó felület új szemléletet is kíván. A hagyományos webfejlesztői keretrendszereket általában nem készítik fel arra, hogy csak bizonyos adatokat, egy-egy oldalrészletet tegyenek a böngésző számára elérhetővé. Az összetettebbek képesek lehetnek erre, de minden bizonnyal így is átalakítást igényelnek. Az AJAX térnyerésével több ingyenes keretrendszer is napvilágot látott, s immár a nagyobb webes programozási nyelvek, mint például a PHP, a Perl, az ASP.NET, de akár a Ruby alá is elérhetők különböző minőségű és szintű megoldások.
Jelen sorok írójának az egyik legszimpatikusabb, s véleménye szerint talán legkönnyebben használható megoldás, amikor a kliens oldalról hívhatunk meg szerveroldali függvényeket (nyilván bizonyos korlátozásokkal). Ekkor a szerverbe ágyazva a keretrendszer kódját, a program elvégzi helyettünk a kemény munkát, vagyis generálja az ehhez szükséges kódokat.
Az AJAX kapcsán nap mint nap jelennek meg érdekesebbnél érdekesebb megoldások, az előbbi lista csak a jéghegy csúcsát jelenti. Ha kíváncsiak vagyunk ezekre, keressünk rá kedvenc keresőnkben az „AJAX examples” kifejezésre, vagy látogassunk el az alábbi címre: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples.
