Ajax (informatika)
AJAX (Asynchronous JavaScript + XML) je súhrnné označenie pre technológie vývoja interaktívnych webových aplikácií, ktoré umožňujú meniť obsah stránok bez potreby ich kompletného znovunačítania zo servera. V porovnaní s klasickými webovými aplikáciami môžu AJAX-ové aplikácie pri vhodnom návrhu poskytovať používateľsky komfortnejšíe prostredie, vyžadujú však použitie moderných webových prehliadačov.
Používané technológie
AJAX nie je samostatný programovací jazyk ani technológia sama o sebe. Je to kombinácia nasledovných prvkov (nie nevyhnutne všetkých):
- HTML a CSS pre značkovanie a štýlovanie informácií pri zobrazení.
- DOM spojený s JavaScriptom pre dynamické zobrazenie a interakciu s prezentovanou informáciou.
- Metóda pre výmenu dát medzi prehliadačom a serverom, bez nutnosti obnovovať zobrazovanú stránku. Najčastejšie sa používa XMLHttpRequest (XHR) objekt. Niekedy je použitý IFrame objekt alebo dynamicky pridaný
<script>tag. - formát pre dáta poslané prehliadaču. Bežné formáty zahŕňajú XML, predformátované HTML, plain text a JavaScript Object Notation (JSON). Tieto dáta môžu byť dynamicky vytvorené skriptom na strane serveru.
Aplikácia technológie AJAX
Príklad použitia asynchrónnej žiadosti na server metódou POST.
AjaxJS.js
// Vytvoríme XMLHttpRequest objekt na vykonanie AJAX žiadosti.
if(window.XMLHttpRequest)
{
var xmlhttp = new XMLHttpRequest();
}
else
{
var xmlhttp = new ActiveXObject("MICROSOFT.XMLHTTP");
}
// Pomocou udalosti onreadystatechange a analýzou stavových kódov (4- žiadosť je vykonaná a odpoveď je pripravená, 200- všetko prebehlo v poriadku) spracujeme asynchrónny dopyt.
xmlhttp.onreadystatechange = function()
{
if((xmlhttp.readyState == 4 && xmlhttp.status == 200))
{
var result = xmlhttp.responseText; // Premenná result nadobúda hodnotu dát odoslaných serverom vo forme reťazca.
console.log(result);
}
}
xmlhttp.open('POST','AjaxPHP.php',true); // Definujeme cieľový .php súbor a HTTP metódu (GET alebo POST).
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // Do AJAX žiadosti pridáme header (iba v prípade metódy POST).'Content-type' reprezentuje typ štruktúry tela dopytu (MIME) a sekundárny parameter určuje formát odosielania dát (name/value pairs).
xmlhttp.send("fname=John&lname=Doe"); // Odošleme dáta serveru.
AjaxPHP.php
// Server spracuje prijaté dáta a odošle ich naspäť do dokumentu.
$fname = $_POST['fname'];
$lname = $_POST['lname'];
echo 'Hello '.$fname.' '.$lname.'.';
Výsledkom je textový output v konzole:
"Hello John Doe."
Je nutné dodať, že ide iba o príklad. Odoslanie dát serveru, ktorý ich prakticky nepozmenené vráti dokumentu, v praxi nemá veľké využitie. Oveľa častejšie sa technológia AJAX používa na dynamické pozmenenie údajov v databáze.