Základ fungovania AJAXu

Pre komunikáciu stránky (resp. JavaScriptu) so serverom slúži natívny objekt XMLHttpRequest. Aj keď tento objekt vznikol už pred rokom 2000, jeho masové využitie v AJAXe sa objavuje neskôr a samotný termín AJAX sa prvýkrát objavuje r. 2005.

Popíšme si najprv samotný objekt XMLHttpRequest. Už pri jeho interpretácii v prehliadačoch sa síce stretávame s prvým problémom (hlavne pre odlišný prístup IE), ale jeho deklarácia môže vyzerať napr. nejako takto:

if(typeof window.ActiveXObject != 'undefined')
    {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {  
        httpRequest = new XMLHttpRequest();
    }

Metódy a vlastnosti objektu XMLHttpRequest, ktoré sú pre náš jednoduchý príklad podstatné:

• open(sMethod, sUrl [, bAsync]) - Pomocou tejto metódy určujeme typ spracovania požiadavku (GET alebo POST), adresu stránky, ktorá sa spracuje na serveri a to, či sa požiadavok spracuváva asynchrónne (to znamená, že po zavolaní metódy send() sa skript spracuváva ďalej a nečaká sa na výstup od servera).
• send (content) - Metóda odošle požiadavok s príslušným obsahom.
• onreadystatechange - V tejto vlastnosti definujeme funkciu (JavaScriptu), ktorá obsluhuje udalosť zmeny stavu objektu.
• readystate - vlastnosť vracia stav objektu, tento stav môže nadobúdať tieto hodnoty: 0 - neinicializované, 1 - načítavam, 2 - načítané, 3 - spracúvavam, 4 - hotovo.
• responseText - vracia odpoveď ako reťazec spolu s údajmi, ktoré zaslal server.
• responseXML - vracia odpoveď v podobe XML dokumentu.
• status - návratový kód odpovede (napr. 404).
• statusText - doprevádza kód odpovede sprievodným textom.

Vyskúšajme si teraz teóriu v praxi, vložme do stránky nejaký prvok (pre jednoduchosť len čistý html select). Tento select nám dá na výber z dvoch možností, zobraziť text1 a text2. Po kliknutí na jednu z možností sa nám jeho podoba zobrazí pod select a to práve pomocou AJAXu bez znovunačítania stránky. Výsledok si môžete pozrieť na stránke.

Pozrime sa bližšie na kód, ktorý sa volá pri akejkoľvek zmene v selecte:

function ajax()
{
    var url = document.getElementById("vyber").value;

    if (url != 0)
    {
        if (window.ActiveXObject)
        {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else
        {
            httpRequest = new XMLHttpRequest();
        }
        httpRequest.open("GET", url, true);
        httpRequest.onreadystatechange = function() {processRequest();}
        httpRequest.send(null);
    }
    else{document.getElementById("miestoZobrazenia").innerHTML = "";
    }
}

function processRequest()
{
    if (httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            var miestoZobrazenia = document.getElementById("miestoZobrazenia");
            miestoZobrazenia.innerHTML = httpRequest.responseText;
        }
        else
        {
            alert(httpRequest.status);
            alert("Chyba pri nacitani stanky"+ httpRequest.status +":"+ httpRequest.statusText);
        }
    }
}

Ako vidíme, po zavolaní funkcie ajax() sa nám vytvorí príslušný objekt XMLHttpRequest. Metódou GET sa odošle požiadavok na adresu, ktorú sme zvolili sami v našom selecte. Zároveň definujeme výkonnú funkciu (processRequest) na spracovanie výstupu.

Metóda processRequest nám potom v prípade, že sme už obdržali celý balík dát od servera a je všetko v poriadku, vloží do pripraveného div-u miestoZobrazenia text, ktorý je vlastne výstupom požadovanej stránky.

V pripravenom príklade sú volané stránky veľmi primitívne, obsahujú len krátky text, aby sa dalo rozlíšiť, ktorá z nich je práve zobrazovaná. Cieľom bolo ukázať, že práve načítanie týchto stránok sa deje bez nutnosti znovunačítať stránku pôvodnú.