Úvod do technológie Ajax

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

Komunikáciou Ajaxu so servrom sa dosahuje Pri zlom navrhnutí použitia Ajax vznikajú vo webových aplikáciách bezpečnostné diery čo úplne znevýhodňuje používanie AJAX technológie.

1. Ako AJAX pracuje

1.1 Udalosť v prehliadači

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.

1.2 Spracovanie servrom

Server spracuje HTTP požiadavku, vygeneruje odpoveď, a odosiela odpoveď späť klientskú stranu

1.3 Spracovanie klientom

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.

2. Príklady

2.1 GET metóda


<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>
	

2.2 POST metóda


<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>
	

3. Spracovávanie odpovede

3.1 Výsledok požiadavky

Ak výsledok odpovede je text, odpoveď je v premennej responseText. V responseXML sa bude nachádzať odpoveď, ak ide o XML odpoveď.

3.2 Priebeh komunikácie so servrom

Počas komunikácie so servrom sa funkcia onreadystatechange volá vždy keď nastane možnosť:

Číslo o tomto stave je uložené v premennej readyState.

3.3 Odpovede protokolu HTTP 1.0

Aj keď požiadavka skončí úspešne, môže nastať viacero statusov:

Číslo tohto stavu je uložené v premennej 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;
	}
}	
	

4. Úlohy

4.1 Server Info

Prostredníctvom Ajaxu a Javascriptu získajte informácie o servri. Skúste zobraziť obsah stránky:

http://s.ics.upjs.sk/~vchabal/sps/serverinfo.php

4.2 Chat

Vytvorte jednoduché rozhranie pre chat. Súbory pre server si môžete stiahnúť na adrese:

http://s.ics.upjs.sk/~vchabal/sps/chat.zip