Don’t hate the media - become the media

XMLHttpRequest ? AJAX ? Stara tehnologija - novo ime Hoćete da probate? Bar dvadesetak ljudi me pitalo da napišem primer nekog koda. Evo jednog prostog primera: http://www.devprotalk.com/showthread.php?t=53

Napredniji primer možete pogledati ovde:

Prvo definišemo jednu varijablu, čisto da stvari budu jasnije
var LOAD_COMPLETE = 4;

Kreiramo http objekat u zavisnosti od browsera. Internet Explorer ima mogućnost da čita “conditional compile”, odnosno da se izvrši deo koda na osnovu definisanih uslova (prostije: microsoft-ov jscript). Za one koji se nikadan isu bavili naprednijim programiranjem verovatno je zbunjujuće ono “try - catch”, to su u stvari exceptions, jednostavno izvršava se ono što stavite pod “try” a ako dođe do neke greške, izvrši se kod iza “catch”. Može ovo i drugačije da se napiše, ali je ovako “programerskije”

function getHTTPObject()
{
	var xmlhttp;
/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject(\"Msxml2.XMLHTTP\");
		}
		catch (e)
		{
			try
			{
				xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
			}
			catch (E)
			{
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
@end @*/
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
	{
		try {
			xmlhttp = new XMLHttpRequest();
		} catch (e) { xmlhttp = false; }
	}
	return xmlhttp;
}

XMLHttpObject kreiramo sa:

var httpObj = getHTTPObject();

Zatim kreiramo funkciju koja ća da učitava neki url, i ako je uspešno učitano, onda se izvršava funkcija koja će učitani sadržaj da prikaže na određenom mestu (handleHttpObj), obično u nekom DIV-u:

---

function receiveDoc(url)
{
	if (url == '')
	{
		alert ('please enter url');
		return false;
	}
	if (httpObj.readyState == LOAD_COMPLETE || httpObj.readyState == 0)
	{
	  	httpObj.open('GET', url, true);
    	        httpObj.onreadystatechange = handleHttpObj;
	  	httpObj.send(null);
	}
}

---

Učitava se reply servera i sa njim radimo šta želimo, u ovom primeru ćemo dobijeni sadržaj jednostavno prikazati u nekom DIV-u koji nosi id “feed”. U ovom primeru takođe učitavamo i header (getAllResponseHeaders()) i možemo zbog debugg-ovanja i njega da prikažemo u nekom DIV-u (u ovom slučaju “hdr”).

---

function handleHttpObj()
{
	if (httpObj.readyState == LOAD_COMPLETE)
	{
		result = httpObj.responseText;
		header = httpObj.getAllResponseHeaders();
	
		if (httpObj.status == 404)
		{
			alert (\"Ih, bre. Nema tog dokumenta\");
		}
		else if (httpObj.status == 200)
		{
			ref = document.getElementById(\"feed\");
			ref.innerHTML = result;
			h = document.getElementById(\"hdr\");
			h.innerHTML = header;
		}
		else {
			alert ('Status '+httpObj.status+\" ne umem da prepoznam\");
		}
	}
}

---

Naravno ovo sve mora da se nađe između <script> i </script> jer je u pitanju JavaScript.

Kreiramo jednostavnu stranu:

---

<a href='#' onclick=''receiveDoc('test1.html'); return false;''>test1</a> -
<a href='#' onclick=''receiveDoc('test2.txt'); return false;''>test2</a> -
<a href='#' onclick=''receiveDoc('test.xml'); return false;''>xml</a> -
<a href='#' onclick=''receiveDoc('http://www.google.com/'); return false;''>google</a> -
<div id='hdr' style=''float:right: width:30%''></div>
<div id='feed' style=''width:65%;''></div>

---

Probajte, jednostavnije je nego što se čini na prvi pogled.

Ovaj tekst je napisan Friday, June 17th, 2005, 12:17 u kategoriji Web Development, Javascript. Možete da pratite komentare na ovak tekst preko RSS 2.0 feed-a. Možete ostaviti odgovor, ili trackback sa vešeg sajta.