AJAX 2 in 1: Interaktív oktatás és modern webtechnológia Nagy Zsolt Nyíregyházi Főiskola, Matematika és Informatika Intézet info@nagyzsolt.hu Absztrakt: Napjainkban, a WEB 2.0 korszakában különösen fontos, hogy webes alkalmazásaink valójában webes alkalmazások és ne weblapok legyenek. Jelen cikkünkben arról az Ajax-ról esik szó, mely forradalmasította a webes alkalmazások készítését, segítségével jobb, gyorsabb és felhasználóbarát Internetes tartalmakat hozhatunk létre. Kutatásunk során az Ajaxot az oktatás szolgálatára hívjuk segítségül. A technológia segítségével adaptív gyakorló tesztet hoztunk létre, mely azon túl, hogy valós időben kiértékeli a válaszokat, még arra is képes, hogy észrevétlenül átformálja a soron következő tesztkérdéseket annak függvényében, hogy a diák az egyes kérdéscsoportokra milyen arányban ad helyes vagy helytelen választ. Annak ellenére, hogy a téma a mesterséges intelligencia és az adatbányászat területét is érinti, sőt a valós idejű szemantikus válaszelemző értékelő módszer alapjaiba is belekóstolunk, mindenki megbizonyosodhat arról, hogy az Ajax kielégíti a legmegszállottabb WEB 2.0 rajongók elvárásait is, Önök is felfedezik a benne rejlő lehetőségeket és megértjük, miért használja az iwiw mellett a Google is előszeretettel ezt a technológiát. Kulcsszavak: ajax, oktatás, interaktív, programozás, web 1. Bevezető Az Ajax szó a legtöbb ember számára ismerősen cseng. A férfiak a szó hallatán egyből az Ajax Arsenal meccs eredménye iránt érdeklődnek, míg a nők arra kíváncsiak, hogy melyik bevásárlóközpontban lehet olcsón megkapni a 750ml-es kiszerelést. Jelen cikkben azonban arról az Ajax-ról esik szó, mely forradalmasította a webes alkalmazások készítését, segítségével jobb, gyorsabb és felhasználóbarát Internetes tartalmakat hozhatunk létre. 2. Mi az AJAX? Az AJAX nem egy új technológia, hanem több különböző, önállóan is remekül használható webtechnológia összessége. XHTML és CSS a szabványosított megjelenítésért Dinamikus megjelenítés, struktúraváltoztatás a DOM (Document Object Model) segítségével Adatmanipuláció, módosítás az XML segítségével. 1
XMLHttpRequest objektum az asszinkron adatkommunikációért - erre még visszatérünk, hisz ebben rejlik az AJAX lényege. És JavaScript a kliens oldali adatfeldolgozásért, valamint az előző technológiák összefogásáért. Így együtt igen erős csapatot alkotnak, innen a név Asynchronous JavaScript And XML 3. A kommunikáció A technológia lényege, hogy az AJAX az XMLHttpRequest JavaScript objektumot használva úgy tud adatot cserélni a webszerverrel, hogy az adott weboldal nem töltődik újra. Az Ajax asszinkron adatcserét hajt végre a böngésző és a webszerver között (HTTP request-ek segítségével), ezáltal elérve azt, hogy a teljes weblap letöltése helyett, annak csak bizonyos részinformációit frissíti.[1] Hogy is van ez? Egy klasszikus webes alkalmazás kommunikációja a következőképpen néz ki. 1. A felhasználó kattintgat a weblapon, kitölt egy űrlapot, majd megnyom egy gombot, vagy rákattint egy linkre. 2. A böngészője http request-ek segítségével információt küld a webszerverhez. 3. A webszerver dolgozik, (adatokat kér le, számol, authentikál, stb) majd visszaad egy új HTML lapot a kliensnek. 2
1. ábra A klasszikus és az Ajax webalkalmazás kommunikációja közötti különbség 4. Szinkron VS Asszinkron Mi a gond ezzel? - Megáll az oldal működése, amíg a webszerver felé a kérés le nem zárul. A felhasználó csak ül és várja, hogy megjelenjen a válasz, az új weblap vagy épp az eredmény. - A teljes oldal letöltődik (képek, stíluslap, HTML elemek), hiába annak csak egy része változott. - Ezáltal felesleges és szükségtelen adatforgalom generálódik, amely legfőbb következménye, hogy még tovább várakoztatjuk a felhasználót. Így aztán, kiderül, hogy hiába költöttünk százezreket marketing tanácsadásra ahol egyébként a legfőbb mondanivaló nem más, mint, hogy elkészült weblapunkat szerénytelenség nélkül inkább webes alkalmazásnak tituláljuk -, hisz nincs az a felhasználó, aki elhiszi ezt nekünk, miután perceket ült a monitor előtt, várva, hogy böngészője betöltse az épp aktuális oldalt. Itt lép képbe az AJAX, és a nevében hordozott asszinkron kommunikáció 3
Az asszinkronitás ebben az esetben arra utal, hogy az aktuális oldal megjelenítése és a háttérben, a szerverrel zajló kommunikáció egymástól független. Míg az AJAX a háttérben várakozik, hogy az adatok megérkezzenek a szervertől, addig a felhasználó nyugodtan tudja használni az épp aktuális oldalt. - Amint megérkeztek az adatok, az AJAX motor kipakolja a lapra úgy, hogy nem a teljes oldalt módosítja, hanem csak annak azon részeit, ami változott. - Ezáltal, mivel nem a teljes oldal adatai mozognak a böngésző és a webszerver között, hanem csak a változtatott adatok, így jóval gyorsabb a kommunikáció és ezáltal az új információk megjelenítése. - Ráadásul teszi mindezt az eddig megszokott frissítéses villanás nélkül, így a felhasználó észre sem veszi, hogy már új adatokat tartalmaz az általa megtekintett oldal. Ezáltal már hitelesen marketingelhetjük vadonatúj webes alkalmazásunkat, hisz mind a sebesség, mind az érzet tekintetében egy asztali alkalmazáshoz hasonlít, rendelkezve ugyanakkor a web minden jóságával. 2. ábra Szinkron és Asszinkron kommunikáció 4
5. Lépésről lépésre Nos, nézzük akkor lépésről lépésre, hogyan is lehet AJAX-szal felruházni weblapunkat, hogyan készíthetünk az oktatásban is igen hasznos alkalmazásokat AJAX és egy kis Mesterséges Intelligencia segítségével. Első lépés: Hozzunk létre egy XMLHttpRequest példányt. 3. ábra Az XMLHttpRequest példány létrehozása Ezzel meg is lennénk, igen ám, de sajnos nem egyszerű az élet. Mint ahogy azt már megszokhattuk az Internet Explorer másképp nevezi ezt az objektumot, mint a Mozilla termékek, ezért ezt nyomban le is kell kezelni.[2] 4. ábra A böngészőkompatibilitás lekezelése Második lépés: Várakozzunk a válaszra Erre szolgál az onreadystatechange attribútum, akkor fut le, ha az adatok megérkeztek 5. ábra Várakozás a szerver válaszára Harmadik lépés: Készítsük el magát a lekérést. Ehhez a még mindig igen csúnya nevű XMLHttpRequest objektum alábbi metódusai és attribútumait fogjuk felhasználni 5
Attribútumok readystate - a lekérési folyamat aktuális állapotát jelöli 4 értéket vehet fel 0 - még nem indult el a lekérés 1 a kapcsolat létrejött 2 - lekérés elküldve 3 - feldolgozás 4 kész status: a lekért oldal állapota 200 OK, 404 ha az oldal nem található mi most nem használjuk responsetext: a szervertől válaszul megkapott szöveg Nos számunkra nyilván akkor érdekes a dolog, ha már megjöttek az új adatok, azaz kész a lekérési folyamat, így az alábbi kódra van szükségünk Metódusok 6. ábra A lekérés eredményeképp megérkezett adatok kiiratása open(mode, url, boolean) Ezzel az a metódus, ami csatornát nyit a szerver felé, méghozzá az alábbi paraméterekkel. Teljesen hasonlóak mint egy egyszerű FORM esetében mode az adatátvitel módja GET vagy POST url annak a file-nak az url-je ami feldolgozza majd a kérésünket boolean true / false ez a kapcsoló jelzi, hogy asszinkron vagy szinkron módon kapcsolódjunk, természetesen mi asszinkron módon fogunk kapcsolódni hisz erről szól az egész cikk. 6
végül a send (string) amiben el is küldjük a paramétereket az url-ben megadott programnak. Ennek csak POST mód esetén van értelme, GET eseten null-ra kell állítanunk a string értéket 7. ábra A használt metódusok No akkor nézzük egybe hogyan is néz ki az AJAX motor. 6. Az AJAX és a Való Világ 8. ábra Az AjAX motor Az AJAX alkalmazások valóban működnek, éles környezetben is, mindenki találkozott már vele, ha máskor nem, Google keresések közben, ez a Google Suggest. A Google Suggest nem csinál mást, mint minden egyes karakter megadása után lefuttat a háttérben egy lekérdezést, ami visszaadja, hogy az adott részsztringre milyen találatok vannak. Mindezt természetesen AJAX-szal. De ami még fontosabb, saját magunk és könnyedén készíthetünk AJAX alkalmazást. 7
Saját AJAX: Az intelligens teszt Cikkünk során az Ajaxot az oktatás szolgálatára hívjuk segítségül. A technológia segítségével adaptív gyakorló tesztet hozunk létre (www.nagyzsolt.hu/ajax) [3], mely azon túl, hogy valós időben kiértékeli a válaszokat, még arra is képes, hogy észrevétlenül átformálja a soron következő tesztkérdéseket annak függvényében, hogy a diák az egyes kérdéscsoportokra milyen arányban ad helyes vagy helytelen választ. A rendszerünk képes különböző típusú kérdéseket kezelni, jelen példánkban teszt és esszé jellegű kérdéseket teszünk fel, sőt az esszé jellegű kérdéseket is két csoportra bontjuk aszerint, hogy tökéletes választ várunk, vagy alternatív válasz is elfogadható. Valós időben történő kiértékelés Az AJAX-nak hála abban a pillanatban, ahogy választ adott a hallgató a kérdésre, már meg is kapja a visszajelzést arról, helyes e a megoldás vagy sem. Az azonnali feldolgozás eredményeképp nagyszerűen alkalmazható az adaptivitás, azaz menet közben tudjuk változtatni a további kérdések számát, jellegét, mindezt a válaszok függvényében. Többek között ezért is kényelmes, könnyen kezelhető a rendszer, így jóval motiváltabb a hallgató és eredményesebb a teljes folyamat. Adaptív El is érkeztünk az egyik kulcskérdéshez. A felmérések számos válfajában kiemelten fontos az, hogy célzott kérdéseket tegyünk fel, legyen az gyakorló feladat, közvélemény kutatás, kompetencia vizsgálat, vagy épp pszichológiai, szociálpszichológiai kérdéssor. Alapvető igény, és elvárás az, hogy egyrészt egy-egy témakörben ha megfelelő mennyiségű és minőségű választ kaptunk, akkor ne zaklassuk tovább a diákot, hallgatót, hanem térjünk át a következő témára (ezt fogjuk bemutatni a feladatunkon) másrészt ha egymástól függenek bizonyos kérdéscsoportok, akkor csak és csak is azokat a kérdéseket tegyük fel amelyekre választ várunk. Például, ha 8
megkérdezzük a hallgatót arról, hogy otthon van e Internete és azt válaszolja, hogy nincs, akkor ne legyen az a következő kérdésünk, hogy És milyen Internete van?, hanem intelligens, automatizált módon hagyja ki a további ilyen jellegű kérdéseket. Most már ismerve az AJAX-ot ezt észrevétlenül meg tudjuk oldani. Intelligens Esszékiértékelés Míg a teszt jellegű kérdéseknél egy egyszerű egyenlőségvizsgálattal le tudjuk ellenőrizni a megoldás helyességét, az esszékérdéseknél sokkal nehezebb a dolgunk. Elemezni kell a feladatra adott választ, azt kiértékelni, és ha a megadott szabályoknak megfelelnek az értékelés eredményei, akkor tudjuk csak eldönteni hogy helyes e a válasz vagy épp nem. Ilyenformán ez a programrész már érinti az adatbányászat, szövegelemzés témakörét, sőt nyugodtan elmondhatjuk, hogy a mesterséges intelligencia is megcsillan megoldás folyamán. A feladatra adott választ és a megoldás tudásbázisát egyfajta kódolásra, és kisbetűs megjelenésre hozzuk az összehasonlíthatóság kedvéért Szétdaraboljuk szavakra a választ, megoldva és lekezelve a különböző elválasztó és írásjelek okozta problémákat A tudásbázisban lévő megoldáshalmazra illesztjük a kapott válasz egyes szavait, így megállapítható, hogy milyen mértékben adott helyes választ a kérdésre a diák. A szabályok alapján döntünk, hogy elfogadjuk e helyes megoldásnak az adott választ vagy sem. CheatBuster, a csodafegyver Nos, itt a cikk végére egy kis desszert. A hangzatos, kicsit szemtelen elnevezés nagy valószínűséggel a diákok rémálma, ugyanakkor a tanárok, oktatók kedvenc fegyvere a súgások ellen. Vége a Te, figy már, 6. feladatra melyik a jó válasz? A B. 9
Merthogy a csodafegyver bekapcsolásával minden diák más-más sorrendben látja az adott feladatra adható válaszokat. Azaz ha párhuzamosan töltik a tesztet, mindenkinek más-más betűjel mögött lesz a helyes válasz az adott kérdésre. Mondhatnánk, ezt már tudja azért pár kérdőívkitöltő. Igazuk is van. Igen ám, de nem elég, hogy a kezdetben legenerált tesztlap mindenkinek más-más sorrendben jelenik meg, a feladat megoldása közben is folyamatosan változik mind a már megoldott válaszok, mind a soron következő válaszok sorrendje. És az AJAX-nak hála a diák javarészt ezt észre sem veszi. Összegzés A cikkünkben említett technológia alkalmazása érdekes oktatásmódszertani kérdéseket feszeget, valóban hatékonyabbá és eredményesebbé válik e a feladatmegoldás, egy-egy teszt kitöltése, egy-egy felmérés végrehajtása. Már a Multimédia az oktatásban 2009-es konferencián is elhangzott, hogy további érdekes kutatási témák alapját szolgálhatja jelen publikáció, így a cikk olvasóját is bátorítom arra, hogy használja alapul a fenti sorokban megfogalmazott felvetéseket, a forradalmi webtechnológiát az interaktív oktatásban, oktatásmódszertani kutatásaiban. Irodalomjegyzék [1] Garrett, J, J (2005) : Ajax: A New Approach to Web Applications: http://www.adaptivepath.com [2] XMLHttpRequest Description basée sur la spécification du W3C avec un mode d'emploi: http://www.xul.fr [3] Nagy, Zs. (2009) : Ajax adaptív gyakorló teszt: http://www.nagyzsolt.hu/ajax 10