3.5 Anatomie činnosti AJAXu


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

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *