Skratka AJAX znamená Asynchronous JavaScript And XML. Preslávil sa v roku 2005 na podnet spoločnosti Google. V celku nejde o žiadnu novú technológiu, je to spojenie viacerých technológií pre tvorbu lepších webových aplikácií. Ako už naznačuje názov používa sa
Najčastejšie sa Ajax používa ako odpoveď na reakcie používateľa. Ak používateľ spôsobí nejakú udalosť, vytvorí sa XMLHttpRequest objekt, ktorý sa následne odosiela na server metódou GET alebo POST.
Server spracuje HTTP požiadavku, vygeneruje odpoveď, a odosiela odpoveď späť klientskú stranu
Klient následne spracuje nové dáta použitím JavaScritpu (Nahradenie obsahu stránky, zobrazenie informácie používateľovi, atď.).
Priebeh komunikácie musí byť vždy v tomto poradí. Nie je možné, aby server ľubovoľne odosielal správy na stranu klienta.
<script type="text/javascript">
function doAjax(){
var httpreqest;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
httpreqest=new XMLHttpRequest();
} else {
// IE6, IE5
httpreqest=new ActiveXObject("Microsoft.XMLHTTP");
}
httpreqest.onreadystatechange = function(){
//funkcia kde prebieha komunikácia so servrom
};
var url = "http://server.url";
httpreqest.open("GET", url, true);
httpreqest.send();
}
</script>
<script type="text/javascript">
function doAjax(){
var httpreqest;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
httpreqest=new XMLHttpRequest();
} else {
// IE6, IE5
httpreqest=new ActiveXObject("Microsoft.XMLHTTP");
}
httpreqest.onreadystatechange = function(){
//funkcia kde prebieha komunikácia so servrom
};
var url = "http://server.url";
httpreqest.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpreqest.send("user=Vlado&message=cavte");
}
</script>
Ak výsledok odpovede je text, odpoveď je v premennej responseText
. V responseXML
sa bude nachádzať odpoveď, ak ide o XML odpoveď.
Počas komunikácie so servrom sa funkcia onreadystatechange volá vždy keď nastane možnosť:
readyState
.
Aj keď požiadavka skončí úspešne, môže nastať viacero statusov:
status
.
httpreqest.onreadystatechange=function(){
if (httpreqest.readyState==4 && httpreqest.status==200){
// požiadavka úspešne ukončená: readyState==4
// Odpoveď je v poriadku: status==200
var odpoved = xmlhttp.responseText;
}
}
Prostredníctvom Ajaxu a Javascriptu získajte informácie o servri. Skúste zobraziť obsah stránky:
Vytvorte jednoduché rozhranie pre chat. Súbory pre server si môžete stiahnúť na adrese: