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></script> i 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.

Napomena: Morao sam da razdvojim znakove jednakosti “” jer ih WordPress iz nekog razloga ne prikazuje kada su spojeni. Oni moraju biti spojeni.

This entry was posted on Friday, June 17th, 2005 at 12:17 pm and is filed under Web Development, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.