Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem Ajax - Úvod

Viete, čo je to Ajax? Ak Vás toto slovo zaujalo, tak svoju úlohu splnilo. Zrejme jeho význam aspoň tušíte, takže viete, že v tomto seriáli sa budeme zaoberať rôznymi spôsobmi komunikácie klienta so serverom prostredníctvom JavaScriptu. Prvý článok je skôr taký oddychový - programovanie si necháme na tie ďalšie. Pohodlne sa usaďte a absolvujte základný úvod do tejto zaujímavej oblasti.

Pri webových aplikáciách sa občas stretávame s tým, že by sme potrebovali na strane klienta načítať zo servera ďalšie údaje. Pri klasickom použití modelu požiadavka-odpoveď protokolu HTTP musí používateľ odoslať formulár alebo navštíviť hypertextový odkaz, aby server mohol v odpovedi tieto údaje poskytnúť. Po prijatí odpovede sa načíta celá stránka a až potom sa dá v práci pokračovať. Keď však máme k dispozícii JavaScript, môžeme sa takémuto prerušeniu práce s webovou stránkou pomerne jednoducho vyhnúť. Ako? Odpoveďou je Ajax.

Čo je to vlastne Ajax?

Ajax je technika, ktorá sa používa v interaktívnych webových aplikáciách. Pri jej použití sa posielajú údaje medzi klientom a serverom tak, aby sa nemusela nahrávať stále odznova celá stránka. Ajax teda nie je žiadna konkrétna technológia alebo nejaká JavaScriptová knižnica.

Skratka Ajax znamená Asynchronous JavaScript and XML, čiže asynchrónny JavaScript a XML. Hoci názov tejto techniky v sebe skrýva slovíčko XML, nemusí sa pri prenose údajov XML vôbec použiť. Okrem XML môžeme prenášať čistý text, fragmenty HTML stránok, prípadne vykonateľný kód JavaScriptu. Ak chceme byť dôslední, musíme spomenúť, že prenos údajov nemusí byť dokonca ani asynchrónny. Väčšinou však asynchrónny je, pretože je zbytočné nechať používateľa čakať na dokončenie sťahovania údajov zo servera.

Kedy použiť Ajax?

Okrem klasických webových stránok zameraných na obsah sa môžeme stretnúť aj s webovými aplikáciami, ktoré už z princípu nemôžu fungovať bez JavaScriptu. Medzi také aplikácie môže napríklad patriť online chat, textový procesor, prípadne editor obrázkov alebo vizuálny editor, v ktorom môžeme presúvať objekty ťahaním myši. V takýchto prípadoch o použití Ajaxu nemusíme dlho rozmýšľať - keď potrebujeme nejaké údaje zo servera, jednoducho si ich vďaka JavaScriptu stiahneme.

Na bežných webových stránkach, ktoré majú fungovať aj bez zapnutého JavaScriptu, budeme rozmýšľať dlhšie. Jedinou prekážkou pre použitie Ajaxu je totiž vypnutý JavaScript. V takomto prípade treba pri návrhu stránok myslieť na Ajax od začiatku, ale implementovať ho až na konci. Aj tu platia všeobecne známe pravidlá použitia JavaScriptu na webových stránkach, podľa ktorých musí web v prvom rade fungovať aj s vypnutým JavaScriptom.

Použitie Ajaxu je výhodné napríklad vtedy, ak si používateľ nejakým spôsobom na webovej stránke vyberá z veľkého množstva dát, ktoré majú stromovú štruktúru. Typicky je to postupné nahrávanie (lazy loading) pri výbere z rozsiahleho stromu alebo menu, kedy sa postupne načítavajú jednotlivé uzly stromu až vtedy, keď je to potrebné. Do tejto kategórie použitia Ajaxu sa dá zaradiť aj načítanie obsahu prvku

select

podľa výberu v inom prvku

select

alebo načítanie obsahu adresárov pri ich prechádzaní.

Klasickým použitím techniky Ajax je automatické dopĺňanie textu, ktorý používateľ zadáva do nejakého poľa formulára. S takýmto dopĺňaním sa môžeme stretnúť vo vyhľadávačoch (napr. Google Suggest alebo na Seznam.cz). Ako si naprogramovať automatické dopĺňanie textu je napísané napríklad v článku na Intervale.

Ďalšie využitie Ajaxu je spríjemnenie používateľského rozhrania pri rôznych hlasovaniach či anketách, kedy používateľ môže zahlasovať bez toho, aby sa musela nahrávať celá stránka. V takýchto prípadoch stačí odoslať z klienta nejakú požiadavku a odpoveď servera nás nemusí ani zaujímať.

Podobne sa dá Ajax použiť aj pri validácii prvkov formulára. Použitie techniky Ajax pre validáciu formulára nemá výhody len v zníženom objeme prenesených údajov. Oveľa väčšou výhodou je, že funkcie, ktoré testujú správnosť vstupov, stačí napísať len raz na strane servera.

Problémy Ajaxu

Webové aplikácie využívajúce Ajax sa chovajú inak, než je na webe zvykom, z čoho pramenia rôzne problémy. Postupné načítavanie a zmena obsahu stránky pomocou JavaScriptu má za nasledok to, že adresa stránky zostáva rovnaká. Návštevníci stránok tak nemôžu jednoducho skopírovať odkaz, ktorého navštívením by sa vrátili k rovnakému obsahu. Nemôžu si teda odkaz zaradiť medzi obľúbené záložky alebo poslať svojmu známemu. Keď sa nemení adresa stránky, nevytvára sa ani história v pamäti prehliadača, s čím súvisí nefunkčné tlačidlo Späť. Obidva tieto problémy sa dajú s väčšou či menšou námahou vyriešiť, aj keď riešenia nemusia byť ideálne.

S nemeniacou sa adresou nemajú problémy len ľudia, ale aj stroje - vyhľadávače. Ak sa obsah mení JavaScriptom, robot sa k takémuto obsahu nedostane. Zaindexuje len prvú stránku, ktorú mu server poskytne. Pri niektorých aplikáciách to nemusí vôbec vadiť, väčšinou však ide o pomerne veľký problém - nezaindexovaná stránka akoby neexistovala. Aj to je dôvod, prečo písať stránky s Ajaxom tak, aby fungovali aj bez JavaScriptu.

Medzi menej spomínané problémy patrí neuvoľňovanie pamäte pri programovaní v JavaScripte. Pri jednoduchom použití JavaScriptu to ani tak neprekáža. Pri intenzívnom a dlhodobom použití typickom pre Ajax aplikácie sa však v dôsledku neuvoľňovania pamäte počítač postupne spomaľuje, pričom po niekoľkých hodinách pomôže už len reštart prehliadača. Tento problém sa prejavuje najmä v prehliadači Internet Explorer verzie 6 a nižšie. Dodržiavaním jednoduchých zásad pri programovaní v JavaScripte sa však tomuto problému dokážeme vyhnúť.

Využívanie Ajaxu vo všeobecnosti znamená častejšiu komunikáciu medzi klientom a serverom, pričom odpovede servera na požiadavky klienta sú pomerne krátke. Pokiaľ je aplikácia využívajúca Ajax nesprávne navrhnutá, môže to znamenať také zvýšenie záťaže servera, ktoré ho položí na lopatky. Treba navrhovať Ajax aplikáciu a nie premyslený DDoS útok na vlastný server.

Spôsoby komunikácie

Pri Ajaxe sa najčastejšie spomína objekt

XMLHttpRequest

, ktorý umožňuje odoslanie požiadavky a prijatie odpovede. Okrem použitia tohto objektu však existuje ešte niekoľko ďalších spôsobov, ako sa dajú preniesť údaje medzi klientom a serverom. Každý z nich má svoje výhody a nevýhody.

Výhodou objektu

XMLHttpRequest

je to, že na komunikáciu klienta so serverom je priamo navrhnutý. Umožňuje odosielať HTTP požiadavky rôznymi metódami, teda aj metódou GET a POST. Údaje môžu byť prenášané ako čistý text alebo ako štruktúrovaný dokument XML. Naopak, nevýhodou je použitie ActiveX v prehliadačoch Internet Explorer až do verzie 6 (vrátane).

Prakticky ekvivalentnou alternatívou k objektu

XMLHttpRequest

je použitie prvku

iframe

na prenos údajov. Prvok

iframe

nepotrebuje ActiveX a funguje aj v starších prehliadačoch, ktoré ešte objekt

XMLHttpRequest

nemusia poznať. Umožňuje odosielať požiadavky metódami GET a POST. Odpoveďou nemôže byť síce priamo XML dokument, ale čistý text alebo HTML dokument áno.

Pri komunikácii so serverom je možné používať aj dynamicky vkladaný element

script

. Táto možnosť tiež funguje aj v starších prehliadačoch. Požiadavky sú odosielané metódou GET, preto je výhodné tento spôsob použiť vtedy, ak odosielame na server málo parametrov, ale odpoveď servera je dlhá. Prenášané údaje sú v tomto prípade zapísané v JavaScripte, čo prakticky znamená, že server môže vygenerovať funkcie, ktoré môžu vykonať ľubovoľnú akciu.

Existujú ešte ďalšie menej používané spôsoby prenosu údajov. Jedným z nich je dynamické vytvorenie obrázku, pomocou ktorého môžeme vytvoriť požiadavku typu GET na server. Odpoveď servera môže byť v takomto prípade vyjadrená rozmermi obrázku, prípadne poslaná formou cookie.

Záver

V prvom článku tohto seriálu sme sa oboznámili s technikou Ajax. Povedali sme si, čo je Ajax, kedy sa dá s výhodou použiť, ale aj to, aké problémy môže použitie tejto techniky priniesť. Medzi najčastejšie spomínané problémy patrí nefunkčnosť tlačidla späť a nemožnosť použitia adresy stránky v prehliadači tak, aby sme sa po jej navštívení dostali do rovnakého stavu. Niekoľko ukážok existujúcich aplikácii používajúcich Ajax Vám malo ukázať, čo všetko je možné pomocou tejto techniky dosiahnuť.

Nakoniec sme vymenovali viacero alternatív, ako sa dajú prenášať údaje medzi klientom a serverom. Na komunikáciu môžeme použiť objekt

XMLHttpRequest

, vložený rámec, dynamicky vytváraný element

script

alebo využiť správanie objektu

Image

. V ďalšom článku sa podrobne oboznámime s prvou možnosťou - objektom

XMLHttpRequest

.

Předmět Autor Datum
Hurá :)) Ryhle dál, dál.... Tady je ukázka k tématu: javascript-rpc Editor obrázků je skvělý. Jen…
Flash_Gordon 23.10.2006 21:45
Flash_Gordon
zacat hned s ajaxom sa mi zda dost nestastne. napr ja som o ajaxovi doteraz vobec nic nevedel;o). as…
fleg 24.10.2006 18:57
fleg
ak by sa to malo tykat webu, tak php ako frontend urcite nie ako prve. cize ja by som zacal html, xh…
IgorK 24.10.2006 19:11
IgorK
html sa mi zda tak primitivne ze to zvladne aj clovek s odporom ku programovaniu ako som napr ja;o).…
fleg 24.10.2006 19:15
fleg
html len zaklad, aby sa mohlo plynule prejst do xhtml. niektori k programovaniu odpor nemaju a preds…
IgorK 24.10.2006 19:22
IgorK
nechcem sa dotknut html ale u mna html nie je programovaci jazyk ale zbierka tagov ktoru snad musi p…
fleg 24.10.2006 19:25
fleg
ale vsak xhtml vychadza z html a xml.
IgorK 24.10.2006 19:26
IgorK
Proboha chlapi to toho máte na webu málo, seriálů o HTML, XHTML jsou všude tři prdele, píše o tom kd…
Hans 25.10.2006 13:15
Hans
mne to hovorit nemusis, ja vzdy vychadzam z manualov. :-)
IgorK 25.10.2006 14:43
IgorK
Přesně. Myslím si, že na Poradně by měly vycházet hlavně články na témata, o kterých se moc nemluví.…
Vladimir 25.10.2006 17:09
Vladimir
super, tesim se na pokracovani! :-) sice se mi to trosku blbe cte (ve slovenstine), ale to se poda..…
angel333 26.10.2006 09:21
angel333
:-? Dúfam že tie príklady na strane servera nebudú v spiatočníckom PHP, ale nejakom plnohodnotnom pr…
Zp 26.10.2006 10:35
Zp
Když nerozumíš PHP tak jej neshazuj. PHP je výborná alternativa pro začátečníky i pokročilé. PHP je…
Flash_Gordon 26.10.2006 17:48
Flash_Gordon
Z čeho soudíš že předřečník nerozumí PHP? Prokázal někde nějakou neznalost? PHP je výborná alternat…
Vladimir 26.10.2006 18:35
Vladimir
]:( // Dneska mě nasralo už dost lidí. Vypínám PC.
Flash_Gordon 26.10.2006 18:45
Flash_Gordon
Príklady na strane servera budú v jazyku PHP, ktorý pozná asi najviac ľudí. Predpokladám, že program… poslední
los 29.10.2006 14:29
los

Hurá :)) Ryhle dál, dál....

Tady je ukázka k tématu:

javascript-rpc

Editor obrázků je skvělý. Jen škoda, že vnitřně funguje tak, že když cokoliv uživatel změní v nabídce "Adjust"
tak se to provádí na straně serveru. Respektive jsou odeslány parametry za pomocí JS, které si uživatel vybere v "pěkném" menu a tyto odchycené udáje i s obrázkem jsou přeneseny na server, který je zpracuje a teprve pošle... JavaScript sice není ani zdaleka všemohoucí, ale je to dobrá ukázka jak skvěle dokáže komunikovat se server-side skripty.

To píšu jen pro doplnění, aby si třeba někdo nemyslel, že všechno do posledního puntíku dokáže samotný JS :))
V některých ukázkách toho dělají nejvíce naopak ty server-side skripty.

S podporou v prohlížečích na tom JavaScript není relativně vůbec zle. V porovnání s jinými "klient-side" technologiemi jako namátkou ActiveX (IE only) nebo FlashAnimace (třeba ve Firefoxu nutná extenze).
Dokonce si myslím, že JS je suveréně nejspolehlivější z klientských "udělátek", které má tvůrce webu k dispozici.

Nakonec JavaScripty dokáží dnes interpretovat bez jakékoliv extenze i prohlížeče kapesních zařízení typu PDA nebo MDA a to už je něco.

zacat hned s ajaxom sa mi zda dost nestastne. napr ja som o ajaxovi doteraz vobec nic nevedel;o). aspon som sa nieco nove docital.
co tak skor phpserial pre zaciatocnikov? ja budem prvy co to bude citat slubujem;o)
neskor nastupi kombinacia css + js a potom mozme zacat preberat ajaxa a spol.
a hlavne by som bol rad keby sa uvadzalo co najviac praktickych prikladov s pripadnymi ulohami pre citatelov.

Proboha chlapi to toho máte na webu málo, seriálů o HTML, XHTML jsou všude tři prdele, píše o tom kdekdo (a podle toho i kvalita vypadá :-p) ale psát zase další znovu od začátku považuji za nesmysl. Chce to jen trochu hledat. Seriálů o PHP tolik není ale i tak se dají vybrat docela kvalitní. Dejte-si ale vyhledat AJAX - téměř ticho po pěšině, jen pár článků. Jsem velmi vděčný za tento seriál i když jsem před pár týdny koupil knížku a zkouším pár věcí z ní.

základy, HTML, XHTML, CSS, JavaScript, starší ale velmi dobré stránky
www.jakpsatweb.cz s dost dobrou diskuzí - diskuse.jakpsatweb.cz

velmi dobrý seriál o PHP
php

a další o MySQL
article.php

zde zmiňovaná kniha
http://zonerpress.cz/inshop/scripts/shop.aspx?actio n=DoViewProductDetail&ItemIdx=0&ProductID=50

:-? Dúfam že tie príklady na strane servera nebudú v spiatočníckom PHP, ale nejakom plnohodnotnom programovacom jazyku typu Java, C# atd. Pretože čítať ohavný PHP zdroják v ktorom je na každom kroku milión symbolov ako "$" a názvy funkcií majú nekonzistentné poradie parametrov je sadomasochizmus.

Když nerozumíš PHP tak jej neshazuj. PHP je výborná alternativa pro začátečníky i pokročilé.
PHP je určeno primárně pro rychlou a efektivní tvorbu dynamckých stránek zpracovávaných na straně serveru.
Nebudu lhat, že když přemýšlím nad JS a zároveň nad PHP tak nejednou zakleji nad znakem $, ale dokážu se nad to povznést.
Já se řídím tím, že když něčemu nerozumím tak to nekritizuji.
S tímto postojem bychom skončili někde tady: http://www.tvorba-webu.cz/javascript/javascript_je_ na_hovno.php
S opačným můžeme skončit tady: www.poradna.net , http://open.snipshot.com/import?url=http%3A%2F%2Fsn ipshot.com%2F139%2Fstatic%2Fsamples%2F1_sample.jpg

Z čeho soudíš že předřečník nerozumí PHP? Prokázal někde nějakou neznalost?

PHP je výborná alternativa pro začátečníky i pokročilé.

OK, PHP je nesporně jak pro začítečníky tak pokročilé, ale alternativa? Alternativa k čemu propooh? :))

PHP je určeno primárně pro rychlou a efektivní tvorbu dynamckých stránek zpracovávaných na straně serveru.

To že je něco rychle a "efektivně" (další pěkný buzzword typu "alternativa pro") tvořené nemusí být vždy výhoda. Rychle a "efektivně" není problém něco udělat ve Visual Basicu. Ale bude aplikace výkonnější než to samé v C++ ? Asi těžko.

V mé představě je PHP jen skriptovací jazyk, něco jako původní ASPčkový Vbscript a zůstane jím, myslím že poznámka o "zpátečnictví" je opodstatněná. ALe u článku o AJAXu je snad jedno v čem budou příklady na straně serveru...

Zpět na články Přidat komentář k článku Nahoru