Moderní webové aplikace

3.5 Anatomie činnosti AJAXu

0

Webové stránky využívající AJAX jsou stránky zapsané pomocí značkovacího jazyka HTML, nebo XHTML (mohou být samozřejmě generované na straně serveru, např. pomocí JSP).
Výhodou Javy na straně serveru (konkrétně Java Platform, Enterprise Edition) je přímá podpora validace dat, správa identity uživatele a především perzistentnost. Díky tomu je programátor ušetřen vytváření vlastních rutin pro tyto akce.

Obr.4: Model klasické webové aplikace a model aplikace postavené na AJAXu (převzato z [1] )

3.5.1 Generování události

Funkce JavaScriptu jsou volány důsledkem události vyvolané uživatelem. Je možné tedy namapovat funkci na event např. onClick na tlačítku. Pokud je tlačítko stisknuto, je volána tato metoda a stránka nadále zůstavá beze změny.

<input type=“button“ value=“Odeslat“ onClick=“odesli();“ />

Tab. XIV: JSP kód pro komponentu button s propojením na obsluhu události

3.5.2 Vytvoření objektu XMLHttpRequest

V závislosti na typu prohlížeče je vytvořen objekt XMLHttpRequest, je ověřen a provázán s obsluhou události návratu – callback() funkce. Pro otevření spojení jsou potřeba tři parametry: http metoda (v tomto případě POST či GET), adresu komponenty na straně serveru, která bude požadavek zpracovávat a boolovskou příznak, zda bude požadavek zpracováván asynchronně.

if(window.XMLHttpRequest)
var xmlhttp = new XMLHttpRequest;
else if(window.ActiveXObject)
var xmlhttp = new ActiveXObject („Microsoft.XMLHTTP“);
else
return false;
xmlhttp.open(metoda, url, typ);
xmlhttp.onreadystatechange = function() {
obsluha(xmlhttp);
};

Tab. XV: Příklad vytvoření požadavku

3.5.3 Připojení na server

Odeslání požadavku je realizováno funkcí xmlhttp.send(content). Pokud je pro
spojení použitá metoda GET (tu je vhodné použít v případě, že pro stejný odesílaný obsah je očekáván pokaždé stejná odpověd), u které může být obsah ponechán prázdný, jsou data připojena jako parametr k url. V důsledku toho je limitována velikost (délka řetězce) těchto dat.
Pokud jsou data odesílaná metodou POST (ta se využívá v případě, že odesílaná data zasáhnou do stavu serverové aplikace), je nutné připojit hlavičku Content-type. V tomto případě není velikost odesílaných dat nijak omezena (snad jenom možným vypršením časového limitu na straně serveru).

xmlhttp.setRequestHeader(„Content-Type“,
„application/x-www-form-urlencoded“);
xmlhttp.send(content);

Tab. XVI: Odeslání požadavku na server

3.5.4 Zpracování požadavku serverem

Na straně serveru je volána obslužná rutina, spojená s daným URI. V jazyce Java se jedná o třídu dědící z třídy HttpServlet. Tato rutina zpracuje požadavek, provede příslušné akce a odešle zpět odpověď.

public class SomeActionServlet extends HttpServlet {
private ServletContext context;
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = config.getServletContext();
}
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException {
String parametr = request.getParameter(„parametr“);
if (parametr != null) {
response.setContentType(„text/xml“);
response.setHeader(„Cache-Control“, „no-cache“);
response.getWriter().write(„<odpoved>zpracovano</odpoved>“);
} else {
response.setContentType(„text/xml“);
response.setHeader(„Cache-Control“, „no-cache“);
response.getWriter().write(„<odpoved>chyba</odpoved>“);
}
}

Tab. XVII: Jednoduchý příklad zpracování požadavku a odeslání odpovědi

3.5.5 Zpracování odpovědi objektem XMLHttpRequest

Klientská aplikace (prohlížeč) volá přidruženou callback funkci vždy, když dojde ke změně stavu atributu readyState objektu XMLHttpRequest. V této funkci je testován stav a pokud odpověď dorazila v pořádku (http status 200), je možné přečíst odpověď.

function obsluha(xmlhttp) {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var odpoved =
xmlhttp.responseXML.getElementsByTagName(‚odpoved’);

Tab. XVIII: Zpracování odpovědi – kontrola stavu HTTP odpovědi

3.5.6 Aktualizace HTML DOM reprezentace

Objekt v DOM, který bude měněn musí být identifikován jednoznačným ID, pomocí kterého JavaScript rozpozná, kde v dokumentu má provést změny.


<div id=“co_zmenit_id“> Obsah, který bude přepsán </div>

Tab. XIX: Identifikace objektu, který bude měněn
Obsah tohoto objektu (to, co je uzavřené mezi těmito tagy) je potom přepsán doručenou odpovědí, případně chybovým hlášením (v případě http status rozdílného stavu 200).

document.getElementById(‚co_zmenit_id‘).innerHTML = odpoved;

Tab. XX: Funkce měnící obsah specifikovaného objektu

2.4 Prostředky pro kontrolu vstupu od uživatele

0

Validace – je možno ji definovat pro kteroukoliv vstupní komponentu. Po specifikované akci (typicky odeslání dat z formuláře) jsou zadaná data ověřena, pokud splňují danou podmínku. Pokud ano, pokračuje se ve zpracovávání přijatých dat; pokud ne, je generována případná definovaná chybová hláška a zpracování formuláře je ukončeno.

Java Studio Creator umožňuje přidání tří typů validátorů: Double Precision Range Validator kontroluje, zda hodnota leží v zadaném intervalu pro typ float), Length Validator (ověřuje délku řetězce) a Long Precision Range Validator (kontrola intervalu pro typ long). Dále umožňuje použití dalšího validátoru, který je svázaný přímo s konkrétní komponentou: Requied (boolová hodnota, zda je potřeba tuto vlastnost vyplnit).

<ui:textField binding=“#{Page1.textField1}“ id=“textField1″
validator=“#{Page1.longRangeValidator1.validate}“/>

Tab. III: Navázání validátoru na komponentu TextField

Generování chybové hlášky probíhá pomocí komponenty message z knihovny ui.
Komponenta message je svázána s komponentou, pro niž generuje chybovou hlášku pomocí atributu for.
<ui:message binding=“#{Page1.message1}“ id=“message1″
for=“textField1″/>
Tab. IV: Svázání chybové hlášky s komponentou, jejímuž validátoru je určena
Konverze – nejen z důvodu potřeby interpretovat data srozumitelně pro člověka, který bude aplikací pracovat zavádí JSF konvertory. Díky nim, když je ve vrstvě Model používán např. Timestamp, ve vrstvě View je automaticky převeden a zobrazen jako řetězec – Datum – a ne jako počet sekund uplynulych od roku 1900. Navíc je možné nadefinovat konkrétní časovou zónu, pro kterou se má datum zobrazit, nebo třeba místní národní nastavení, takže se datum zobrazí dle zvyklostí v místě použití.
Obr.2: Konvertory
<ui:textField binding=“#{Page1.textField1}“
converter=“#{Page1.dateTimeConverter1}“ id=“textField1″/>
Tab. V: Navázání konvertoru na komponentu Text Field

3 AJAX

0

3.1 Historie

Asynchronous JavaScript and XML (AJAX) je souhrnné označení technologie pro vývoj interaktivních webových aplikací. Dřívější webové stránky byly čistě statické, případně generovaly dynamický obsah pouze v případě znovunačtení celé stránky (pomocí skriptovacích jazyků jako např. PHP, ASP, CGI…), mírná dynamičnost byla možná díky použití JavaScriptu, případně DHTML pro vizuální efekty, ale především se jednalo o synchronní přístup – uživatel provedl akci (např. vyplnil formulář) a na základě této akce byly odeslány data na server, ten je nějakým způsobem zpracoval a vygeneroval znovu celou HTML stránku, kterou webový prohlížeč na straně klienta zobrazil.
Pomocí technologie AJAX je možné načíst pouze část stránky (typicky např. data v tabulce, případně obsah elementu DIV či SPAN), stejně tak odeslat pouze část dat na pozadí bez nutnosti překreslovat celou stránku. Tato vlastnost ostatně není žádná novinka – komunikaci se serverem na pozadí umožňoval už např. Macromedia Flash od verze 4, stejně tak mezi první průkopníky základu této technologie je možné považovat společnosti Microsoft a Netscape, které ve svých prohlížečích definovaly tagy IFRAME (Microsoft Internet Explorer 3) a LAYER (Netscape Communicator 4). V Microsoft Internet Exploreru 4 (a Netscape Communicatoru 4) bylo také možné používat Java applet běžící v prohlížeči, který na pozadí komunikoval se serverem. Za průlom se dá považovat až objekt XMLHttpRequest, který byl zaveden v prohlížeči Microsoft Internet Explorer.
Termín AJAX použil poprvé až v únoru roku 2005 Jesse James Garret ve článku Ajax: A new approach to web applications [1]. V té době již tuto technologii aktivně využívala společnost Google pro některé své služby, především Gmail, Suggest… Od té doby nastal doslova boom této technologie a dnes je součástí tzv. Web 2.0, na němž, jakožto nepsaném standardu je založena převážná většina moderních webových aplikací.

3.2 WEB 2.0

Podle WIKIpedie může za vznik pojmu Web 2.0 nakladatelství O’Reilly (konkrétně se jedná o článek Tima O’Reillyho „What is web 2.0“ [3]), který jej definovalo jako „druhou generaci internetových služeb, která lidem umožňuje spoluvytvářet a sdílet informace novým způsobem – například sociální sítě, stránky využívající wiki, komunikační nástroje a folksonomie“. Také konference „Web 2.0“, která proběhla v roce 2005 měla velké ohlasy.
Na jednu stranu se může zdát, že Web 2.0 je označením pro souhrn velice progresivních technologií, na stranu druhou již většina technologií, které do tohoto souhrnu spadají existuje delší dobu a weby, které tyto technologie využívají „označovány nálepkou“ Web 2.0 nejsou. Spíše než o revoluci se tedy jedná o pouhou evoluci, z důvodu poptávky po novějších technologiích – zvyšují se kapacity přípojek koncových uživatelů, počty uživatelů internetu rostou, místo obrázků jsou maily posílány videa, roste potřeba sdílení multimediálního obsahu… Jak bylo napsáno výše, jedná se o souhrn moderních technologií, které mohou být (při správném použití) velkým přínosem pro vývojáře a stejně tak dobrým pomocníkem pro uživatele.
Jak jsem napsal výše, Web 2.0 slučuje některé moderní technologie, do kterých patří zejména:
  • Na AJAXu založené Rich Internet Aplikace
  • Rich Internet Aplikace bez použití AJAXu
  • Kaskádové styly
  • Semanticky správné XHTML značkování
  • Informační kanály (RSS a Atom)
  • Sociální sítě (Folksonomie, weblogy, wiki…)
  • Sdružování služeb nabízených na různých webech na jedno místo (mohou sem spadat i uvedené RSS)
  • Representation State Transfer
  • Programová rozhraní webových služeb (SOAP)

3.3 Používané technologie

V úvodu jsem napsal, že AJAX je technologie, což není úplná pravda. AJAX je jakési zastřešení několika různých technologií, které jako celek tvoří mocný nástroj.
  • Definice dokumentu pomocí XHTML – prakticky se jedná o Document Object Model (DOM) reprezentující zobrazení webové stránky zapsaný jako stromová struktura
  • Definice stylů stránky pomocí Cascading Style Sheets (CSS)
  • Propojení zobrazené stránky za pomocí XML jazyka (je možné použít i jakýkoliv jiný formát, např. HTML, čistý text, či JavaScript Object Notation, XML je ovšem z hlediska rozšířenosti nástrojů pro parsování tohoto typu nejvhodnější)
  • Asynchronní metoda pro získávání dat – XMLHttpRequest
  • Rutiny v JavaScriptu umožňující spojení se serverem na pozadí a upravující nebo modifikující DOM stránky

3.4 Příklady praktického použití AJAXu

Technologie AJAX je ideální například pro následující činnosti:

  • Validace položek formulářů v reálném čase – v praxi se využívá např. pro ověření správnosti seriového čísla, neexistence loginu nově vytvářeného uživatele…
  • Autokompletace – v češtině se vžil pojem „našeptávač“ – při psaní do pole uživatel má možnost vybíraz z odpovídajích možností, aby nemusel vypisovat celou frázi
  • Načítání na vyžádání – načtení konkrétní části stránky na pozadí a vložení do existujícího DOM
  • Sofistikované komponenty – dynamicky generované stromové struktury, menu tabulky…
  • Serverem vynucená změna obsahu – aktualizování objektů na stránce bez zásahu uživatele – měnové kurzy, kurzy sázek, hlasování
  • Částečné odeslání – odeslání dat bez nutnosti překreslení celé stránky

2.8 Navigace mezi stránkami

0

Málokterá webová aplikace je tvořená pouze jedinou stránkou, většinou se jedná spíše o soustavu JSP stránek, které jsou vzájemně propojeny. Toto propojení není tvořeno statickými odkazy, jako v případě HTML dokumentu. Navigace je definována opět v XML struktuře (soubor navigation.xml), jako soustava navigačních pravidel, tzv. navigation-case elementů, ze kterých se vybírá na základě výsledku prováděné akce.

<navigation-rule>
<from-view-id>/Page1.jsp</from-view-id>
<navigation-case>
<from-outcome>prejdi</from-outcome>
<to-view-id>/Page2.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Tab. XI: Příklad jednoduchého navigačního pravidla

Touto akcí může být například stisknutí tlačítka pro odeslání formuláře, čili přímé aktivování komponenty typu UICommand, nebo se může jednat o návratovou hodnotu některé metody, která mohla být vyvolána na základě nějaké předchozí akce. V praxi se jedná o návratovou hodnotu typu string, která je porovnávána s jednotlivými navigation-case elementy a na jejich základě může zobrazit další stránku (definovanou pomocí emelentu to-view-id).

<ui:button action=“#{Page1.buton1_action}“
binding=“#{Page1.button1}“ id=“button1″ text=“Přejít“/>

Tab. XII: Definice tlačítka v JSP

public String button1_action() {
return „prejdi“;
}

Tab. XIII: Handler zpracovávající událost stisku tlačítka

Obr.3: Navigace

2.7 Vytvoření JSP

0
Každá JSP stránka je definována XML strukturou, která obsahuje jednotlivé komponenty. Rozložení jednotlivých tagů je velice podobné struktuře HTML stránky, samotný HTML kód je generován dynamicky v případě požadavku na jeho zobrazení. Tagy obsahují tedy i mapování jednotlivých komponent na datový model.
Ke každé JSP stránce je přidružen PageBean. V této třídě jsou obsaženy definice jednotlivých komponent a jejich inicializační kód, stejně tak inicializační rutiny pro jednotlivé beany (metody getBean) a zachytávací rutiny pro události vyvolané akcí uživatele.
private TextField textField1 = new TextField();

public TextField getTextField1() {
return textField1;
}

public void setTextField1(TextField tf) {
this.textField1 = tf;
}
Tab. X: Část beanu stránky – obsluha komponenty TextField1
Go to Top