Implementace komentářů z minulého dílu byla sice funkční, ale značně nedokonalá. V případě, že uživatel udělal ve formátování komentáře chybu (zadal nepovolené XHTML značky atd.), dostal po odeslání od serveru chybovou hlášku, ale už neměl šanci chyby napravit – byl odkázán na funkci „zpět“ svého prohlížeče, u které není zaručeno, že se vyplněné údaje z formuláře neztratí. Pokud se mu naopak povedlo naformátovat komentář správně, mohlo snadno dojít k několikanásobnému odeslání (pokud by uživatel obnovil stránku).

Naším dnešním cílem proto bude, umožnit uživatelům zobrazit si náhled formátování komentáře a odeslat ho, aniž by se načítala celá stránka – místo klasického odesílání formuláře vyvoláme asynchronní požadavek javascriptem a odpověď serveru zobrazíme v rámci již načtené stránky.

Jako obvykle si nejprve si aktualizujeme zdrojové kódy aplikace pomocí Mercurialu:

$ hg pull
$ hg up "15. díl"

Případně je můžete stáhnout jako bzip2 archiv přes web.

Na straně klienta

S implementací na straně klienta nám pomůže knihovna jQuery, kterou již ve své aplikaci používáme. Umožňuje snadnou práci s AJAXem a odstiňuje nás od odlišností jednotlivých prohlížečů. Klientský kód je stručný a naleznete ho v souboru komentare.js:

komentare.nahled = function() {
    $("#formularKomentuj .vystup").load("komentare", $("#formularKomentuj form").serialize());
};
komentare.odeslat = function() {
    $("#formularKomentuj .vystup").load("komentare?odeslat=true", $("#formularKomentuj form").serialize());
};

jQuery funkce load() vyvolá HTTP požadavek na dané URL (v našem případě komentare  – první parametr), pomocí nějž předá serveru obsah formuláře (ve standardním URL kódování). Odpověď serveru pak tato funkce vloží do elementu, který jsme si pro tento účel připravili. Javascriptové funkce nahled() a odeslat() navážeme na události formuláře místo klasického (synchronního) odeslání, které je spojeno s načtením celé nové stránky.

Formulář vymažeme až po úspěšném uložení komentáře na serveru – vložené údaje se tak uživateli neztratí, ani při dočasné chybě serveru nebo špatné syntaxi komentáře. Smazáním obsahu formuláře se pak vyhneme případnému opětovnému odeslání (komentář s nulovou délkou nelze vložit). Případně bychom mohli formulář skrýt nebo ho nechat třeba „odletět“ pomocí nějakého pěkného efektu, to už nechám na vás (začít můžete třeba u pluginů do jQuery jako je Flip!).

Na straně serveru

Na straně serveru teď potřebujeme nějak obsloužit požadavky, které přicházejí na URL /komentare. K tomu využijeme technologii servletů, se kterou jsme se seznámili v devátém díle. Implementaci datové vrstvy a kontroly formátování máme hotovou už od minule a zapouzdřenou do EJB, takže jí přepisovat nemusíme  – jediné, co je potřeba upravit, je relativně tenká vrstva, která se stará o překlad z HTTP parametrů na objekty a o vykreslení hlášek informujících uživatele o výsledku (původní implementace této vrstvy byla celá v JSP).

Servlety nám umožní příjemnější zápis dané logiky než JSP – přeci jen programovat v dokumentově orientovaném formátu XML cykly a podmínky není dvakrát zábavné ani pro milovníky XML.

Náš servlet se nachází ve třídě Komentare a podstatná je jeho metoda doPost() :

@Override
protected void doPost(HttpServletRequest pozadavek, HttpServletResponse odpoved) throws ServletException, IOException {
    PodnikRemote ejb = hledac.getPodnikEJB();
    /** Načteme HTTP parametry */
    Komentar k = new Komentar();
    k.setPodnik(Integer.decode(pozadavek.getParameter("podnik")));
    k.setNadpis(pozadavek.getParameter("nadpis"));
    k.setKomentar(pozadavek.getParameter("komentar"));
    k.setTyp(Komentar.TYP.valueOf(pozadavek.getParameter("typ")));
    boolean ulozit = Boolean.valueOf(pozadavek.getParameter("odeslat"));
    String jsp;
    try {
        /** Komentář odešleme do nižší vrstvy ke kontrole nebo rovnou k uložení */
        k = ejb.komentuj(k, ulozit);
        pozadavek.setAttribute("komentar", k);
        if (ulozit) {
        jsp = "/WEB-INF/casti/ajaxKomentare/odeslano.jsp";
        } else {
        jsp = "/WEB-INF/casti/ajaxKomentare/nahled.jsp";
        }
    } catch (Exception e) {
        /** Objekty mezi servletem a JSP si můžeme předávat pomocí atributů požadavku */
        pozadavek.setAttribute("chyba", e);
        jsp = "/WEB-INF/casti/ajaxKomentare/chyba.jsp";
    }
    /** O vykreslení XHTML vyýstupu se už zase postará JSP */
    RequestDispatcher rd = getServletContext().getRequestDispatcher(jsp);
    rd.forward(pozadavek, odpoved);
    }

Z HTTP požadavku si nejprve načteme parametry a tím provedeme i jejich základní typovou kontrolu. Nějaké uživatelsky přívětivé chybové hlášky v této fázi nemusíme řešit – pokud by např. v parametru podnik nebyla celočíselná hodnota nebo parametr typ neodpovídala našemu číselníku ( enum), došlo by ke standardní chybě 500 Interní chyba serveru. To se ale stane jen v případě, že by se uživatel v aplikaci „vrtal“ a podstrkával jí ručně svoje parametry – na takového uživatele nemusíme brát zřetel a vyrábět pro něj přívětivé chybové hlášky.

V Javě se skvěle programuje, ale na druhou stranu se v ní špatně vytvářejí HTML dokumenty  – mohli bychom k tomu sice použít HttpServletResponse.getWriter().print(String
text); a „lepit“ výsledné HTML z kousků textu, ale nejen že by to bylo nepohodlné, ale také by byla velká pravděpodobnost, že někde uděláme chybu a výsledný kód bude obsahovat např. neuzavřené značky. Naštěstí existuje způsob, jak skloubit programování v Javě a vytváření HTML v JSP dohromady. Pomocí RequestDispatcher u a jeho metody forward() můžeme řetězit za sebe servlety a JSP (což jsou ve výsledku taky servlety) a díky tomu udělat část práce v javovském kódu a část v JSP.

V připojeném JSP máme k dispozici jednak původní GET/POST parametry, které dorazily na servlet a jednak JSPčku můžeme předávat další data (objekty) pomocí atributů požadavku – HttpServletRequest.setAttribute(), které jsou identifikované jednoduše textovým klíčem.

Vytvořený servlet nezapomeneme přidat do souboru web.xml a namapovat na požadované URL:

<servlet>
    <description>Odesílání a náhledy komentářů pomocí AJAXu.</description>
    <servlet-name>komentare</servlet-name>
    <servlet-class>cz.frantovo.nekurak.servlet.Komentare</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>komentare</servlet-name>
    <url-pattern>/komentare</url-pattern>
</servlet-mapping>

JSP, na které se v servletu odkazujeme, je velmi jednoduché a nám známé – nový je jen způsob, kterým přistupujeme k atributům požadavku (objektům). Ty se nacházejí v poli requestScope[] pod námi zvoleným klíčem. Dále s těmito objekty pracujeme, jak jsme zvyklí (pomocí .komentar přistupujeme k vlastnosti objektu – ve výsledku se volá metoda getKomentar() třídy Komentar).

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:nk="urn:jsptagdir:/WEB-INF/tags/nekurak"
      version="2.0">
    <div>
    <p class="informacniHlaska"><fmt:message key="komentare.nahledNadpis"/>:</p>
    <!-- XHTML je už zkontrolované: → vypíšeme ho rovnou -->
    ${requestScope['komentar'].komentar}
    </div>
</jsp:root>

Závěr

Dnes jsme vylepšili naši aplikaci tak, aby se formulář pro komentování odesílal AJAXem, což uživatelům zpříjemní práci s webem – tedy alespoň těm se zapnutým Javascriptem (pro ostatní je tu původní implementace s klasickým odesíláním HTML formuláře). Při tom jsme si prakticky ukázali, jak skloubit servlety a JSP a mít z obou to lepší – ze servletů programování a z JSP tvorbu HTML/XML dokumentů.

Odkazy

• jQuery serialize()  – funkce pro URL-kódování formulářů.
• jQuery load() – jednoduchá funkce pro načítání AJAXových odpovědí do elementu.
• jQuery Ajax – plnohodnotné funkce pro práci s AJAXem.
• RequestDispatcher vs. sendRedirect – rozdíl RequestDispatcheru oproti HTTP přesměrování.
• Myslete, když navrhujete formulář – blogový zápisek s šikovnými tipy k našemu tématu.
• Použitelné a přístupné webové formuláře – další pojednání na téma formuláře.