Mojá prvá (možno) AJAX aplikácia

3.12.2006 10:56 | Přečteno: 1558× | net

Už zopár rokov tvorím internetové stránky, a zatiaľ mi to celkom ide. HTML, CSS sem-tam nejaký skriptík, PHP+Mysql, takých je vás tu určite viacej.

No práve teraz nastáva internetová revolúcia. AJAX, Web 2.0, a možno aj iné názvy hovoria o internetových aplikáciach novej generácie.

Zopár slov o AJAX
Doteraz sme poznali prehliadanie internetových stránok asi tak, že používateľ odošle požiadavku, server ju spracuje, pošle mu odpoveď. AJAX je z praktického hľadiska úplne to isté, ibaže AJAX nesťahuje celú stránku, ale iba to čo je potrebné. Viac o tom ako funguje AJAX si nájdete na wikipedii.

~

A ešte menšie upozornenie, práve s takýmito vecami začínam, a určite Vám bude pripadať, že riešim úplne základné a primitívne veci, ale ja to vidím inak.

Moja prvá AJAX aplikácia
Teraz k aktuálnemu problému. Dostal som za úlohu vytvoriť on-line chat, kde by používatelia istého fóra mohli online komunikovať. Vlastne to nebola tak celkom úloha pre mňa, ale mal som predstavu ako by to mohlo vyzerať. Upornenie skôr ako budete mať námietky: toto pravdepodobne nie je AJAX aplikácia. Ale vystihuje jej pointu. Čítajte ďalej.

Takže táto aplikácia mala spľňať tieto požiadavky: #Mala sa dať kedykoľvek zobraziť alebo skryť, na základe toho či ju používateľ chce používať #Mala zobrazovať aktuálny stav chatu bez potreby znovu načitávať celú stránku #Mala mať možnosť kedykoľvek prispieť do chatu, bez potreby znovu načitávať celú stránku

Najprv som si narvrhol okienko, s fixnou pozíciou vpravo hore. AFAIK position:fixed nefunguje v IE, takže to ešte bude treba ošetriť JavaScriptom (to som ešte neurobil). To okienko bolo tvorené jedným iframom a políčkom na odosielanie správy. Takže celá pointa je v tom iframe. iframe obsahuje súbor onlinechat.php ktorý obsahuje výpis z databázy. Je nastavený aby sa reloadoval každých 5 sekúnd. Takže tu už máme celkom funkčný online chat a požiadavka číslo 2 je splnená. Prezeráte si web, a niekde v rohu vidíte online chat. Myslím, že je to celkom praktické.

Potom niečo k tomu skrývaniu. Ono to bolo veľmi jednoduché, ale pre mňa to bolo hotové dobrodružstvo, keďže takéto niečo som robil prvýkrát. Hore nad iframe som ešte umiestnil tlačítko skryť, po kliknutí naňho JavaScript nastavil div-u s chatom display:none. A tiež ďalšiemu (ktorý obsahoval tlačítko zobraziť) s podobnými parametrami display:block. Po kliknutí na ono tlačítko zobraziť sa vykonala opačná akcia. Avšak ešte stále tu bol jeden problém, a to, že aj po skrytí sa ten chat znova a znova načítaval, aj keď to už nebolo potrebné. Tak som ešte k tým akciám pridal aby sa src toho iframe nastavilo na empty.html, a pri zobrazovaní na onlinechat.php. Takže skrývanie a zobrazovanie už fungovalo.

Ďalej trebalo vyriešiť odosielanie. Po vybavení formulára, sa metódou POST odoslali data do onlinechat.php s parametrom target nastavením na môj iframe. Na začiatku onlinechat.php bol ešte kód, ktorý v prípade, že sa nejaké dáta posielali uložil ich do databázy. Takže toto tiež fungovalo. Skvelé na tom bolo to, že odoslaný príspevok sa hneď zobrazil.

Teraz boli splnené všetky požiadavky, ktoré som si stanovil. Celé to fungovalo (aj to odosielanie) bez reloadovania stránky, ktorú práve prehliadame.

Kozmetické úpravy
Keďže to ťahanie z databázy nemalo žiadne špeciálne požiadavky na zoradenie, výsledok vyzeral tak, že najnovšie príspevky boli na konci. V prípade že by počet príspevkov presiahol celé okienko, čo bolo dosť pravdepodobné, tak by si to používateľ musel rolovať. Tomu som chcel zabrániť, tak som do stránky onlinechat.php pridal aby sa po natiahnutí stránky naskrolovala až na koniec.

Ďalším menším problémom bolo to, že po odoslaní text zostal vo formulári. To je dosť nepraktické, ak sa chystáme písať viac príspevkov za sebou. Po určitom čase experimentov som to vyriešil spôsobom, ktorý považujem za ideálny. Vytvoril som ďalšiu položku hidden, a nastavil, aby sa do databázy vkladal obsah tejto položky. Potom tesne pred spracovaním formulára sa obsah z textového poľa vložil do hidden poľa, a obsah textového poľa sa vynuloval. Možno si myslíte, že to ide aj jednoduchšie, ale asi tak o minútu zistíte, že nie.

Zopár nevyriešených problémov
Problém ktorý ma stále trápi, je použitie tohoto skriptu na hocijakej stránke. Je to podľa mňa príliš zložité, pretože treba vkladať kus kódu do head a tiež do tela. Ešte neviem čo s tým.

Záver
Takže toto bola moja prvá aplikácia s príchuťou AJAX, a ja sa púšťam do učenia, pretože chcem vytvoriť aj zopár skutočných AJAX aplikácii. Toto si idem v dohľadnej dobe kúpiť, no a snáď z toho niečo bude.

       

Komentáře

[Kníže Ignor]

Toho ajaxu tam ale moc není, skoro mi to připadá jako web 1.0 A nehraje za něj Grygera?

BTW teď jsem zjistil, že PS3 bude mít jenom 256 MB RAM, což je teda škoda, protože jinak bych si ho koupil jako další stolní PC

[Goffix]

Pravda je, ze tam opravdu neni ani spetka Ajaxu Ty defakto porad nacitas celou stranku (stranku v IFRAME).

Jo a k tem udajum ve formulari: Nebylo by jednodussi po odesalni formulare ty prvky proste smazat? Nez je presunovat do hidden prvku?

[zero0x]

uz som zistil ze po ajaxe tam nie je ani zavan :D ale sprava sa to podobne

minuta pravdepodobne nestacila :] ide o to, ze akcia onsubmit to vykona pred odoslanim formulara, tym padom by sa do db ulozili prazdne hodnoty. takze by to bolo onicom. nenasiel som taku akciu, ktora by to robilo tesne po odoslani.

[Goffix]

Podobne jo, ale takhle se to prave delalo drive, nez byl AJAX, protoze to jinak neslo...

FORM: Pravda, to jsem si neuvedomil... Normalne by se to delalo asi, ze by si ten formulat odeslal do nejakyho dalsiho neviditelnyho framu (napriklad) a ten by to po vykonani vymazal. Ale co takhle zkusit v tvem pripade nadefinovat tlacitku udalost onclick="form1.submit(); {A TED TO VYMAZAT}". To by mozna mohlo projit ne?

[disorder]

neviem ci spravne chapem o co tu ide (tvorba stranok nie je moje velke hobby), ale ja som vymazanie formulara vyriesil PHP presmerovanim (poslal som HTTP header) na povodnu stranku pokial su udaje spravne (a samozrejme ulozenie do DB). ak nie su spravne, tak som zobrazil formular znova - v nom som pomocou PHP nechavam odoslane hodnoty.

nikdy som nepouzival iframes, ale ak tomu dobre rozumiem, dalo by sa to na to tiez napasovat.

[Goffix]

Pokud jsem to já dobře pochopil, tak on ten formulář vůbec nerefreshuje a ani nechce (aby problikával) a proto ho musí nějakým způsobem mazat.

[zero0x]

ano, pochopil si to

ale ako citam, po zapojeni AJAXu nebude treba pouzivat ziadne iframe, pretoze ja tam vlastne vlozim obsah z toho suboru, prave o tom citam, je to fakt super! uz pripravujem novy zapis, ze co som sa naucil, takze tam snad bude aj ako som tuto situaciu vyriesil

[Goffix]

Puvodne jsem myslel, ze vis o cem je AJAX (kdyz jsi o tom v blogu zacal). Akorat, ze jsi to zatim splacal takhle. A ted pises, ze si ctes o cem to je . Nebud tak ukvapenej a priprav nam neco smysluplnyho a hezkyho .

[zero0x]

jj, suhlasim s tebou :) tento krat nad tym dlhsie posedim

[Jaris]

FSF :)

[zero0x]

lol neries

[cezz]

Skor by som pouzil niektoru s dostupnych AJAX JS kniznic.. (ak vyhovuje licencia)

[Daniel Kvasnička ml.]

S kanonem na vrabce Vzdyt je to par XmlHttpRequestu...

[Michal Vyskočil]

Což je v podstatě brilantní shrnutí Ajaxu a možná i Web 2.0 jako takového

[d.f.h]

AJAXu jo, ale "web 2.0" ne. web 2.0 je spíš o přístupu k uživateli, staví totiž uživatele webu na úroveň jeho tvůrce, minimálně co se obsahu týče. sociální sítě, určování kvality na základě kolektivního hodnocení, sdílení obsahu... a podobný hovadinky . pak už je sice jedno, jestli je to zjednodušeně řečeno "bez reloadu stránky" nebo s ním, ale je fakt, že tyhle nový weby jsou s AJAXem jedna ruka. nic proti, pokud to ušetří práci (uživatelům, ne programátorům) a zpříjemní ovládání.

ale jinak je to vcelku na nic a řekl bych, že se AJAX daleko víc hodí do všelijakejch intranetů a webovejch administračních rozhraní, ve kterejch člověk tráví celej den a každej reload se počítá. na nějakým blogu nepotřebuju live search, daleko víc ocením třeba kontrolu vstupních dat ve formuláři tzv. na pozadí ještě před odesláním a podobný věci.

[zero0x]

mne sa ale velmi paci myslienka napriklad pri vytvarani portalu - si zober take prihlasovanie: spaja to rychlost javascriptu a bezpecnost phpcka, prihlasis sa ovela rychlejsie.

jedna nevyhoda je podla mna ta, ze nie vsetci maju javascript povoleny, a niektori este stale pouzivaju napriklad textove prehliadace.

[d.f.h]

souhlas s druhým odstavcem. ovšem právě v případě interní firemní aplikace si člověk může dovolit napsat do uživatelský příručky: používejte normální prohlížeč (gecko-based, opera), povolte si cookies a javascript, jinak si neškrtnete. v případě nějakýho portálu si to moc představit nedokážu