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.