AJAX, a webturbó szervizcsomag az Internethez Nem by zwj23860

VIEWS: 3 PAGES: 7

									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

								
To top