AJAX pro začátečníky: formulář zpracovaný bez opětovného načtení stránky

AJAX jako takový není nějaká konkrétní technologie nebo programovací jazyk. Jde o provázání několika prvků, jejichž výsledkem je vždy nějaké zpracování dat či jiná akce, kterou webová aplikace provede bez toho, že by se uživateli v prohlížeči musela stránka znovu načítat.

V naší ukázce si ukážeme úplný základ toho, jak AJAX funguje ve spojení HTML, JavaScriptu a PHP. Pokud pracujete s redakčními systémy, možná už využíváte jQuery a API těchto systémů. O tom někdy příště, tentokrát se zaměříme opravdu na základní fungování této techniky. Myslím si, že znalost základů AJAXu vám může pomoci v pochopení principu jeho fungování například v redakčním systému Drupal.

Cílem následující ukázky bude jednoduchý formulář v HTML, který bude převádět zadaný text do podoby šifry MD5. Teto formulář bude obsahovat tři prvky, a to políčko pro zadání vstupního textu s popiskem a odesílací. Převod bude probíhat bez opětovného načítání stránky, což zajistí JavaScript, samotný výpočet MD5 zrealizujeme pomocí kousku kódu v PHP. Výsledek bude zobrazován v odstavci pod formulářem.

Jak na AJAX 1: připravte si HTML

Formulář v HTML jistě dovedete připravit sami, takže k následujícímu kódu jen stručné vysvětlení. Jako akce nyní ve formuláři uvedena cesta k souboru v PHP nebo na nějakou další stránku. Namísto toho je zde odkaz na funkci JavaScriptu, která je definována v hlavičce webu. Stejně tak by mohla být v externím souboru a do stránky vložena značkou script.

Každý formulářový prvek má své pojmenování a identifikátor. Pod formulářem je mezinadpis následovaný prázdným odstavcem, kterému jsem přidělil identifikátor vysledek.

 <h1>Řetězec pro převod do MD5</h1>
   
<form name="zadani" action="javascript:md5()">
   <label for="string">Zadejte vstupní text:</label>
   <input type="text" name="string" id="string" class="string">
   <input type="submit" name="submit" value="Převést">
</form>


 <h3>MD5 pro zadaný výraz</h3>
 <p id="vysledek"></p>

Jak na AJAX 2: obsluha pomocí JavaScriptu

JavaScriptový kód, který se bude starat o obsluhu zpracování dat, je již o něco delší. Skládá se ze dvou funkcí, a to md5() a zpracuj(). První z funkcí je volána coby akce z HTML formuláře. Do proměnné string do ní přiřadíme obsah políčka ve formuláři. Následuje konstrukce podmínky if, ve které je potřeba ověřit, zda webový prohlížeč podporuje vlastnost XMLHttpRequest, nebo vlastnost ActiveXObject. Druhá jmenovaná se týká Internet Exploreru, s první metodou by vám v něm AJAX nefungoval.

Jestliže jde o jakýkoli jiný prohlížeč, než Internet Explorer, proběhne první část podmínky if, tedy vytvoří se nový objekt http_request voláním new XMLHttpRequest. Pokud uživatel na stránku kouká v Internet Exploreru, opět vytvoříme objekt http_request, ovšem voláním objektu technologie ActiveX.

Ve zbytku funkce md5() již pracujeme s vytvořeným objektem. Nejprve mu sdělíme, že změna jeho stavu bude řízena funkcí zpracuj(), jinými slovy zde říkáme, která funkce zajistí zpracování dat na pozadí. Následně zavoláme skript v PHP. Budeme do něj data odesílat formulářovou metodou POST. Nastavíme hlavičku a skriptu md5.hp odešleme připravená data v podobě proměnné request. Tu jsme na začátku naplnili řetězcem string= následovaným hodnotu z políčka ve formuláři.

JavaScriptová funkce md5() tedy vezme data z formuláře a odešle je skriptu md5.php ke zpracování. (Chcete-li názorněji, při použití metody GET by to odpovídalo zavolání adresy md5.php?string=obsah-policka.).

Funkci zpracuj() volá ta předchozí pro zpracování dat získaných volaným skriptem v PHP. Ten vypíše do svého výstupu nějaký text, v našem případě šifru MD5 pro zadaný řetězec. Ve funkci zpracuj() podmínkami if ošetříme, zda došlo ke zpracování skriptu a zda je zpracování dokončeno v pořádku (návratové kódy HTTP 4 a 200). V takovém případě přebereme výstup z objektu http_request a vložíme jej do HTML elementu s identifikátorem vysledek, tedy do odstavce pod formulářem. Pokud zpracování skončí jiným návratovým kódem, než 200, došlo k chybě a uživateli tak zobrazíme jednoduché hlášení o problému.

  

    function md5() {      
        var http_request = false;
        var string = document.getElementById('string').value;
        var request = "string="+string;

        if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
              http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (eror) {
              http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        http_request.onreadystatechange = function() { zpracuj(http_request); };
        http_request.open('POST', 'md5.php', true);
        http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        http_request.send(request);
   }

    function zpracuj(http_request) {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.getElementById('vysledek').innerHTML = http_request.responseText;            
            } else {
                alert('Chyba');
            }
        }
    }
  

Jak na AJAX 3: zpracování pomocí PHP

K dokončení příkladu nám zbývá ještě jednoduchý kód v PHP, který se postará o zpracování předaných dat a o vrácení výsledku. V našem příkladu je velmi jednoduchý. Nejprve ověří, zda byla metodou POST předána hodnota string a pokud ano, zobrazí příkazem echo její podobu v MD5.

<?
if ($_POST['string']){
        echo md5($_POST['string']);
}
?>

Výsledek

Kompletní ukázku jednoduchého zpracování dat pomocí AJAXu najdete níže ke stažení. Soubory nakopírujte do stejného adresáře na server, který podporuje spouštění skriptů v PHP a vyzkoušejte.