Nejžhavější technologie dneška: Ajax - úplně nový web

11. 6. 2007

Sdílet

Web bude ještě dynamičtější, než je tomu dnes. V podobě technologie Ajax je k dispozici soubor technologií, které mohou být využity při implementaci interaktivních webových aplikací. Samotný akronym Ajax odpovídá výrazu „Asynchronous JavaScript And XML“, v podstatě jde přitom především o způsob konstruování interaktivních webových stránek. Jak bývá často zdůrazňováno, Ajax nepředstavuje nový jazyk, nýbrž spíše nový přístup využívající několika stávajících standardů a technologií, konkrétně pak především JavaScript a XML, jež obsahuje už v názvu.

Web bude ještě dynamičtější, než je tomu dnes. V podobě technologie Ajax je k dispozici soubor technologií, které mohou být využity při implementaci interaktivních webových aplikací. Samotný akronym Ajax odpovídá výrazu „Asynchronous JavaScript And XML“, v podstatě jde přitom především o způsob konstruování interaktivních webových stránek. Jak bývá často zdůrazňováno, Ajax nepředstavuje nový jazyk, nýbrž spíše nový přístup využívající několika stávajících standardů a technologií, konkrétně pak především JavaScript a XML, jež obsahuje už v názvu.

Veškeré komponenty potřebné pro využití Ajaxu přitom byly k dispozici vlastně už s nástupem prohlížeče Internet Explorer 5, v té době však nenašly tak široké využití, jaké se nyní nabízí v rámci Ajaxu. Skutečný boom Ajaxu vyvolal až Google díky své na Ajaxu založené e-mailové službě Google Mail.

Ajax v základech

Myšlenka Ajaxu spočívá v tom, že jsou části webové stránky natahovány asynchronně a tímto způsobem se mění obsah stránky. Znamená to, že při změně obsahu nebude znovu natažena celá stránka, nýbrž pouze modifikovaný obsah. Za tímto účelem je z JavaScriptu volán objekt XMLHttpRequest. Tento požadavek (Request) se dotazuje serveru na obsah, který je typicky vracen zpět pomocí XML a JavaScriptu. Skript pak toto XML analyzuje. Data z XML skript potom překládá a odpovídajícím způsobem mění pomocí DOM (Document Object Model) webovou stránku.

Natahování po částech

Základní principy práce s Ajaxem si popíšeme na příkladu, který má blízko k jeho praktickému využití – konkrétně se jedná o diskusní fórum, v němž jsou diskuse v HTML zobrazeny jako strom. Aby si uživatel mohl přečíst daný příspěvek, musí kliknout na jeho nadpis. V případě klasického modelu by byl zaslán požadavek na server a následně je vytvořena celá stránka, která kromě původního stromu obsahuje navíc i text příspěvku. U modelu založeného na Ajaxu bude jako reakce na dotaz na server poslán pouze samotný text příspěvku: Připojení tohoto textu k jinak nezměněné stránce zajistí příslušný program v JavaScriptu.

Pro provedení této úlohy byl u starších verzí Internet Exploreru (počínaje verzí 5.0) k dispozici ActiveX objekt. IE 7 už stejně jako jiné prohlížeče dává odpovídající objekt k dispozici nativně. Aktuální API XMLHttpRequest Internet Exploreru je k dispozici na webu MSDN a dostupné je rovněž API projektu Mozilla.

Vlastním trikem Ajaxu je právě XMLHttpRequest – ten může být totiž zpracováván asynchronně, což v této souvislosti znamená asynchronně k uspořádání zbytku stránky a rovněž asynchronně vůči na stránce běžícím skriptům. To znamená, že stažení dat může být provedeno prostřednictvím HTTP a že data mohou být stažena bez toho, aby tím trpěla interakce uživatele se stránkou. Sestavení požadované stránky běží také na pozadí.

Objekt XMLHttpRequest poskytuje několik metod a vlastností. Konkrétně se jedná o následující metody:

Metoda / Popis
  • abort () - Ukončí aktuální požadavek
  • getAllResponseHeaders () - Vrací seznam všech hlaviček v podobě řetězce
  • getResponseHeader(headerName) - Vrací hodnotu specifikované HTTP hlavičky
  • open („method“, „URL“[, asyncFlag[, „userName“[, „password“]]]) - Udává metodu, URL a další volitelné atributy požadavku. Parametr metody může nabývat hodnoty „GET“, „POST“, „HEAD“, „PUT“, „DELETE“ nebo jiných HTTP metod uvedených ve specifikaci W3C. Parameter URL může být tvořen relativní nebo kompletní URL adresou. Parameter „async“ specifikuje, zda by měl být požadavek zpracováván asynchronně, nebo ne, přičemž "true" znamená, že zpracování skriptu pokračuje po metodě send() bez čekání na odezvu, zatímco „false“ znamená, že skript čeká na odezvu před tím, než bude zpracování skriptu pokračovat.
  • send (content) - Odešle požadavek s příslušným obsahem.
  • setRequestHeader ("label", "value") - Přidá kombinaci label/value k hlavičce, která je odesílána s požadavkem.

Níže jsou uvedeny vlastnosti objektu XMLHttpRequest:

Vlastnost / Popis
  • onreadystatechange - Funkce pro obsluhu události změny stavu objektu; specifikuje odkaz na správce události, k níž dojde při každé změně stavu.
  • readyState - Vrací stav objektu (viz níže)
  • responseText - Vrací odpověď v podobě řetězce s údaji zaslanými serverem
  • responseXML - Vrací odpověď v podobě XML, konkrétně jako objekt XML dokumentu (kompatibilní s DOM) s daty zaslanými serverem.
  • status - Návratový kód odpovede, například 404 pro nenalezenou stránku (Not Found) nebo 200 pro úspěšné operace (OK)
  • statusText - Vrací stav v podobě řetězce doprovázejícího stavový kód odpovědi

Zajímá-li vás Ajax a další aktuální technologické trendy, určitě si nenechte ujít knihu redakce časopisu Computerworld 10 nejžhavějších technologií světa počítačů a internetu, z níž je i textová ukázka výše. Kromě popisu jednotlivých technologií přináší také konkrétní postupy (v případě Ajaxu se například seznámíte se základem práce v něm) a pomůže vám rychleji si osvojit danou tematiku. Níže přinášíme obrazovou ukázku z kapitoly funkcích, které Ajax obsahuje:

Strana 97 - Vyhodnocení dat v Ajaxu zde


K dalším detailům o obsahu knihy 10 nejžhavějších technologií světa počítačů a internetu a k objednávkovému formuláři přistupujte zde.

Knihu si můžete objednat zde:

Jste-li předplatitel použijte tento objednávkový formulář

Nemáte-li předplatitné použijte tento objednávkový formulář