AJAX fyrir byrjendur

(Greinin birtist einnig á vefnum mínum, http://haukur.hot.is/pages/65)


Nei, við erum ekki að fjalla um rúðu-úða eða önnur hreinsiefni!

Í þessari grein ætla ég að fjalla aðeins um eitt af nýju “buzz”-orðunum í bransanum í dag, nefnilega AJAX.

AJAX stendur fyrir Asynchronous Javascript And XML eða “Ósamstillt Javascript og XML”.

Það sem þetta þýðir í raun, er að nota Javascript inn í vafranum til að gera HTTP köll, hvort sem það er GET eða POST, á bakvið tjöldin ef svo má segja, þ.e án þess að endurhlaða síðunni sjálfri sem maður er staddur á. Margir hafa eflaust séð Google Suggest og Google Maps, og séð hvernig Google birtir orðalista jafnóðum og maður skrifar, og hvernig maður getur skoðað kort af allri jörðinni án þess að síðan endurhlaðist til að sækja gögnin. Ónei!, þeir hlaða ekki öllum gögnum upp í byrjun, það gefur augaleið að það myndi aldrei ganga upp. Það sem þeir gera í staðinn er að nota AJAX til að sækja gögnin á bakvið tjöldin, jafnóðum og beðið er um þau.

Margir halda að AJAX sé voða nýtt fyrirbæri, en það er það ekki. Nafnið er ef til vill nýtt, en þessi aðferð er a.m.k 4-5 ára gömul. Þetta var t.d hægt að gera í IE 5.5 ef ekki 5.0.

Nú er svo komið að allir “betri” vafrar í dag styðja þetta og þannig séð því ekkert því til fyrirstöðu að hoppa um borð í lestina og taka þátt í þessu nýjasta æði :)

Þó að þetta heiti Asynchronous Javascript And XML, þá kemur XML í raun og veru hvergi nærri þessu - nema maður vilji það sérstaklega.

Í þessum tutorial ætla ég alveg að sleppa því að vinna með XML skjöl, því þá þurfa menn að vera nokkuð vel að sér í því hvernig XML skjöl eru pörsuð og gögn sótt úr þeim, t.d með XPATH fyrirspurnamálinu. Það er hreinlega efni í aðra grein og bíður betri tíma.

Þess í stað ætla ég bara að vinna með texta og HTML.

Ég ætla að sýna á einfaldan hátt hvernig hægt er að búa til einfalda vefsíðu sem notar AJAX til að gera HTTP köll á server-side script til að sækja innihald síðunnar, og nota svo javascript til að taka gögnin úr kallinu og birta í DIV á síðunni. Þannig erum við kominn með einfaldan vef sem í rauninni hleðst bara upp einu sinni - þegar flakkað er á milli síðna innan hans, þá er síðunni ekki endurhlaðið - AJAX sér til þess.

Til þess að auðvelda okkur “AJAX-ið” skellti ég saman klasa í javascript til að vinna með það.
Þessi klasi er einfaldur, hann býr til XMLHTTP hlutinn sem við notum, og gerir manni svo kleift að kalla á vefslóð, með GET eða POST eftir því sem við á og skilar gögnum til baka.

Hér má sækja/skoða þenna klasa: http://haukur.hot.is/ajax_tutorial/SimpleAJAX.js

Þessi klasi er í raun endurnýtanleg forrits-eining sem hægt er að nota aftur og aftur. Öllum er heimilt að nota hann í sínum AJAX-pælingum til að auðvelda sér hlutina.

Ég ætla ekki að lýsa þessum klasa í fleiri orðum hér, hann er ágætlega kommentaður og ætti það að duga þeim sem eru forvitnir.

Þessi tutorial samanstendur semsagt af 3 skrám:

1. daemi1.html - Þetta er vefsíðan sjálf. Inniheldur auðvitað ósköp venjulegt HTML, skilgreinir efnissvæðið og tengla til að flakka á milli síðna. Notar AJAX klasann minn.

2. SimpleAJAX.js - Þarna er AJAX klasinn útfærður og inniheldur þessi skrá því í raun alla AJAX-virkni.

3. get_page.php - Þetta skjal skilar efni síðunnar sem beðið er um.

Skoðum nú innihald þessara skráa.

1. daemi1.html


Þarna er nú kannski fátt sem kemur á óvart.


Þarna erum við einfaldlega að taka fram að við ætlum að nota AJAX klasann sem skilgreindur er í SimpleAJAX.js


Þarna skilgreinum við fallið load_page sem við notum til að flakka á milli síðna. Fallið tekur inn einn parameter og það er auðkenni síðunnar sem við ætlum að opna. Því næst er búið til tilvik af SimpleAJAX klasanum og slóðin á PHP skjalið sett inn, með id query-string breytunni.
Svo er kallað á get() fallið í klasanum. Það skilar true ef kallið tókst, annars false. Ef útkoman er true, þá er haldið áfram og við “krækjum” í DIV-tagið sem við ætlum að nota til að birta efni síðunnar. Svo er efnið einfaldlega sett inn í DIV-ið með getResponse() fallinu sem er á AJAX klasanum.
Ef get() skilar false, þá birtum við villuna sem upp kom í alert-boxi.


Þetta skilja nú allir, þegar síðan hleðst inn í byrjun þá sækjum við efnið af fyrstu síðunni.

Næst eru það tenglarnir sem hlaða inn síðunum:


Takið eftir að þarna er einfaldlega kallað í load_page() fallið með auðkenni viðkomandi síðu.


Ég held að ég þurfi ekkert að lýsa innihaldinu í SimpleAJAX.js eða get_page.php sérstaklega.
Innihaldið í þeim er hægt að skoða hér:
http://haukur.hot.is/ajax_tutorial/SimpleAJAX.js
og
http://haukur.hot.is/ajax_tutorial/get_page.txt

Þetta má svo sjá virka í allri sinni dýrð hér:
http://haukur.hot.is/ajax_tutorial/daemi1.html

Er þetta ekki bara nokkuð flott? :)

Möguleikarnir eru endalausir. Þetta er alveg eins hægt að nota til að vista gögn í gagnagrunn. Einnig væri t.d hægt að gera e-mail form sem notar AJAX til að senda póstinn, án þess að submitta forminu og endurhlaða síðunni.

Þetta gerir manni í raun og veru kleift að smíða vefkerfi sem hegða sér líkt og alvöru gluggakerfi. Sífellt reload er ekki lengur nauðsynlegt með tilheyrandi óþægindum fyrir notandann og missi á stöðu síðunnar svo eitthvað sé nefnt.

AJAX getur verið afskaplega nytsamlegt í ákveðnum tilfellum, en það hefur auðvitað ókosti. Helsti ókosturinn er hvað varðar aðgengi. Með því að nota AJAX, þá er maður að útiloka notendur sem eru með vafra sem ekki styður javascript. Maður er að útiloka notendur skjálesara og annara slíkra apparata. Vefir byggðir á AJAX eru ekki heldur sérstaklega leitarvélavænir!

Google gæti t.d ekki indexað þessa síðu - hún fengi ekkert efni og gæti ekki flett á milli síðna.

Jæja, ég læt þetta duga og vona að þetta komi einhverjum að notum.

Ef þið hafið einhverjar spurningar, t.d nánari útfærslur, eða hvernig er hægt að nota þetta í samblandi við XML eða bara hvað sem er …. spyrjið þá bara hér.

Kv,
Haukur H. Þórsson (hagur).