Asünkroonne Javascript ja XML (AJAX)
AJAX on defineeritud kui veebirakenduste loomine kasutades:
- XHTML ja CSS standarditel põhinevat esituskihti;
- esituskihti dünaamilisust ja interaktiivsust dokumendi objektmudeli (DOM) käitlemise vahendusel;
- andmete edastamist ja käitlemist XML ja XSLT keeltes;
- asünkroonset andmete pärimist XMLHttpRequest vahendusel;
- Javascripti kõige eelneva sidumiseks.
Selles aines võib põhjendatud juhtudel XML ja XSLT asemel kasutada JSON ja Javascript kombinatsiooni. XML ja XSLT eeliseks on väiksem koodimaht, paremini loetavam kood ning inimarusaadav kontrollitava (ja defineeritava) struktuuriga andmevahetusformaat. JSON ja Javascript kasutamine tähendab tavaliselt suuremat koodimahtu, keerukamat koodi ning keerukamat silumist (andmestruktuuri kehtivust ei saa kontrollida ja andmete tähendus ei pruugi olla arusaadav ilma abimaterjalideta). Samuti tuleb arvestada, et XML ja XSLT kombinatsiooni kasutatakse laialdaselt ka süsteemidevahelisest suhtluses, kuid JSON ja Javascript kombinatsioon on kasutuses peaaegu ainult veebis. Üldiselt on mõistlik kasutada XML ja XSLT kombinatsiooni kui:
- uuendate lehe alamosa (nt. uue artikli laadimine);
- päringu tulemusel muudate oluliselt veebilehe dokumendi objektmudelit (DOM);
- edastatavate andmete struktuur või maht on suur.
JSON ja Javascript kombinatsiooni on mõistlik kasutada kui:
- edastatavate andmete maht on väike (nt. enamik autocomplete/search suggestions tüüpi lahendused);
- edastatavate andmete struktuur on lihtne (nt. üks järjend, väikesed sarnased objektid);
- päringu tulemusel muudate väga väikest osa veebilehe dokumendi objektmudelist.
Oma projekti vikis tuleb kirjeldada kuidas te kasutate AJAX-t ja põhjendada oma andmete edastamise ja käitlemise viisi olete valikuid (on täiesti oodatav, et teie veebirakendus võib kasutada nii XML kui ka JSON lahendusi). Eksamil tuleb teil osata JSON ja XML dokumentide teisendamist üks-teiseks ning (X)HTML dokumendi objektmudeli loomist javascripti või XSLT-ga.
AJAX viidete all on selles aines lahendusi, mis võimaldavad kasutajal tagasi tulla AJAX-ga uuendatud lehele kasutades selleks veebilehitseja järjehoidjaid. Levinud võtted sellise lahenduse loomisel on nähtamatute iframe-de kasutamine, dokumendisisene viitamine (URI '#' taga olev osa) või HTML 5 vastava API kasutamine.
Veebilehtiseja edasi ja tagasi nuppude töös hoidmine võib vajada AJAX viidete korralikku teostamist. Edasi ja tagasi nuppude puhul tuleb arvestada sellega, et navigatsioon peaks jääma loogiliseks. Ehk siis, tagasi nupp peab ikka viima eelmisele lehele (sisu poolest) mitte näiteks tagasi võtma autocomplete soovituste näitamist.
Hindamine
AJAX kasutamine
- Praktikumijuhendaja teeb läbi projekti vikis võtte esitamise juures kirjeldatud sammud AJAX-ga teostatud funktsionaalsuse kasutamiseks ja kontrollib, et:
- rakendus teeb selle käigus XMLHTTPRequest päringu
- rakenduse tehtud XMLHTTPRequest päringu sisu on terviklik ja hästi-koostatud XML või JSON dokument (validaator) või puudub täielikult
- rakenduse tehtud XMLHTTPRequest päringu vastuse sisu on terviklik ja hästi-koostatud XML või JSON dokument (validaator) või puudub täielikult
AJAX järjehoidjate kasutamine
- Praktikumijuhendaja läheb projekti vikis võtte esitamise juures kirjeldatud AJAX-ga laetud sisuga lehele ja loob sellele lehele oma veebilehitsejas järjehoidja.
- Praktikumijuhendaja avab omaveebilehitsejas eelnevalt talletatud järjehoidja ja kontrollib, et kogu sisu (sh. varasemalt AJAX-ga laetud sisu) oleks laetud ja nähtav sarnaselt lehele, kus järjehoidja salvestati.
Viiteid
- AJAX - http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
- XMLHTTPRequest juhend (sh. koodinäited) raamatust "High Performance Browser Networking" - http://chimera.labs.oreilly.com/books/1230000000545/ch15.html#CORS
- dokumendisisene viitamine AJAX tarbeks - http://blog.onthewings.net/2009/04/08/deep-linking-for-ajax/
- HTML 5 AJAX viited - http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html
- Veel HTML 5 AJAX viited(ilma hashita) - http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/