2. Előzmények és előismeretek áttekintése

Átírás

1 1. Bevezetés Az Internetet világszerte százmilliók használják, és számuk egyre csak növekszik. A legtöbben munkájukhoz, tanuláshoz, szórakozáshoz használják. Nem szerves része az életüknek, csak egy plusz lehetőség. Ugyanakkor vannak, akiknek hobbijuk az Internet. Ők azok, akik felfedezték az általa nyújtott lehetőségeket. De az Internet többre képes annál, amit ma el tudnánk képzelni. Az elmúlt egy-két évben olyan gyökeres változások mentek végbe a fejlődésben, amely fantasztikus lehetőségeket kínál. Dolgozatomban átfogó képet próbálok festeni ezekről a napjainkban kínálkozó lehetőségekről és újdonságokról. A Web 2.0 kapcsán bemutatom a trendeket, és megpróbálom leírni azt a folyamatot, amely során a Web a mai formáját elnyerte, mind a technikai lépések mozzanatait, mind pedig a szemléletbeli változásokat, melyek ismerete - véleményem szerint nagyon fontos ahhoz, hogy megértsük mi zajlik körülöttünk. Ezzel a szakdolgozattal célom, hogy átfogó ismereteket nyújtsak mindazoknak, akik érdeklődnek az AJAX technológia iránt. Bemutatom a technológia által kínált lehetőségeket, annak előnyeivel és hátrányaival, egyszerű példák és példaprogramok segítségével. Valamint további célkitűzésem, hogy e szakdolgozat - mint jegyzet - a Kecskeméti Főiskola GAMF Karának Hálózati szakirányos hallgatóinak segítséget nyújtson a tanulmányaikban. Ebből tehát az is következik, hogy szakdolgozat szerzője feltételezi, hogy az olvasó rendelkezik bizonyos előismeretekkel a webprogramozás területén, alapszinten ismeri a HTML, a JavaScript, és az XML nyelveket, valamint egy szerver oldali nyelvet, például a PHP-t. 1

2 2. Előzmények és előismeretek áttekintése 2.1. Web 2.0 Mint tudjuk, az Internet hálózatba kapcsolt számítógépek százmillióinak nyilvánosan elérhető rendszere. Működését protokollok írják le, mint az IP, TCP, UDP, DNS, PPP, SLIP, ICMP, POP3, IMAP, SMTP, HTTP/S, SSH, Telnet, FTP, LDAP, SSL, TLS... Sokan keverik a World Wide Web-bel, amely azonban csak az Internet egy szolgáltatása mint az , a chat, a fájlmegosztás, a Usenet 1, a VoIP 2 és a weboldalak. A web világa folyamatosan fejlődik, befolyásolják különböző trendek, üzleti érdekek, a technika fejlődése. Az utóbbi időben megnövekedett sávszélesség adta lehetőségek, és az úgynevezett alternatív böngészők fejlődése új utakat nyit meg a webfejlesztők előtt. Ezeket az új lehetőségeket, szolgáltatásokat, a megoldások összességét, vagyis magát az új élményt, a jelenséget szokás mostanában Web 2.0 néven emlegetni A kezdetek Ahogy terjedt a Web használata, úgy nőtt a népszerűsége, és fejlődtek a szükséges eszközök. A fejlődés folyamatos, és töretlen a mai napig. Az Internet által biztosította lehetőségek mára már szinte korlátlanok: a videokonferenciától kezdve az online rádióhallgatáson keresztül a kereshető, hatalmas információtárakig szinte bármi elérhetővé vált. Ugyanakkor eget rengető változások mégsem történtek. A design, a tartalom fejlődött, a felhasználók száma az egekbe szökött. A négy legfontosabb elem azonban ugyanaz: a hypertext: a dokumentumokat linkek kapcsolják össze, így egyikből a másikba léphetünk át egyetlen kattintással; a számítógépek hálózati címei, amellyel azonosíthatjuk őket a hálózaton; a kliens-szerver modell, amely alapján a kliens kéréssel fordul a kiszolgáló felé, mire az ellátja a klienst a számára szükséges szolgáltatással, adatokkal vagy fájlokkal;

3 a leíró nyelv pedig jelzi a böngészőnek miként jelenítse meg a tartalmat. A 90-es években tanúi lehettünk az Internet-boomnak, a felhasználó bázis és a Weben elhelyezett tartalom hatalmas méretű növekedésének. Ezt az átalakulást egyfajta Internetevolúciónak is nevezhetnénk. Kialakultak a hírcsoportok, a vállalatoknak segített az üzletmenet javításában, a tudományos kutatások kooperálásában, az oktatásban, rengeteg szubkultúra és közösség alakult ki. Olyan projectek jöhettek létre az Internet segítségével, mint a több ezer fejlesztőt összekötő nyílt forráskódú GNU/Linux mozgalom. Ekkoriban az oldalak még jellemzően statikusak voltak, ritkán változtak, vagy egyáltalán nem is frissítették tartalmukat. A reklámok, és a belőlük származó bevétel ugyanakkor még nem volt képes bármilyen tartalomszolgáltatást eltartani. Újabban az így viselkedő webet szokás "első változatnak" hívni, így - utólagos megegyezéssel - ezt a korszakot hívjuk Web 1.0-nak, bár sokan nem fogadják el ezt A mérföldkő A.COM (dotkom) korszakban kialakult a World Wide Web általunk is ismert jelenlegi arca. Ez az új felfogás tekinthető a Web 2.0 előszelének. Megjegyzés: Azt viszont hozzá kell tenni, hogy a dotkom által megjósolt jövőkép rövid idő alatt dőlt a porba. Az elképzelés az volt, hogy az emberek az interneten keresztül intéznek majd mindent, a bevásárlástól a kutyasétáltatásig. Viszont hamar bebizonyosodott, hogy a társadalom egyenlőre még nem nyitott az effajta újkeletű eszmékre. Az új lehetőségek kihasználásához mindenképpen szemléletváltásra lesz szükség a jövőben. Először a webes grafika kezdett fejlődni minden előnyével és hátrányával (a táblázat alapú oldalkialakítások - sajnos - még ma is elterjedtnek számítanak) - a céges brosúrák, reklámanyagok új terjesztési lehetőségeként, az információ közzétételének új módjaként jelent meg a web. Ezzel párhuzamosan a dinamikus weboldalak is napvilágot láttak. A tartalomszolgáltatás kiteljesedett, milliónyi híroldal jelent meg, amelyek gyakran frissítették tartalmukat szükség lett a CMS-ekre, vagy magyarul tartalomkezelő rendszerekre. Az emberek híreket olvastak, fórumokba jártak, szörföztek - tehát jellemzően újságírók írták a híreket, szerkesztették a weboldalakat, és az információ egy irányba, az olvasó irányába áramlott. A tartalomszolgáltatókat igazából egy cél hajtotta: a reklámozás, a profitszerzés. Bárki indíthatott persze weboldalt, saját oldal készítésével, vagy ingyenes, nyílt forráskódú CMS-ek használatával, akár ingyenes tárhelyen. De kezdetben nehéz volt pénzt keresni egy induló oldallal, reklámbevételt szerezni, olvasottságot elérni. Egyesek véleménye szerint ez volt a Web 1.5. A Web 1.5 korszaka nem ért véget. Ha bármikor leülünk egy számítógép elé, és behozzuk kedvenc híroldalunk, továbbra is professzionális híroldalakkal találkozunk, hirdetésekkel, az 3

4 olvasó felé irányuló információáradattal. De a következő generáció már itt van, és futótűzként terjed. Nem is feltétlenül kell tudnunk, hogy egy weboldal adott esetben már a következő generációt képviseli Az új generáció: Web 2.0 A kezdetekben a web céljául egy igen egyszerű feladatot tűztek ki: legyen alkalmas dokumentumok közzétételére a tudós társadalomban. A kezdeti célokon túlnőve - jórészt az üzleti szándék megjelenésével - a dinamikus, interaktív szolgáltatások (portálok, fórumok, internetes boltok) is megjelentek rajta, sőt, a webet sokunk már egyből így ismerte meg. Az utóbbi évek eredményeként az interakción túllépve a Web megint átalakult, "megérkezett" a böngészési élmény következő változata, a Web 2.0. Az új lehetőségeket, a szolgáltatások, megoldások összességét, vagyis magát az új élményt, a jelenséget szokás mostanában Web 2.0 néven emlegetni A Web 2.0 kifejezés a World Wide Web fejlesztésének második nagy szakaszát jelöli, amely annak alkalmazásait és szolgáltatásait foglalja magában. Sok olyan, a közelmúltban kifejlesztett és elterjedt technológia és koncepció számít ide, mint a weblogok, a podcast, az RSS, és a publikálás egyéb formái; szociális szoftverek, web API-k, online webszolgáltatások, AJAX, a Ruby on Rails, és még sorolhatnánk. Maga a Web 2.0 kifejezés jelentése még nem tisztázott. Az említett technológiák sok esetben nagyon újak, rohamtempóban fejlődnek és változnak. Például a 2004-ben kitalált podcasting szó 2005-ben a New Oxford American Dictionary szerkesztőinek választása alapján az Év Szava lett. Az AJAX kifejezést februárjában alkották meg. A főbb felhasználók között megtaláljuk a legnagyobbakat Google, Yahoo, Microsoft de bárki készíthet egyszerűen Web 2.0-ás alkalmazást. Hihetetlen népszerűen lettek olyan kisebb cégek, mint a Protopage 3, a del.icio.us 4, a Flickr 5 vagy a Bloglines 6. Hatalmas pénzek áramolnak ezekbe a cégekbe, és egy jó ötlettel könnyű milliomossá válni

5 Ha mégis jellemeznünk kellene, akkor a Web 2.0-át a következő jellemzők, folyamatok öszszegeként tudnánk leírni: a weboldalak elkülönített információs tárolókból tartalmi és funkcionális forrásokká, sőt webes alkalmazásokat kiszolgáló számítási platformmá alakulnak; szociális jelenség, amely a Web tartalmának létrehozását és elosztását nyílt kommunikációval, a felügyelet elosztásával, a megosztás és az újrafelhasználás szabadságával végzi; szervezett és kategorizált tartalom; a web kereskedelmi értékének növekedése. A legszebb az egészben, hogy a Web 2.0 semmit nem igényel a végfelhasználótól. Nem kell új számítógép, frissített operációs rendszer, sőt semmilyen telepített program, vagy kiegészítő. A változások elsősorban a háttérben zajlanak, szerveroldalon. [1] [5] De pontosan mi is az a Web 2.0? Pontos definíciót nem lehet adni, pedig sokan próbálták már leírni a Web 2.0-ként emlegetett jelenséget. Leginkább definíció nélküli gyűjtőfogalomnak, vagy koncepciónak tekinthetjük. Szerintem a Web 2.0 nem más, mint a szemünk előtt átalakulóban lévő Web, amely új környezetet teremt közösségeknek, akik ugyanazon eszmék által vezérelve csoportot alakítanak ki. Mindenki tagja lehet ennek a közösségnek, ahol tanulhat másoktól, és saját értékeivel gazdagíthatja azt. Ez a jelenség, amely napjainkban zajlik, hatással van mindenkire, aki valamilyen kapcsolatban áll a Webbel. Az új weben mindenki feltöltő is egyszemélyben. Ez a jelenség magyarázható azzal is, hogy a technikai fejlettség elérkezett arra a fokra, amikor kényelmesen, és egyszerűen használható kezelőfelelüttel rendelkező weboldalak segítségével tölthetünk fel bármilyen tartalmat, legyen az szöveg, kép, vagy videó. Tim O'Reilly szerint a kollektív intelligenciára épülő új web a net indulásához való visszatérést jelent, és egyfajta globális tudat kialakulásához vezethet, ezáltal az emberi potenciál (human potential) mozgalom technológia közvetítette beteljesítőjévé válik. Sok webfejlesztő, értékelő szerint Tim O'Reilly vallásos ihletettségű, megváltás tematikájú, kizárólag az elragadtatás hangján megszólaló, hetvenes évekből eredeztethető kaliforniai 5

6 hippis, new age-es hozzáállása túlzott, elnagyolt. Sokak szerint indokolatlan különválasztani a Web 1.0-t és a 2.0-t. 7 írja a Magyar Narancs. A szkeptikus szerint a Web 2.0 mindössze egy új divatirányzat, amely ugyan nagy hatással van a webes társadalomra, de mély nyomot nem fog hagyni maga után. Vannak akik úgy gondolják, néhány év múlva levonul az ár, és magával viszi, annak minden értékét. A Web eljutott arra a szintre, amikor divattá vált annak használata. Pontosabban bizonyos szolgáltatások igénybevétele. Előbb-utóbb elhalványul a Web 2.0, mint címke, és miután majd nem tulajdonítanak neki akkora jelentőséget a felhasználók, gyorsan a süllyesztőben végzi Annyi bizonyos, hogy megindult egy folyamat, ami minden szempontból előre felé lendíti a netes társadalmat, és ezzel együtt a kultúráját is. Elindult egy hullám, melynek hatására egyremásra jelennek meg a második generációt propagáló webalkalmazások. Egyik percről a másikra születnek meg, és hódítanak teret az új ötletek. Naponta látják meg a napvilágot a legszokatlanabb, legmerészebb, és legeredetibb böngészők, keresők, közösségi portálok, videó naplók, irodai alkalmazások, játékok, stb. Újszerűségük abban rejlik, hogy többségében a közösséget, a tudás-megosztást, a közösségi embert helyezi a középpontba. [6] A jövő a webes alkalmazásoké Az utóbbi években történt változások hatását mindenki tapasztalhatta. A webfejlesztőktől kezdve, az átlagfelhasználókig mindenki észlelte ezeket a jeleket. Nap, mint nap kapnak nyilvánosságot újdonságok, melyek rövid idő leforgása alatt, óriási népszerűségre tesznek szert. A változás azonban nem technikai jellegű. A használt megoldások mindegyike már évek óta a rendelkezésünkre áll. Tehát nem jelentős technikai újdonságok jelentek meg, hanem a már meglévőket ötvözve új megvilágításba helyezték a webfejlesztést. Így könnyen belátható, hogy a változás új gondolkodási módot tükröz. A fejlesztők másképp kezdtek el gondolkodni. Az internetet, mint egy nagy hangosbeszélőt használva gyorsan terjedt el az új eszme. Az új szolgáltatások egyik pillanatról a másikra váltak hihetetlenül népszerűvé. Azonban nem szabad megfeledkezni a felhasználókról sem, akikre az egész jelenség épít: megváltozik a Webhez való hozzáállásunk, új lehetőségeket fedezünk fel, és kezdünk el aktívan használni

7 A Web a változások hatására egyre inkább középpontba kerül. Már ma is vannak olyan alkalmazások, melyek kizárólag a Weben léteznek. Használatukhoz nincs szükségünk másra, mint egy böngészőre. A webes alkalmazások előnye, hogy - egy irodai, vagy otthoni hálózat esetén - nem kell minden gépre külön telepíteni, elég a web szerverre, s máris bármelyik gépről használhatóak. Ez azért is fontos szempont, mivel így a karbantartás is leegyszerűsödik. Egy másik érdekes szempont, hogy mivel a gépünkre nem töltünk le semmilyen (az operációs rendszer által) futtatható állományt, a vírusok tekintetében is sokkal védettebbek lehetünk. Ezek a webalkalmazások bárhonnan a világból elérhetőek. Manapság már ugyanazt a valódi alkalmazás érzését keltik - kompromisszumok nélkül -, melyek a gépünkre vannak telepítve, sőt túl is lépnek azokon. A látványt vizsgálva ismét a webalkalmazások oldalára billen a mérleg nyelve. Sokkal gazdagabb grafikai megoldásokat használhatunk, és például különböző effektekkel színesíthetjük az alkalmazásunkat. A valódi alkalmazás érzését az újratöltés nélküli kommunikáció megjelenése segítheti, de olyan megoldások is ismertek, melyek egy operációs rendszerhez hasonlatos felületet jelenítenek meg a böngészőben: asztallal, átméretezhető ablakokkal, képernyővédővel. A Web új kapukat nyit meg a szórakozás, a munka, és az emberi kapcsolatok terén. Jelentőségét az elénk vetített jövőkép csak fokozza. [5] 7

8 3. AJAX [2,7] A hagyományos webes alkalmazások tulajdonképpen a felhasználó által bevitt adatokat küldik el egy webszervernek. A szerver feldolgozza a kérést, előállítja a válaszként a böngészőnek visszaküldendő adatokat, majd egy új oldalt juttat vissza és bontja a kapcsolatot. Mindez persze a háttérben történik a felhasználó tudomása nélkül. Amíg ez a folyamat végbemegy, azaz a kérésre kapott válasz meg nem jelenik a felhasználó böngészőjében, addig a kliens várakozásra van kényszerülve. Minden egyes kliens-szerver interakció alatt várakoznia kell. Mivel ez több másodpercet is igénybe vehet, ezek a webalkalmazások lassabban, lomhábban válaszolnak, mint natívan futó társaik. Lehet ugyan, hogy a webalkalmazás tökéletesen működik, és a szerver a lehető leggyorsabban próbálja meg kiszolgálni a felé érkező kéréseket, de a felhasználói élmény szinte nyomon sem érhető ebben a modellben. Ennek megoldására vegyük az eredeti modellt, a webet, mint információs közeget, majd az eredeti technológiára építve alkalmazzunk új megoldásokat, melyek segítségével jelentősen javítható a felhasználói élmény. Be kell látni, hogy főként nem technológiai fejlesztésre van szükség, hanem egyfajta szemléletváltásra. Ilyen szemléletbeli váltást mutat az AJAX használata is. Az AJAX az Asynchronous JavaScript and XML rövidítése. Webfejlesztési technológia, amely webes alkalmazások készítésére használható: XHTML (vagy HTML) és CSS Document Object Model, JavaScript XMLHttpRequest használatával. Az AJAX önmagában nem értelmezhető úgy, mint egy önálló technológia, hanem egy kifejezés, amely a létező szabványok és technológiák egy csoportjának közös felhasználását, és újszerű alkalmazását jelöli. Lényege, hogy az AJAX alkalmazás az oldal letöltődése után további kéréseket küld a szerver felé a HTTP protokollon keresztül. A kérések küldése és fogadása a JavaScript felhasználásával és aszinkron módon történik. A webfejlesztők régóta kísérleteznek azzal, hogyan lehetne az asztali alkalmazásokhoz hasonló, rugalmasan használható webes felületeket készíteni. Az AJAX segítségével könnyedén lehet ilyen gazdag alkalmazásokat készíteni. 8

9 Megjegyzés: Azonban mint mindig, most is találhatunk más alternatívát, melynek segítségével hasonló eredményeket érhetünk el. Az egyik lehetséges alternatíva, amely ugyancsak a JavaScript technológiára támaszkodó megoldás: AHAH Asychronous HTML and HTTP. E technika lényege, hogy a XMLHTTPRequest objektum segítségével a szerver felé küldött kérésre nem XML adatstruktúrát, mint az AJAX esetében, hanem (X)HTML részleteket kapunk válaszként, melyek direkt módon beépülnek a weboldalba. A válaszként érkező adatok már formázottan jelennek meg, így teszik lehetővé a gyorsabb megjelenítést a böngészőkben. Ez azonban nem minden esetben alkalmazható. 8 Számos feladat során csupán kismennyiségű információ mozgatása szükséges a kliens és a szerver között. Ez lehetővé teszi az AJAX alkalmazások számára, hogy majdnem olyan gyorsan és pontosan reagáljanak, mint a natívan a felhasználó gépén futó alkalmazások. Ennek köszönhetően nem kell egész oldalakat újratölteni és újra megjeleníteni, elég csak kis részeit frissíteni. Minden felhasználói tevékenység, amely amúgy közvetlenül a szerver felé irányulna, a JavaScript közvetítésével inkább az AJAX motorhoz érkezik. Az AJAX kezeli le a kérést, majd dönt arról, milyen adatoknak az elküldésére van szükség. Így a választ igénylő tevékenység kérése most is eljut a szerverig, majd a feldolgozott adat vissza a felhasználóig, de nem kell az oldalt teljes egészében újra letöltenie minden részletével együtt, hanem csak azon belül a megváltozott tartalmat

10 1. ábra - Egy hagyományos és egy AJAX-os webalkalmazás összehasonlítása. [4] Ha a motornak a továbbiakban szüksége van valamire a szervertől ha adatot küld, fogad, vagy új felületet tölt be azt aszinkron módon, általában XML (Extensible Markup Language) használatával végzi. Az eredmény: sokkal kisebb reakcióidejű alkalmazás, kisebb szerver és kliens közötti mozgatott adatmennyiség, a szerver terheltségének csökkentése hiszen inkább a kliens dolgozik. Az interaktivitáson kívül további jelentős előny a gazdagabb grafikus felhasználói felületek lehetősége, és a gyakran frissíthető alkalmazások. 10

11 3.1. Használatának előnyei Az alábbiakban összefoglalva néhány fontos érvet szeretnék megemlíteni, miért is érdemes az AJAX technológiát alkalmazni. Böngészőfüggetlen: Minden modern böngészővel használható, mivel szabványos böngésző-szolgáltatásokon alapul. Valósidejű frissítés: Ellentétben a hagyományos webes szolgáltatásokkal, az AJAX használatával megoldható, hogy a lap egy részének tartalma frissüljön csak, amíg a többi része változatlan marad. Grafikus megjelenítés: Az AJAX segítségével az irodai alkalmazásokhoz nagyon hasonló felületet hozhatunk létre, sőt animációkkal színesíthetjük azt, így gazdagabb felhasználói élményt nyújthat. Szerver tehermentesítése: Mivel kisebb a szerver és kliens közötti mozgatott adatmennyiség, a szerver terheltsége csökken. Függvények gyűjteménye: Rendkívül sokszínű a paletta az ingyenesen hozzáférhető függvények gyűjteményéből, melyek leegyszerűsítik a fejlesztést Hátrányai Rengeteg hasznos tulajdonsága mellett, használatának van néhány hátulütője is. Korlátozott képességek: Jelen pillanatban a következő akadályokba ütközhet a fejlesztő munkája során, melyek lényeges korlátozó tényezők lehetnek: multimédiás képességek, helyi adattárolás, valósidejű grafikák, együttműködés a hardverrel, pl. webkamera. Ezek közül néhány problémára létezik alternatíva pl. Flash, de több közülük egyszerűen kizárja az AJAX használatát. Teljesítménybeli vonatkozások: A böngésző és a szerver közötti kommunikáció során gyakori adatmozgások miatt esetleg előfordulhat, hogy nem válaszol azonnal a rendszer a felhasználói eseményekre. A fejlesztők körében ismeretes néhány megoldás a teljesítmény optimalizációjára, pl. böngészőoldali cache-elés. Ezek sok esetben kielégítőek még a nagy tempót diktáló alkalmazások esetében is, de az igazán időkritikus alkalmazások esetében (pl. munkagépek vezérlése) még mindig nem használható. 11

12 Visszaélés veszélye: Mivel az AJAX program egy része JavaScript nyelven íródik, és azt a felhasználó böngészője dolgozza fel, így nem lehet kivédeni, hogy a felhasználó ne olvashasson bele a forráskódba. A felelőtlen programozás a visszájára fordíthatja az AJAX elveit. Internet hozzáférés szükségessége: Mint a legtöbb webes alkalmazás, így az AJAX alkalmazások sem érhetőek el internet hozzáférés nélkül. Második programnyelv: Sajnos az AJAX esetében nem elegendő csupán a szerveroldali nyelv ismerete, némi JavaScript tudás is szükségeltetik egy AJAX alkalmazás megírásához. 12

13 4. Az alapok bemutatása egy egyszerű példán keresztül. Tipikus jelenség, amikor egy weblapon keresőt használva nem mindig a kívánt eredményt kapjuk. Mennyivel egyszerűbb lenne, ha már a gépelésnél jelezné az alkalmazás, hogy milyen lehetséges találatokat kapnánk eredményül, ha lefuttatjuk a keresést. Sőt ne is küldjük el a szervernek magát a kulcsszót, hanem egyből a helyszínen ajánlja fel az alkalmazás a találatokat. Erre a problémára az AJAX lehet a gyógyír. A következő egyszerű példa azt mutatja be, hogyan tud egy weboldal kommunikálni a szerverrel anélkül, hogy az oldalt újratöltené. Név a dobozban E program lényege, hogy ha begépelünk valamit egy egyszerű szöveges beviteli mezőbe, már a kezdőbetű lenyomásánál az AJAX, a szerver oldalról letöltve az információkat, lehetőséget kínál fel, azaz már gépelés közben láthatjuk a keresés lehetséges eredményeit. Tehát az e betű lenyomásakor megjelenik az összes e betűvel kezdődő név. 2. ábra - A program megjelenése a böngészőben Először nézzük a HTML-t (index.html) 13

14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" " <html xmlns=" xml:lang="hu"> <head> <meta content="text/html; charset=iso " httpequiv="content-type" /> <script type="text/javascript" src="showhint.js"></script> </head> <body> <form> Name: <input type="text" id="txt1" onkeyup="showhint(this.value)"> </form> <p>suggestions: <span id="txthint"></span></p> </body> </html> A forrásból jól látható, hogyan is működik kis programunk. Ha a felhasználó begépel egy karaktert a szövegmezőbe, az onkeyup esemény hatására a showhint() függvény fog lefutni, paraméterül kapva a szövegmező aktuális értékét, vagyis a this.value az aktuális input elem (this) begépelt értékét (value). Azaz minden egyes bevitt betű után lefut a függvény, és a txthint azonosítóval ellátott szövegmezőben megjelenik a szervertől kapott válasz. Ezután nézzük a JavaScript-et (showhint.js) 14

15 // deklaráljuk az xmlhttp objektumot var xmlhttp // showhint függvény, amely paraméterül egy sztring-et kap function showhint(str) if (str.length==0) document.getelementbyid("txthint").innerhtml="" return xmlhttp=getxmlhttpobject() if (xmlhttp==null) alert ("A böngésző nem támogatja a HTTP kérést!") return var url="gethint.php" url=url+"?q="+str url=url+"&sid="+math.random() xmlhttp.onreadystatechange=statechanged xmlhttp.open("get",url,true) xmlhttp.send(null) Ha a beviteli mező üres (str.length==0), akkor nincs javaslat (innerhtml=""). Megjegyzés: ha ilyenkor a teljes listát kiadná, akkor a lényeg veszne el. Egy ilyen helyzetben pont az az AJAX megoldás előnye, hogy nem kell előre letölteni a több ezer választási lehetőséget egy select tagba, hanem minden esetben csak egy jóval szűkebb találati listát. Következő lépés az AJAX működés lelkét adó (példánkban xmlhttp) objektum létrehozása. (Mivel ez a lépés böngészőfüggő, később részletesen visszatérünk erre.) Ha létrejött a kommunikációs objektum, akkor az URL összeállítása következik: gethint.php?q=e&sid= A q paraméter hozzáadása az url-hez, a szövegmező értékével Egy véletlen szám (sid) hozzáadása az url-hez, elkerülve azt, hogy a szerver egy előző - lefutott - esemény eredményét adja vissza Az AJAX aszinkron működése azt jelenti, hogy a szerver felé küldött kérésre a JavaScript nem várja meg a választ, (de megvárhatná, viszont a felhasználói élmény miatt nem célszerű megvárnia) hanem a felhasználót hagyja tovább dolgozni (esetünkben gépelni). A kommuni- 15

16 kációs objektumunk számára tehát egy ún. callback (visszahívható) függvény nevét adja meg a következő sor: xmlhttp.onreadystatechange=statechanged Amikor a szervertől visszaérkezik a válasz, akkor a JavaScript kódunk erről úgy fog értesülni, hogy a statechanged függvény kapja meg a vezérlést. Másként fogalmazva: a statechanged függvényt kell képessé tennünk arra, hogy a visszaérkező választ feldolgozza. Az xmlhttp.open függvény a kérést írja le: GET metódussal szeretnénk a kérést küldeni az url számára, a true paraméter pedig az aszinkronitást írja elő. Megjegyzés: Aszinkronitás nélkül a böngésző lemerevedne a válasz megérkezéséig. Ez (különösen lassabb hálózati kapcsolat esetén) nem a felhasználói élményt növelné, hanem inkább korlátozná a munkát. Végül az xmlhttp.send függvény végzi a kérés tényleges elküldését. A statechanged() függvény többször is meghívódik a válasz teljes megérkezéséig, mindaddig, vagyis míg be nem fejeződik minden művelet (readystate==4), ezután az xmlhttp.responsetext változóban kapott értéket beírja a txthint azonosítóval ellátott szövegmezőbe. function xmltoarray(resultsxml) var resultsarray= new Array(); for(i=0;i<resultsxml.length;i++) resultsarray[i]=resultsxml.item(i).firstchild.data; return resultsarray; 16

17 function statechanged() if (xmlhttp.readystate == 4) if (xmlhttp.status == 200) try var response = xmlhttp.responsetext; if (response.indexof("errno") >= 0 response.indexof("error:") >= 0 response.length == 0) throw(response.length == 0? "Void server response." : response); response = xmlhttp.responsexml.documentelement; namearray = new Array(); if(response.childnodes.length) namearray = xmltoarray(response.getelementsbytagname("name")); for (var i=0; i<namearray.length; i++) document.getelementbyid("txthint").innerhtml += namearray[i] + " "; catch(e) document.getelementbyid("txthint").innerhtml="hiba: " + e.tostring(); else document.getelementbyid("txthint").innerhtml="hiba: " + xmlhttpgetsuggestions.statustext; 17

18 Megjegyzés: az xmlhttp.readystate lehetséges értékei: 0 UNINITIALIZED az open() függvény még nem került meghívásra 1 LOADING a send() függvény még nem került meghívásra 2 LOADED a send() függvény már meghívódott, a headers és a status értékei elérhetők 3 INTERACTIVE letöltés; a responsexml már tartalmazza a válasz egy részét 4 COMPLETE minden művelet befejeződött. Manapság a legnépszerűbb böngészők (Internet Explorer, Firefox, Opera, Safari, stb.) többnyire hasonló eredményességgel kezelik az (egyébként szabványban 9 rögzített) XMLHttpRequest objektumot. Azonban a 2001 előtti böngészőknél akadályba ütközhet a program futása közben. E probléma megoldására a GetXmlHttpObject() nevű függvényt hívjuk segítségül. function GetXmlHttpObject(handler) var objxmlhttp=null if (window.xmlhttprequest) objxmlhttp=new XMLHttpRequest() else if (window.activexobject) objxmlhttp=new ActiveXObject("Microsoft.XMLHTTP") else alert("hiba! Használjon újabb böngészőt!"); return objxmlhttp A függvény először a Mozilla alapú böngészőkön alkalmazható megoldással kezd, majd Windows ActiveX vezérlőt próbál létrehozni. A kódból az is következik, hogy az AJAX használatához a JavaScripten túl az Internet Explorer-ben az ActiveX engedélyezésére is szükség van a böngészőben. Ha az XMLHttpRequest() objektum létrehozására tett kísérletek egyike sem jár sikerrel, azaz sem a natív objektum, sem az ActiveX objektum használatával nem a kívánt eredményt kapjuk, hibaüzenetet küldünk a felhasználónak, amiben tudatjuk vele, hogy böngészőjét frissítenie kell az alkalmazás használatához

19 Most nézzük a szerver oldali programot (PHP-t), ami veszi a kérésünket, és visszaadja a lehetséges értékeket (gethint.php) <?php header('content-type: text/xml; charset=iso '); echo'<?xml version="1.0" encoding="iso " standalone="yes"?>'.'<response>'; // Feltöltünk egy tömböt nevekkel $a = array("anna","brittany","cinderella","diana","eva","fiona", "Gunda","Hege","Inga","Johanna","Kitty","Linda","Nina","Ophelia ","Petunia","Amanda","Raquel","Cindy","Doris","Eve","Evita","Su nniva","tove","unni","violet","liza","elizabeth","ellen","wench e","vicky"); // a q paraméter értékének kinyerése az URL-ből $q=$_get["q"]; /* eredmény keresése a tömbben, ha a q, azaz a kulcsszó hossza nagyobb mint 0 (q>0) */ if (strlen($q) > 0) for($i=0; $i<count($a); $i++) if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) echo"<name>$a[$i]</name>"; echo "</response>";?> 19

20 5. A kommunikáció adatformátuma [8,9] Egy AJAX alapú projekt tervezése közben felmerülhet a kérdés: milyen adatformátumot válasszunk, amiben utazzanak az adatok a kliens és a szerver között? Erre több alternatíva is létezik az XML-en kívül. Az alábbiakban megpróbálom bemutatni a legelterjedtebb megoldásokat (XML, XHTML, JSON). Mindegyik formátum másra lehet jó, máskor használható. A megfelelő formátum kiválasztásánál kulcsfontosságú, hogy az adott alkalmazás milyen típusú, illetve milyen adatok feldolgozására van szükség. Az üzenetváltások alapját képező XMLHttpRequest objektum a szervertől érkező választ alapvetően két formátumban kínálja fel: a responsetext változón keresztül, egyszerű karakterlánc formátumban, vagy a responsexml változón keresztül, W3C DOM objektum formájában. A következő példában egy katalógust fogok készíteni, amely kilistázza a zenei CD-k adatait a dal címe, előadója, album címe, CD borító képe, kiadója és a kiadás éve szerint XML Az AJAX fejlesztők többsége ezt a megoldást választja, azaz a szervertől érkező válasz XML formátumú dokumentum. Ez a legtermészetesebb választás, hiszen ez illeszkedik leginkább a AJAX eredeti koncepciójához. <?xml version="1.0" encoding="iso "?> <catalog> <cd> <title>little Maggie</title> <artist>bob Dylan</artist> <album>good as I been to You</album> <cover src="/cover/good_as_i_been_to_you.jpg" /> <company>columbia Records</company> <year>1992</year> </cd> <cd> <title>streets Of Philadelphia</title> <artist>bruce Springsteen</artist> <album>greatest hits</album> <cover src="/cover/greatest_hits.jpg" /> <company>columbia Records</company> <year>1995</year> </cd> 20

21 </catalog> Az alkalmazás feldolgozófüggvénye: function getnodevalue(obj,tag) return obj.getelementsbytagname(tag)[0].firstchild.nodevalue; function DataFromXML(req) var books = req.responsexml.getelementsbytagname('cd'); for (var i=0;i<catalog.length;i++) var my_div = document.createelement('div'); my_div.classname = 'cd'; var my_h3 = document.createelement('h3'); my_h3.appendchild(document.createtextnode(getnodevalue(catalog [i],'title'))); my_div.appendchild(my_h3); var my_p0 = document.createelement('p'); my_p0.classname = 'artist'; my_p0.appendchild(document.createtextnode('by ' + getnodevalue(catalog [i],'artist'))); my_div.appendchild(my_p0); var my_p1 = document.createelement('p'); my_p1.appendchild(document.createtextnode('album: ' + getnodevalue(catalog [i],'album'))); my_div.appendchild(my_p1); var my_img = document.createelement('img'); my_img.src = catalog[i].getelementsbytagname('cover')[0].getattribute('src') ; my_div.appendchild(my_img); var my_p2 = document.createelement('p'); my_p2.appendchild(document.createtextnode(getnodevalue(catalo g [i],'company'))); my_div.appendchild(my_p2); var my_p3 = document.createelement('p'); my_p2.appendchild(document.createtextnode('released: ' + getnodevalue(catalog [i],'year'))); my_div.appendchild(my_p3); document.getelementbyid('output').appendchild(my_div); Jól látható, hogy ez a megoldás nem túl elegáns, mert az XSLT (EXtensible Stylesheet Language Transformations) segítségével az XML-ben érkező adatokat azonnal XHTML részletekre konvertálhatjuk, de az egyszerűség kedvéért most ez a megoldás is megállja helyét, mivel tökéletesen működik. 21

22 Előnyök A legelőnyösebb tulajdonsága az XML-nek, hogy azt más emberek és gépek is könnyen tudják értelmezni, olvasni. Ma már a legtöbb szerver oldali nyelv képes XML kimenetet generálni. A másik nagy előnye, hogy ha egy szoftver fejlesztésén több egymástól független cég is dolgozik, akkor az adatcserét a szabványos XML nyelven intézhetik a modulok között, anélkül, hogy kiadnák egymásnak forráskódjaikat. Az XML válasz adatformátuma könnyen használható SOAP alapú web szerverek esetén is, így a szerver oldali kód ezen része újra felhasználható. Hátrányok Nagy bonyolultságú XML dokumentumoknál az adatokhoz való hozzáférés problémás lehet, és feldolgozása igen teljesítmény igényes XHTML Az XHTML válasz esetében nem másról van szó, minthogy a legkézenfekvőbb megoldást választva, egyszerűen XHTML adatot állítunk elő, így azt csak be kell illeszteni a megfelelő helyre. Az eredeti példa kicsit átalakítva: <div class="cd"> <h3>little Maggie</h3> <p class="artist">by Bob Dylan</p> <p>album: Good as I been to You</p> <img src="/cover/good_as_i_been_to_you.jpg" /> <p>columbia Records</p> <p>released: 1992</p> </div> <div class="cd"> <h3>streets Of Philadelphia</h3> <p class="artist">by Bruce Springsteen</p> <p>album: Greatest hits</p> <img src="/cover/greatest_hits.jpg" /> <p>columbia Records</p> <p>released: 1995</p> </div> Az adatokat ez esetben nem kell feldolgozni, mivel azok már a megfelelő formátumban érkeztek, így nincs más dolga a szkriptnek, minthogy egyszerűen beszúrja az eredményt a megfelelő helyre. document.getelementbyid('output').innerhtml = t.responsetext; 22

23 Előnyök A legnagyobb előnye ennek a megoldásnak a kliens oldali egyszerűségében rejlik. Hátrányok Komoly problémát okozhat, ha a válasz, formázási adatokkal és űrlapokkal tűzdelt részeket tartalmaz. Gyakran a hálózati forgalmat is terheli a felesleges formázási adatok feldolgozásával. A szerver oldalon is jelentős erőforrásokat igényelhet JSON A JSON (JavaScript Object Notation) egy alternatíva a sok közül, mely igen elterjedt manapság. Lényege, hogy a szerver olyan karaktersorozatot küld a válaszban, amely a kliens oldalon egyszerűen JavaScript objektummá alakítható. JavaScript oldalon az eval() függvénnyel valósítható meg, ami nem csak JSON adat feldolgozására alkalmas, a szerver oldalon pedig már egyre több nyelvhez készült olyan kiegészítés, mely segítségével az adott nyelv adatstruktúrái könnyen JSON karaktersorozatokká alakíthatók. Az eredeti minta XML átalakítva JSON karaktersorozattá: "catalog":[ "cd": "title" : "Little Maggie", "artist" : "Bob Dylan", "album" : "Good as I been to You", "cover" : "/cover/good_as_i_been_to_you.jpg", "company" : "Columbia Records", "year" : "1992", "cd": "title" : "Streets Of Philadelphia", "artist" : "Bruce Springsteen", "album" : "Greatest hits", "cover" : "/cover/greatest_hits.jpg", "company" : "Columbia Records", "year" : "1995" ] Az alkalmazás feldolgozófüggvénye: 23

24 Előnyök function DataFromJSON(req) var data = eval('(' + req.responsetext + ')'); for (var i=0;i<data.catalog.length;i++) var my_div = document.createelement('div'); my_div.classname = 'cd'; var my_h3 = document.createelement('h3'); my_h3.appendchild(document.createtextnode(getnodevalue(catalog [i],'title'))); my_div.appendchild(my_h3); var my_p0 = document.createelement('p'); my_p0.classname = 'artist'; my_p0.appendchild(document.createtextnode('by ' + getnodevalue(catalog [i],'artist'))); my_div.appendchild(my_p0); var my_p1 = document.createelement('p'); my_p1.appendchild(document.createtextnode('album: ' + getnodevalue(catalog [i],'album'))); my_div.appendchild(my_p1); var my_img = document.createelement('img'); my_img.src = catalog[i].getelementsbytagname('cover')[0].getattribute('src') ; my_div.appendchild(my_img); var my_p2 = document.createelement('p'); my_p2.appendchild(document.createtextnode(getnodevalue(catalo g [i],'company'))); my_div.appendchild(my_p2); var my_p3 = document.createelement('p'); my_p2.appendchild(document.createtextnode('released: ' + getnodevalue(catalog [i],'year'))); my_div.appendchild(my_p3); document.getelementbyid('output').appendchild(my_div); Az egyik nagy előnye az egyszerű és erőforrás-kímélő adatfeldolgozás. A másik, nem annyira az AJAX-hoz kötődő előnye, hogy míg JavaScript-ből nem lehet különböző szerverekről jövő adatokat elérni (pl. XML, HTML), addig minden gond nélkül be lehet JavaScriptek-et importálni bárhonnan. Ha tehát JSON formátumú adatot más szerverről importálunk, ahhoz azonnal hozzá is férhetünk. A JSON állományt, mint JavaScript-et pedig generálhatjuk akár dinamikusan is. Ezen felül számos nagy szolgáltató (pl.: Yahoo) biztosít ilyen adathozzáférést. Hátrányok A legnagyobb hátránya, hogy nehezen olvasható formátum. Azonban nagyon hasonló, mint a Python vagy a LISP nyelv. 24

25 Másik hátrányként szokták említeni, hogy nagyobb adat objektumok eval()-al történő kiértékelésekor a hibakezelésre jóval kevesebb lehetőség van, mint mondjuk az XML formátum esetén. Biztonsági szempontból fenntartásaink lehetnek a JSON-nal kapcsolatban. Ha más szerverről érkezik a feldolgozandó adat, ami JavaScript kódot tartalmaz, feltétel nélkül lefuttatva fennáll a veszélye, hogy veszélyes kódot kapunk. Ezért nem árt az eval() függvénnyel óvatosan bánni. 25

26 6. Fontosabb keretrendszerek és függvénytárak bemutatása 6.1. Keretrendszerek Az AJAX elterjedésének talán egyik legfontosabb mozgatórugója a mindenki által ingyenesen hozzáférhető előre elkészített függvények gyűjteménye. Ezeket az önmagukban közvetlenül nem használható, de bizonyos tipikus feladatok elvégzését nagymértékben segítő, egységes módon megszerkesztett "építőkockákat" (komponenseket) tartalmazó halmazt hívjuk közösen a program keretrendszerének. Kicsit leegyszerűsítve, a keretrendszer egy program támogatási struktúrája. A keretrendszerek lényege, hogy a különböző alkalmazásokban leggyakrabban használt elemeket egyetlen helyre gyűjtik össze, és készen kínálják a fejlesztők, valamint a programok számára. Használatának legnagyobb előnye, hogy a program futtatása során bárhonnét meghívható, újrafelhasználható kódrészletek rengeteg elvégzendő munkától mentesítik a programozót. [3] Prototype 10 Talán a legismertebb, és legetlerjedtebb AJAX keretrendszer a prototype. Szabványos, nagyon jól használható JavaScript rutingyűjtemény, melyenk segítségével a Web 2.0 jellemző interaktivitását tudjuk implementálni. A könyvtár rengeteg előre definiált objektumot és segédfüggvényt tartalmaz. Ezen függvények nyilvánvaló célja, hogy sok felesleges gépeléstől és munkától mentse meg a fejlesztőt. Népszerűségének köszönhetően egyfajta szabványos Web 2.0 eszközzé vált, melyre rengeteg kiegésző függvénytárat fejlesztenek Függvénytárak Hétről-hétre születnek újabbnál-újabb függvénytárak, melyek igen hasznosak lehetnek, de felsorolni őket szinte lehetetlenség. Általánosságban mindegyikről elmondható, hogy haszná

27 latukkal gyerekjáték dinamikus webalkalmazások készítése, és természetesen támogatják az AJAX kommunikációt (request-response). A legnépszerűbb, és széles körben alkalmazott függvénytárak: script.aculo.us 11 Könnyen használható (easy-to-use), böngészőfüggetlen (cross-browser) függvénytár, és animációs keretrendszer, mely a Prototype függvénytárra épül. Rico 12 Az animációs effektek széles választékát kínálja, mint például Drag&Drop, Pull down menu, áttűnések, cella-átméretezés. jquery 13 Gyors, tömör JavaScript függvény-gyűjtemény, amely leegyszerűsíti az események, animációk, és AJAX interakciók kezelését. Moo.fx 14 Nagyon kicsi, és nagyon hatékony. Könnyen használható és nagyon kevés programozást igényel. Használható a Prototype függvénytárral, vagy a Mootools keretrendszerrel is

28 7. AJAX megoldások bemutatása Számos kiváló példát találunk web alkalmazásokra: a levelező, fotó album, chat, űrlap ellenőrző, szerkesztőségi rendszereken kívül, léteznek webes ügyviteli és könyvelői rendszerek, s több próbálkozás is létezik a szokásos irodai alkalmazások, mint például a szövegszerkesztő, a táblázatkezelő webes implementálására is. A webfejlesztők körében ma már nem okoz meglepetést egy webes adatbáziskezelő program, a szerver adminisztrátorok pedig webes szerver karbantartó felületeket is ismerhetnek. AJAX technológiára épülő alkalmazások percről-percre születnek szerte a világban, így felsorolni őket lehetetlen, azonban van néhány gyűjtőoldal, ahol remek példákat találhatunk az AJAX kínálta lehetőségekre. Ezek egyszerre Web2-es alkalmazások is, hiszen e két fogalom összekapcsolódik. Az alábbiakban összegyűjtöttem néhány példát a teljesség igénye nélkül: - Go2Web20.net - The complete Web 2.0 directory - Ajax Patterns - Egyszerű demók gyűjteménye Az AJAX felhasználásával több óriásvállalat is készített projekteket, minek köszönhetően az AJAX gyorsabban beépült a köztudatba, és a böngésző fejlesztőit is arra sarkalják, hogy minél tökéletesebben kezelje a szoftver a szabványos technológiát. Az egyik legnagyobb és legismertebb felhasználója az új webfejlesztési technikának a Google. Elsők között látták meg a lehetőséget az AJAX-ban, így számos általuk kínált szolgáltatásban találhatjuk meg, melyek részben, vagy teljes egészében erre a technológiára épülő alkalmazások. Néhány példa közülük: Google Docs & Spreadsheets 28

29 Online szövegszerkesztő és táblázatkezelő exportálási lehetőséggel, nyelvi ellenőrzéssel és megosztható tartalom szolgáltatással. Az irodai alkalmazások minden tulajdonságát örökölte, sőt némely funkcióival felül is szárnyalta azokat. Google Calendar 29

30 Online eseménynaptár emlékeztetővel, amely akár mobiltelefonra küld üzenetet, hogy soha ne feledkezzünk meg semmiről. Naptárunkat megoszthajuk más felhasználókkal, vagy meghívhatunk ismerősöket egy adott eseményre. Google Maps 30

31 Az egész világról készített, állandóan frissített műholdképeket használó, online térképprogram. Google Mail (GMail) Gyors, ingyenesen használható postafiók. Spam szűrővel, és naponta gyarapodó tárhellyel. Belső chat lehetőséggel, címjegyzékkel, és egyéb hasznos extrákkal. 31

32 Google Suggest A keresést egyszerűsíti azzal a szolgáltatással, hogy miközben a felhasználó gépeli a kulcsszót a beviteli mezőbe, a Google azonnal ajánlásokat tesz a lehetséges találatokkal, mindezt valós időben. igoogle Mail Személyre szabható kezdőlap. Beállíthatjuk kedvenc RSS feed-jeinket, a város időjárását, 32

33 kiválaszthatjuk az oldal stílusát, ami napszak szerint változik, no és persze kereshetünk a világhálón. 33

34 8. Egy példaprogram fejlesztése A példaprogram fejlesztésénél az elsődleges célom az volt, hogy bemutassam az AJAX kínálta lehetőségeket. A fejlesztés során prototype keretrendszert, és script.aculo.us függvénytárat használtam, amelyek nagyon megkönnyítették a munkámat, illetve látványossá, és könnyen kezelhetővé tették a programot. A példaprogram egy interaktív határidőnaplót valósít meg, melybe bejegyzéseket írhatunk teendőinkről. Megszabhatjuk a határidőt, amikorra el kell készülnünk az adott munkával. Projektek tervezésénél nagyon hasznos segédeszköz lehet akár még kisebb vállalatok számára is. Előnye az egyszerűségben, és a könnyű kezelhetőségben rejlik. Kattintásokkal tudjuk vezérelni a programot, így tudunk különböző eseményeket előidézni, mint például az új teendő bejegyzése, törlése, vagy módosítása. A program számolja a hátralévő időt, amely igen hasznos tud lenni, mivel egy pillantást kell csak vetni az adott teendőre, és látjuk hány nap van még hátra. Ha a feladat nem készült el a megadott határidőre, azt eltérő színnel mutatja. Ha már elkészültünk egy munkával, azt egyetlen kattintással jelezhetjük a rendszernek, így az lezárja a feladatot, és egyértelmű befejezve felirattal mutatja nekünk. Tehát az egyszerű használat mellett, vizuális szempontból is előnyt jelent a hagyományos értelemben vett határidőnaplónál. A program mysql adatbázisban tárolja az adatokat, amelyet PHP szerver oldali nyelv használatával olvasok, illetve írok, objektum-orientáltan. A felhasználói műveletek során értesítést kapunk a böngésző jobb felső sarkában az AJAX kommunikációról, azaz az adatok elküldésétől, a válasz megérkezéséig eltelt idő alatt a betöltés felirat jelenik meg. A program egy felhasználóra lett tervezve. Ezért e feltétel teljesülését a valódi felhasználás során, a program köré épülő külső alkalmazásnak kell garantálnia. A példaprogram működését a legnépszerűbb böngészőkben teszteltem. Az előforduló hibákat menet közben javítottam. Így vált valóban cross-browser alkalmazássá, ami az AJAX egyik alaptétele. A példaprogram kliensoldali forráskódja (todo.js) az 1.mellékletben olvasható. A böngészőben való megjelenését a 3. ábra mutatja. 34

35 3. ábra Példaprogram Interaktív határidőnapló. 35

36 9. Összegzés A dolgozat célja az volt, hogy bemutassam a kibontakozóban lévő irányzatokat, a technikai fejlődés eredményeit, az új webfejlesztési technológiát. Ennek kapcsán részletes elemzésre került az AJAX technológia. Átfogó kutatásom eredményeképpen rávilágítottam az AJAX erősségeire, és gyenge pontjaira. Kiderült, hogy milyen tipikus feladatok elvégzésére használható nagy eredményességgel, és hogy melyek azok a területek, ahol egyelőre még nem alkalmazható. Az alapoktól kezdve lépésről lépésre építettem fel egy AJAX alkalmazást. Példák segítségével bemutattam a kliens-szerver kommunikáció leggyakrabban használt adatformátumait. Megvizsgáltam, melyik formátum, mely esetekben használható a legnagyobb hatásfokkal, és milyen helyzetekben kell kerülni alkalmazását. Szót ejtettem a legismertebb keretrendszerekről és függvénytárakról. Kutatásom során több rutingyűjteményt is górcső alá vettem, így sikerült kiszűrni a leghatékonyabb függvénytárakat, amelyek a legkevesebb programozást igénylik, és kellőképpen dokumentálva vannak. Ezen kívül egy egyszerűbb példaprogrammal illusztráltam az AJAX gyakorlati felhasználási lehetőségét. Az interaktív határidőnapló elkészítésénél törekedtem arra, hogy a későbbiekben tovább lehessen fejleszteni, így hasznos funkciókkal lehetne kiegészíteni, mint például a többfelhasználós projekt-tervezés, munkaórák számítása, emberi erőforrás kiosztása egy adott feladat elvégzéséhez. A dolgozat terjedelme ugyan nem engedte meg a technológia mélységekbe menő kifejtését, de sikerült az alapvető kérdések tisztázása. Az új webfejlesztési technológia megismertetése révén átfogó képet nyújtott a lehetőségekről a téma iránt érdeklődőknek, ami kiindulópontot jelenthet az AJAX jobb megismeréséhez. 36