Portál AbcLinuxu, 21. května 2025 15:53
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.
Tiskni
Sdílej:
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 
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?
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?
. Nebud tak ukvapenej a priprav nam neco smysluplnyho a hezkyho .
3.12.2006 15:14
cezz | skóre: 24
| blog: dm6
3.12.2006 16:54
Daniel Kvasnička ml. | skóre: 52
| blog: The Joys and Sorrows of Being an IT Freak
| Ostrava
Vzdyt je to par XmlHttpRequestu...
. 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.
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.
3.12.2006 21:45
