Szerepeljen itt egy szerintem bevezetőként teljesen megfelelő, az AJAX új webalapú technikai bemutatását célzó kis írás. Nem nagyon megy bele konkrét programozási dolgokba, sokkal inkább a jelentőségét és a technikáját próbálja szövegesen bemutatni. A cikk innen származik, de mindenképp le akartam menteni. Itt olvasható:
Mi az Ajax?
Az „Ajax webalkalmazások” körüli felhajtások közepette megbocsátható, ha feltételezzük az Ajaxról, hogy egy alapvetően új plugin, hasonlóan a Macromedia Flashez. Ezért az a benyomásunk támadhat, hogy az Ajax számunkra haszontalan, amíg böngészőnket nem frissítjük naprakésszé, vagy legalább le nem töltjük az az irigyelt „Ajax plugint”.
Jó hírrel szolgálhatunk: Az Ajax máris működik. Legalábbis, ha böngészőnk az utóbbi néhány évben készült – IE, Firefox, Safari, vagy Opera. Talán már láttuk, vagy ki is próbáltuk a Google Maps, vagy a GMail szolgáltatásait. Mindkettő Ajax alkalmazás. Ugyanúgy, mint a Zuggest és az AjaxPatterns Wiki Demo.
Mi bennük a közös?
Minden ilyen alkalmazás nagy ugrást tesz előre az általános irodai alkalmazások irányába. Nem kell többé másodperceket várni egy kattintás után arra, hogy az oldal újratöltődjön. Az Ajax alkalmazások a változásoka valós időben hajtják végre. Lehetővé teszik a húzás műveletét (drag), frissítik magukat az új információkkal, újratöltés nélkül is teljesen át lehet velük rendezni a lapot.
És nem kell hozzájuk különleges plugin. Az Ajax egy konstrukciós stílus, egyike azoknak, amelyek kihasználják a modern böngészők szolgáltatásait, hogy olyat hozzanak létre, ami inkább hasonlít egy irodai munkakörnyezetre, mint egy webes felületre. Néhány fontosabb jellegzetesség:
Folyamatosság: A hagyomásnyos webes alkalmazások úgy működnek, hogy elküldjük egy űrlap tartalmát, várunk néhány másodpercet, figyeljük, amíg a böngésző újrarajzolja a lapot, aztány kezdjük előlről. Elfelejtettük beírni a körzetszámot a telefonszámhoz? Kezdjük az eegészet előlről. Néha úgy érezhetjük, mintha dugóban ülnénk: előremegyünk 20 métert, megállunk egy percre, megyünk 20 métert, megállunk egy percre… Hány e-üzleti eladás hiúsult meg azért, mert a felhasználó tól sok hibaüzenettel találkozott, és feladta a harcot? Az Ajax sima utat kínál. Nincs több lapújratöltés – csak tegyük a dolgunkat és a böngésző válaszol.
Valósidejű frissítés: A folyamtosság részeként, az Ajax alkalmazások a lapokat valós időben képesek frissíteni. Jelenleg az új webes szolgáltatások időközönként (pl. minden 15 percben) újrarajzolják a teljes lapot. Ezzel szemben, egy Ajax alkalmazást futtató böngésző esetén megoldható, hogy csak a lap egy részének tartalma változzon meg, úgy, hogy a lap többi része változatlan marad.
Grafikus interakció: Csiricsáré oldalak bőséggel akadnak a weben, de az interakció alapvető módja az 1970-es évek űrlap alapú adatbveviteli rendszerén alapul. Az Ajax képviseli az átmenetet a napjaink irodai alkalmazásaiban megszokott GUI vezérlőelemek világa felé. Ilyen módon találkozhatunk animációkkal (pl. elhalványuló szövegekkel), amelyek értesítenek a folyamatben levő mentésről, lehetségessé válik a húzás művelete a böngészőkben is, és láthatjuk, hogy egy statikus szöveg beviteli mezővé válik, amikor a kurzor fölé kerül.
Hogy elkerüljünk mindenféle zavart, néhány dolog, ami nem Ajax jellegzetesség:
Szabadalom: Bár az „Ajax” talán a legközismertebb márkanév a történelemben, de a webdesign esetében az „Ajax” se nem egy társaság neve, se nem terméknév. Még csak nem is egy szabvány, vagy bizottság neve. Egyszerűen egy tervezési megközelítés neve, néhány kapcsolódó technológiát is ideértve.
Pluginre épül: Az Ajax alkalmazásokhoz nem szükséges, hogy a felhasználók böngésző plugineket, vagy bármit telepítsenek.
Böngészőfüggő: Feltéve, hogy a felhasználó viszonylag korszerű, (mondjuk 2001 utáni) elterjedt böngészőt használ, egy Ajax alkalmazás közel ugyanúgy fut. A böngészőfüggő alkalmazások meghiúsítanák az Ajax céljait.
Miért népszerű?
Egy furcsaság: a modern böngészők már néhány éve képesek az Ajax alkalmazások kezelésére, és sokan használják is ezeket a böngészőket. Valójában, az ilyen alkalmazások egy ideje már működnek a céges belső hálózatokon, rejtve a nagyközönség elől, és a web nyilvános részének eldugott sarkaiban. Mégis, ezek az alkalmazások csak a legutóbbi néhány hónapban indultak virágzásnak. Miért?
A lehetőség már adott volt, de a katalizátor egy 2005 februári cikk volt, ahol először került köztudatba az Ajax kifejezés. Ebben a cikkben Jesse James Garrett az „Ajax” szót választotta a dinamikus webalkalmazások új formájának leírására. Az „AJAX” tulajdonképpen egy nagyképű betűszó:
Asynchronous JavaScript+CSS+DOM+XMLHttpRequest
Amit a technológia tartalmaz: Javascript és DHTML, így az alkalmazások válaszolni tudnak az eseményekre (pl. egérkattintás); DOM, aminek használatával az alkalmazások kezelni tudják a megjelenítőt; XMLHttpRequest, ami lehetővé teszi, hogy a böngésző és a szerver a teljes lap frissítése nélkül tudjon kommunikálni.
Garrett cikke volt a fordulópont – a gát átszakadt és az Ajax több okból is gyorsan kezdett terjedni:
A web platformmá vált: A web többé nem csak információközlő webhelyekről szólt; egyre inkább növekvően használták teljeskörű szolgltatást nyűjtó alkalmazásokhoz. Ezek az alkalmazások az együttműködés gazdagabb formáit kívánták meg
A felhasználók csalódottsága: A szokványos „kattints-és-várj”, űrlap-alapú modell már nem volt kielégítő. A legtöbb felhasználó készségszinten kezelte a web alapszolgáltatásait és készek voltak befogadni valami újat, többet.
Web 2.0 korszellem: Az Ajax számos Web 2.0 projekttel jól kitöltötte a „Web 2.0” ernyője alatti helyet, megmutatva az Ajax lehetőségeit (még az Ajax név létrejötte előtt). A Web 2.0 új ötletekről és a megvalósulásuk lehetőségről szól; és az Ajax lehetőséget kínál újfajta alkalmazások létrejöttére, valamint a meglevő rendszerek fejlesztésére. Az Ajax maga a „web”, mégpedig a 2.0 verziószámmal.
Többszörös hozzáférés: Sokan használnak egynél több számítógépet: otthon, munkahelyen, iskolában, nyilvános helyeken. A laptopok és a hordozható merevlemezek is kínálnak egyfajta megoldást, de kényelmetlenek, magukban hordozzák az ellopás kockázatát, és gyakran nincs hova csatlakoztatni őket. Az adatok online tárolása kézenfekvőbb megoldás, és egy gazdag webes alkalmazáson keresztüli hozzáférés természetes megoldás.
A web, mint az egyetlen platform: A nyilvános internet-hozzáférési pontok széleskörű elterjedésének köszönhetően az úgynevezett technológiai szakadék az országok között és a társadalmi-gazdasági csoortok között lassan zárul. Sokaknak nincs ugyan PC-jük, mégis rendszeresen interneteznek nyilvános hozzáférési pontokról, iskolából, barátaiknál. A felhasználók ezen kategóriái számára nem lehetséges helyileg alkalmazásokat telepíteni és adatokat tárolni. A web az ő egyetlen platformjuk.
Jobb infrastruktúra: Számos háztartásban van szélessávú internet kapcsolata, és az utóbbi néhány évben a szerverek kapacitása is tovább nőtt. A kliens és szerver közötti gyakori oda-vissza adatcserének köszönhetően, néhány Ajax alkalmazásnak nagy étványa van a sávszélességre és a szerverkapacitásra. Ráadásul, a szerveroldali tárolás slég olcsó sok magánszemélynek és társaságnak ahhoz, hogy előnyben részesítsék az adatok online tárolását, ami lehetővé teszi az adathozzáférést a webalkalmazások számára.
Hatékony fejlesztés: A fejlesztők számára egy webes programozási modell sokkal termelékenyebb lehet, mint a hagyományos GUI alternatíva. A fejlesztőknek minden platformra csak egy terméket kell kifejleszteni, a frissítés is gyakrabban történhet, mint a hagyományos alkalmazások esetében (ki látott már webhelyen verziószámot?), és eldönthetik, milyen programozási nyelvet és könyvtárakat alkalmaznak.
Tökéletesebb böngészők: Bár az Ajax alapjai már néhány éve rendelkezésre állnak, a böngészők fejlettsége bizonyos területeken – például az XML feldolgozás és hibakeresés támogatásában, és a szabványkövetésben – csak mostanában enyhítette az Ajax-stílusú fejlesztés kínjait.
Biztonsági megfontolások: Ahogy előtérbe kerültek a biztonsági megfontolások, a cégek egyre inkább hajlamosak a munkaállomások zárolására és a böngésző pluginek tiltására. A céges intraneten futó webes alkalmazások ezért jótéteményként hatnak, és szorosabb felügyeletet és hozzáférés-ellenőrzést tesznek lehetővé.
Platformok változatossága: Az Apple növekedése, együtt a Linux PC-s terjedésével, azt a szükségletet eredményezte, hogy sokféle alkalmazást hordozható módon kellett kifejleszteni; a hordozhatóságnak a web platform választása népszerű megoldása.
Böngészők változatossága: A Flock, a Safari, és a Mozillával egyesült Firefox, valamint az Opera változatos alternatívát jelent az Internet Explorerrel szemben, amelyeket a fejlesztők nem hagyhatnak figyelmen kívül. A legtöbb Ajax technika – lévén, hogy szabványos böngésző-szolgáltatásokon alapul – minden modern böngészővel használható.
Az is megér néhány szót, hogy az Ajax híre miért terjedt el ilyen gyorsan az internetes közösségben:
A ‘G’ faktor: Több kiemelkedő Google projektet fejlesztettek az Ajax felhasználásával: Google Maps és GMail. Ha a Google beszél, az emberek figyelnek.
Egyszerű üzenet: Az Ajax egyenes üzenet: csak meg kell mutatni valakinek a Google Maps szolgáltatását. Sokkal egyszerűbb, mint bő lére eresztve elmagyarázni.
Gyors hírterjedés: Az RSS-nek, blogoknak és a podcastoknak, minden arra férdemes információ gyorsan elterjedis. A fenti okokból az Ajax hamar befutott. Ha már egyszer a neve kívánatos fejlesztési stíluként ismertté vált, mindenki beszélni akart róla.
Vannak hátrányai?
Az Ajax nem kereskedelmi márka. Ha valaki Ajaxxal való szerkesztésre adja a fejét, figyelembe kell vennie néhány hátulütőt:
Korlátozott képességek: Néhány Ajax alkalmazás természetes módon hajt végre olyan dolgokat, amikről nem is álmodtunk volna, hogy lehetséges a weben, de a web-platformnak még mindig van néhány lényeges korlátozó tényezője. Például: multimédiás képességek, helyi adattárolás, valósidejű grafikák, együttműködés a hardverrel, pl. a nyomtatókkal és a webkamerákkal. Ezek közül néhány támogatása javul a fejlett böngészőkben, néhányuk elérhető Flash használatával, de több közülük egyszerűen nem lehetséges, és ha szükség van rájuk, kizárják az Ajax használatát.
Teljesítménybeli vonatkozások: A böngésző és a szerver közötti állandó párbeszéd egy alkalmazás használatakor a nem válaszolás érzetét keltheti. Mindenesetre van néhány jól ismert minta a teljesítmény optimalizációra, például a böngészőoldali cahe-elés. Ezek általában kielégítőek, még a nagy tempót diktáló alkalmazások esetén is (pl. részvény kereskedés), de az Ajax még mindig nem alkalmazható az igazán időkritikus alkalmazások – pédául a munkagépek vezérlése – területén.
Internethozzáférés szükségessége: Internet csatlakozás hiányában a felhasználók nem tudnak Ajax alkalmazásokat futtatni.
Második programozási nyelv: A komoly Ajax alkalmazások némi Javascript ismeretet követelnek meg. Sok fejlesztő fedezi fel, hogy a Javascript valójában alkalmasabb nyelv, mint ahogy azt először feltételezték, de mindemellett van hátránya is annak, ha nem szerveroldali nyelvet alarunk alkalmazni.
A visszaélés lehetősége: Mint minden erőteljes technológia esetén, az Ajax elvei is visszájukra fordíthatók óvatlan programozás esetén.
Alap technikák és technológiák
Az Ajax alkalmazások a következőkben leírt technikák és technológiák kombinációját használják; ezek mindegyike elérhető a modern böngészőkben:
Válasz a felhasználói eseményekre DHTML használatával – Minden Ajax alkalmazás válaszol a böngészőben előforduló eseményekre, és a DHTML teszi lehetővé az események hatására bekövetkező akciókat.
Dinamikus böngészőviselkedés Javascript használatával – A Javascript használata szolgáltatja a dinamikus viselkedést a lap első betöltődése után.
A képernyő frisítése a Dokumentum Objektummodell (DOM) használatával – A modern böngészők a HTML dokumentumot adatstruktúraként értelmezik. A struktúrát Javascript használatával befolyásolva, lehetséges megváltoztatni a már egyszer betöltődött lapot. Például, lehetséges szöveget, vagy színeket megváltoztatni.
Események újradefiniálása a DOM és a Javascript használatával – Az eseménykezelők is részei a DOM-nak, így egy Ajax alkalmazás válaszolhat egy eseményre, megváltoztatva, mi történjen egy esemény bekövetkezésekor.
Webes távvezérlés az XMLHttpRequest és Frame-ek használatával – A folyamatos működés érdekében az Ajax alkalmazások állandóan oda-vissza kommunikálnak a szerverrel, anélkül, hogy űrlap adatot küldenének, vagy újrarajzolnák a lapot. Régebben több megoldás is volt hasonló célra, például a Frame-ek és az IFrame-ek, de a legtöbb Ajax alkalmazás most az XMLHttpRequest objektumot használja fel, amely kifejezetten erre a célra lett tervezve.
Időzítés a setTimeout() fügvény használatával – A Javascript setTimeout() eljárásához hasonló mechanizmusok használatával az Ajax alkalmazások megadott időnként lefutó események létrehozására is alkalmas.
Üzenetátadás XML használatával – Az XML népszerű formátuma a kliens és a szerver közti üzenetátadásoknak, mivel az XML kezelésének erős a támogatottsága mindkét oldalon.
Az Ajax alkalmazások életciklusa
Az Ajax életciklusa inkább egy hagyományos GUI-ra hasonlít, mint a hagyományos webes alkalmazásokéra, mivel a DOM objektumok is inkább a GUI widgetekre hajaznak. A script bejegyzi az eseménykezelőket a DOM objektumokba, és az eseményekre válaszolva kezeli a DOM-ot. Az eseményfeldolgozási ciklus részeként a szerver is segítségül hívható. Akad itt azért némi bonyodalom, ugyanis a szerverhívás aszinkron módon történik, ezért az esemény-figyelési fázis elválik az eseményre válaszolás fázisától.
Így néz ki egy tipikus Ajax életciklus a böngészőben:
Látogatás: A felhasználó a szokásos módon meglátogatja a webhelyet (rákattint egy linkre, vagy begépeli az URL-t).
Inicializálás: A lap betöltődik (először). A felhasználói cselekmények fogadására callback kódok készülnek, egy ciklus is létrejöhet a lap elemeinek folyamatos frissítésére.
Eseményciklus:
Böngésző-esemény: Bekövetkezik egy esemény, mondjuk egy billentyű lenyomása.
Kérés a szerverhez: A böngésző kérést küld a szerverhez.
…-a szerver feldolgozza az eseményt-
Szerverválasz: Egy pillanattal később a szerver válaszol, a válasz átadása kerül a kérő callback eljárásnak, annak, amely a kérésben meg volt jelölve.
Böngészőfrissítés A hívó callback eljárás a válasznak megfelelően frissíti a DOM-ot, beleértve a Javascript változókat.
Természetesen sok változat létezhet. Gyakorlatilag, sok esemény helyileg van kezelve és nem indítanak kérést a szerver felé. Vannak rövid életű Ajax alkalmazások is, ahol a böngészővel történő együttműködés befejeződik a felhasználói beavatkozással. Mások érintkezésben maradnak a felhasználóval egészen addig, amíg a felhasználó az adott lapot böngészi.
Jegyezzük meg, hogy a Böngészőesemény és a Szerver-kérés ugyanazon a szálon fut, míg a Szerver-válasz és a Böngészőfrisítés egy másik, külön szálon. Ez a szerver kérések aszinkron természete miatt van így. Tulajdonképpen lehetséges az XMLHttpRequest konfigurálása aszinkron hívásokhoz, de ez rossz gyakorlat, mert feltartja a felhasználót.
További információk
Hogyan kezdjük el? Iránymutatónak néhány link:
Az Ajax minták webhelyen tervezési minták gyűjtemény található, az Ajax alkalmazások használhatósági és technikai megvalósítására vonatkozó tanácsokkal.
Az Ajax linkek linkeket tartalmaz néhány Ajax webhely és blog felé.
Az Ajax példák gyűjteményében linkek találhatók egy csomó működő Ajax webhely felé.
Az Ajax keretrendszer összefoglalót nyújt az Ajaxot támogató keretrendszerekről.
