Internetové turbo AJAX
Service pack pro internet - Už žádné nekonečné čekání na načtení stránky. Objevila se nová technologie, pomocí níž je surfování na internetu rychlejší a pohodlnější. Využít ji může na svých internetových stránkách každý.
Text: Valentin Pletzer
Jsou internetové stránky, u kterých vám nepomůže ani čtyřmegové ADSL, takže si po každém kliknutí na nějaký odkaz můžete jít uvařit další kávu. Okno prohlížeče zůstává nadlouho bílé. Než se konečně načte další stránka, která obsahuje obrázky, grafiku, texty a animace, uběhnou i desítky sekund.
Naštěstí je tu AJAX. Za názvem připomínajícím čisticí prostředek se ukrývá nová programovací technika, která zabraňuje zdlouhavému čekání. Objevuje se na čím dál tím větším počtu stránek. U velkých hráčů, jako je Google Maps či Microsoft Live.com, nebo třeba u internetových fotoalb Flickr provozovaných portálem Yahoo je už samozřejmostí.
Podívejme se například na Google Maps (http://maps.google.com). Pokud chce uživatel změnit pozici na mapě, musí na jiných stránkách obvykle kliknout na odkaz vedle mapy a pak čekat, až se stáhnou obrázky pro nový výřez mapy. U Googlu, který využívá AJAX, to funguje jinak. Mapu můžete uchopit ukazatelem myši a jednoduše posouvat sem a tam. Není to žádné kouzlo, ani to není bůhvíjak náročné. AJAX totiž nestahuje na pozadí žádný zbytečný grafický balast, ale jenom požadované výřezy mapy, které se zobrazují, jakmile jsou kompletně stažené. To je nejen pohodlnější, ale i rychlejší, protože je pro přenos dat zapotřebí menší šířka pásma.
Zní to jako drahý high-tech, ale opak je pravda. AJAX není vyhrazen pouze exkluzivnímu klubu velkých hráčů typu Googlu. Používat ho může každý. My vám ukážeme, jak můžete tuto novou technologii jednoduše integrovat do vlastních internetových stránek.
AJAX totiž není nic jiného než kousek inteligentně napsaného JavaScriptu kombinovaného s některými dalšími standardními internetovými technikami. Za zkratkou AJAX se skrývá, co AJAX je a co umí: asynchronní JavaScript a XML. AJAX vytváří internetové stránky dynamicky a využívá přitom HTML s kaskádovými styly, JavaScriptem a XML. To znamená, že místo toho, aby se internetová stránka a její prvky po každém kliknutí natahovaly znovu, stahují se pouze obsahy, které se pak vkládají do požadované stránky.
Zatím se dalo podobného efektu docílit jedině s Flashem nebo s rámy. Obě tyto techniky ale mají ten problém, že nefungují ve všech prohlížečích. Pro animace ve Flashi je zapotřebí zásuvný modul a rámy se zobrazují různě. Naproti tomu AJAX si rozumí s každým prohlížečem. Stránky s AJAXem se nezobrazují jedině uživatelům, kteří mají JavaScript zakázaný.
Klíčem je JavaScript
Nejdůležitější součástí AJAXu je javascriptový příkaz „XMLHttp Request“. Odesílá požadavky na XML data na server a přijímá odpovědi. JavaScript s tímto příkazem se jmenuje AJAX Engine. Přebírá za prohlížeč kompletní komunikaci se serverem, takže funguje v podstatě jako jakýsi inteligentní proxy server. Po kliknutí na odkaz se internetová stránka nejprve nijak nezmění a především úplně nezmizí, jak to známe dosud. AJAX mezitím na pozadí přijímá data. Jakmile jsou kompletní, vloží změny do internetové stránky, přizpůsobí šablonu CSS a aktualizuje obsah okna prohlížeče. Teprve teď se do internetové stránky vloží požadovaná část - a jenom ta.
Jak přidat AJAX k vlastním stránkám?
Tím nejdůležitějším je odpovídající JavaScript, který je potřeba pouze upravit. A kde ho získáte? Na internetových stránkách jako www.ajaxian.com najdete bezpočet šablon pro nejrůznější aplikace. Vzor najdete také na DVD. Umožní vám přidat na internetovou stránku po kliknutí na příslušný odkaz další text - v naší ukázce je to jednoduché „Hello World“.
HTML kód vznikající internetové stránky se od klasické stránky prakticky neliší. Základní struktura zůstává stejná, tzn. tabulky, formuláře a další prvky, jako např. tagy „div“.
Právě o ty se zajímá AJAX. Slouží jako zástupci a propojují obsah se strukturou. Jednoduchý
tag „div“ pro AJAX vypadá takhle:
V tomto případě má tag „div“ jednoznačné id „test“. To je důležité, aby mohl AJAX později vložit text přesně místo tagu „div“. Kromě toho propojíme vzorový skript ještě se šablonou stylu uloženou v samostatném souboru CSS. Zápis vypadá takto:
#test {
display: none;
}
Styl je v tomto případě opravdu víc než jednoduchý. Parametr „display:none“ udává, že se text (v našem případě „Hello World“) nejprve vůbec nezobrazuje. Aby se zobrazil, musí si JavaScript stáhnout ze serveru soubor XML. K tomu ale dojde, teprve až uživatel klikne myší na patřičný odkaz. Obsah souboru XML vypadá následovně:
Hello World
XML tag „chip“ může mít jakýkoli název, protože se nejedná o příkaz HTML. V našem JavaScriptu jsme jako zdroj textu, který se má zobrazit, zvolili „chip“. Uživatel klikne na odkaz a AJAX stáhne ze souboru XML text „Hello World“. U normální internetové stránky by v případě rozsáhlého textu čekal, než se celý text kompletně stáhne. Místo toho ale může na „ajaxové“ stránce provádět další úkony. AJAX vloží data, jakmile mu je server poskytne ve formátu XML. Tag „div“ teď vypadá takto:
Hello World
JavaScript pak ještě změní vlastnosti stylu. Aby se obsah v našem příkladu zobrazil na internetové stránce, změníme parametr „display:none“ na „display:block“. Pokud by byl text delší, zobrazil by se zarovnaný do bloku:
#test {
display: block;
}
Díky AJAXu se tak dají velmi jednoduše vytvářet různé efekty, například animované a proměnlivé nabídky. Ty pak působí téměř jako ve Flashi.
Používání AJAXu nemá zatím jenom samé výhody. Jednou z nevýhod je nefunkčnost tlačítka „Zpět“ , které v internetovém prohlížeči přestane fungovat. Prohlížeč se vrací na poslední zadanou internetovou adresu, nikoli na poslední obsah internetové stránky změněný AJAXem. Proto se na stránky aktualizované AJAXem nedají vytvářet záložky v „Oblíbených“.
Funguje to pouze u původní stránky. Podobný problém mají i vyhledávací enginy. Jejich roboti totiž obsah AJAXu nepoznají, a proto takové stránky neindexují. Na AJAX mohou zapomenout i ti, kteří programují stránky pro postižené. Programy, které umí stránky přečíst nebo přeložit, si totiž s dynamickým obsahem neporadí.
S AJAXem přichází na internetu změna
AJAX už teď internet obohacuje. Aby bylo surfování ještě pohodlnější a rychlejší, bude zapotřebí upravit také internetové prohlížeče a vyhledávací enginy. To, že AJAX začal na svých stánkách jako Google Maps, Google Pages nebo Google Suggest využívat Google, je dobré znamení.
Můžeme si totiž být jisti, že si s AJAXem už brzy poradí i vyhledávací robot. A Microsoft, Yahoo a další velcí hráči pak na sebe určitě nenechají dlouho čekat.
ZAJÍMAVÉ ODKAZY
http://www.ajaxian.com/
http://www.adaptivepath.com/
http://ajaxpatterns.org/
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
www.sitepoint.com/article/remote-scripting-ajax
www.adaptivepath.com/publications/essays/archives/000385.php
S AJAXEM PŘICHÁZÍ ZMĚNA
Čím dál tím víc internetových stránek AJAX využívá. Patří k nim jak významní hráči jako Google Maps, tak i menší projekty, jako např. bezplatný textový editor Writely a opensourcový skript Lightbox pro tvorbu vlastních internetových stránek.
Dokumenty ke stažení- Internet - Internetové turbo AJAX (272.33 kB) - Staženo 1479x