Jednoduché webové stránky s AJAX v jazyce Java

V době kolem covidového Silvestra roku 2020 jsem vytvořil prototyp jednoduché webové stránky s podporou AJAX s cílem eliminovat Java vývojáře od Javascriptu a ideálně také od textových HTML šablon. Vývojář se však neobejde bez znalosti struktury HTML stránky ani bez znalosti CSS selektorů. Původní řešení jsem trochu zobecnil, vybrané části přenesl do frameworku Ujorm a výsledek předkládám zde pro vaši další inspiraci. 

Aby měl prototyp nějaký smysl, vytvořil jsem webovou stránku pro testování regulárních výrazů. Podívejme se  rovnou na kód zapracovaný do obyčejného Java servletu:

Metoda doGet() odpovídá za sestavení celé HTML stránky, která obsahuje jednoduchý formulář se dvěma (textovými) vstupy, potvrzovacím tlačítkem a s panelem pro zobrazení výsledku. Pro  implementaci jsem využil objektový model tříd typu Element z knihovny Ujorm. Za výhodu takového řešení považuji odolnost vůči překlepům v HTML kódu, bezpečný zápis dat (včetně ošetření speciálních znaků) a v neposlední řadě i jednoduché připojení dalších služeb – s veškerým komfortem prostředků jazyka Java. Je dobré vědět, že objekty typu Element posílají svá data rovnou do Writeru a tak jeho paměťová náročnost je minimální (ve výchozí konfiguraci). Pokud však má někdo jiné preference, HTML stránku může sestavit libovolným jiným způsobem, přitom není ani problém přesunout implementaci ze servletu – třeba do Spring MVC. Vraťme se však k ukázce stávajícího zdrojového kódu: za zmínku stojí řádek s číslem 64, který vkládá krátký Javascript do hlavičky cílové HTML stránky. Po zakomentování toho řádku bude stránka fungovat i nadále, začne však docházet k načtení celé HTML stránky (vždy po explicitním odeslání formuláře tlačítkem). Ke stejnému efektu dojde také u webových prohlížečů bez podpory Javascriptu.  Je na čase osvětlit zpracování AJAX požadavků.

Volání AJAX dotazu iniciuje stisk klávesy na textové položce formuláře. Javascript pak posílá (s určitým zpožděním) metodou POST požadavek AJAX na stejnou URL adresu, ze které byla stránka načtena. K hodnotám formuláře se přibalí ještě jeden parametr s hodnotou _ajax=true. Pokud servlet dostane požadavek bez toho parametru, deleguje zpracování na původní metodu doGet(), jinak zavolá metodu doAjax() pro sestavení JSON odpovědi. Využívá k tomu objekt typu JsonBuilder z frameworku Ujorm. Volání metody JsonBuilder.write(key, value) zapisuje do JSON název atributu s hodnotou. Název atributu zde reprezentuje CSS selektor definující cílový HTML element, hodnota pak obsahuje platný fragment HTML kódu, kterým se původní obsah vybraného elementu nahradí. Metoda writeClass() je k dispozici pro případy, kde selektor tvoří název jedné CSS třídy. Na řádku 108 se pro sestavení HTML fragmentu využívá objekt typu Element, ale obsah HTML elementů lze tvořit i alternativními prostředky – jak naznačuje zápis dalšího atributu s prostým textem. Pokud jsme použili správně CSS selektory, tak naše práce končí. O modifikaci původní HTML stránky už postará zmíněný Javascript.

Závěr

Pokud popsané řešení AJAX někoho zaujalo, článek splnil svůj cíl. Praktické využití lze hledat na drobných projektech či v administraci, kde chybí frontendoví vývojáři. Pro svoji malou velikost může najít uplatnění v embedded zařízeních. Generovaný JavaScript však zatím postrádá  zachytávání dalších událostí formuláře, například změnu hodnot combo-boxu. Na podpoře více formulářů by šlo také ještě zapracovat. Protože s kódováním Javascriptu mám jen malé zkušenosti, nepochybuji o tom, že by to napsal někdo lépe. Neumím však ani vyloučit, že podobný Javascript už někde existuje. Možná by stála za úvahu i nějaká integrace s knihovnou Vue.js, což je zajímavý Javascriptový projekt pro tvorbu uživatelských rozhraní.

Pro spuštění projektu je třeba JDK verze 8 a webový prohlížeč s podporu Javascript Vanilla ES6, použitý Javascript však už nevyžaduje žádné knihovny. V projektu vystačíme se dvěma moduly frameworku Ujorm a tak velikost celého WAR vychází   na pouhých 180 kB – včetně CSS souboru z frameworku Bootstrap. Celý projekt je nyní volně dostupný na GitHub. Projekt se spouští ve Windows skriptem run.cmd (na Linuxu skriptem: run.sh), při prvním startu dojde ke stažení potřebných knihoven.

Užitečné odkazy:

• Projekt na GitHub
• JavaDoc třídy Element
• Javascript ES6 guide for using the Fetch API
• HTML report v jazyce Java na pár řádků (volné pokračování článku)