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.
Iné projekty
Kategória:World Wide Web Kategória:Programovanie