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();“ />
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);
};
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);
3.5.4 Zpracování požadavku serverem
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>“);
}
}
3.5.5 Zpracování odpovědi objektem XMLHttpRequest
function obsluha(xmlhttp) {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var odpoved =
xmlhttp.responseXML.getElementsByTagName(‚odpoved’);
…
3.5.6 Aktualizace HTML DOM reprezentace
…
<div id=“co_zmenit_id“> Obsah, který bude přepsán </div>
…
document.getElementById(‚co_zmenit_id‘).innerHTML = odpoved;