XMLHttpRequest - početak

[bluesman]

Za sve one koji su razmišljali da počnu da koriste XMLHttpRequest, evo kratkog uputstva. To je ono što se "fensi" zove AJAX, znači asinhrono izvršavanje http request (POST ili GET) - najprostijim renikom učitavanje sadržaja bez reloadovanje strane.

Inicijalizacija objekta se vrši u zavisnosti od browsera i verzije_

<script type="text/javascript">
var xmlhttp = false;   // xmlHTTP objekat

/* --------------------------------------
JScript omogućava uslovnu kompilaciju, proverava se verzija jscript-a.
 -------------------------------------- */

/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
catch (e)
    {
    try {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    catch (E)
        {
        alert("Microsofts XML parsers nedostupan");
        }
    }
@else
    alert("Morate imati noviju verziju JScript-a.");
@end @*/

if (!xmlhttp)
    {
    try {
        xmlhttp = new XMLHttpRequest();
        }
    catch (e)
        {
        alert("Vaš browser ne podržava XMLHttpRequest objekat.")
        }
    }
</script>

XMLHttpRequest radi u sledećim browserima: Mozilla 0.9.5, IE5 +, Opera 8 (za ostale ne znam)

Šta sad sa ovim? Treba nam funkcija koja će da izvršava request:

<script type="text/javascript">
function openHttp (url)
{
if (xmlhttp)
    {
    xmlhttp.open("GET", url,true);
    xmlhttp.onreadystatechange = UpdateContent;
    xmlhttp.send(null);
    }
}

function UpdateContent ()
{
if (xmlhttp.readyState == 4)
    {
    document.getElementById('content').innerHTML = xmlhttp.responseText;
    }
}
</script>

funkcija UpdateContent je u stvari handler koji ažurira sadržaj kada se izvrši request. U načem slučaju upisuje sve što se vraća u DIV id 'content'

Znači treba nam:

<div id="content"></div>

Kao i link:

<a href='javascript:openHttp ("test.html");'>test</a>

Naravno, trebaće vam i fajl "test.html" koji se učitava.

Ovo je jednostavan primer, moguće je proveravati i status request-a, pročitati ceo header i još mnogo drugih stvari.