XMLHttpRequest objekt
XMLHttpRequest objekt võimaldab suhelda serveriga pärast seda kui lehekülg on alla laetud.
XMLHttpRequest objekti abil saab:
- Värskendada (update) veebilehe datat ilma lehte uuesti laadimata
- Teha päringuid serverist data kohta, pärast seda kui leht on alla laetud
- Saada datat serverist pärast seda kui leht on alla laetud
- Saata tausta-datat serverisse
Näide:
XMLHttpRequest saab luua ühe ainsa JavaScript'i reaga:
var xmlhttp=new XMLHttpRequest()
Ülal toodud koodi toetavad kõik uuemad brauserid (kaasaarvatud IE7).
IE5 ja 6 kasutavad sellist kirjaviisi:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP",)
Näide:
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// kood uutele brauseritele
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// kood IE5 ja IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Sinu brauser ei toeta XMLHTTP'i.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...sinu kood tuleb siia...
}
else
{
alert("Probleem XML dada saamisega");
}
}
}
</script>
Proovi ise, kasutades JavaScript'i
Pane tähele: "onreadystatechange" on sündmuse käivitaja. Väärtus (state_Change) on funktsiooni nimi mis käivitub siis kui XMLHttpRequest objekti olek muutub. Oleku algväärtus on 0 (algväärtuseta) kuni 4 (lõplik). Ainult siis kui olek =4, saad koodi käivitada.
Lausungis "xmlhttp.open()" kasutatakse kolmanda parameetrina "true".
See parameeter määrab kas päringut käsitletakse asünkroonselt.
"true" tähendab, et skript, pärast send() meetodit, töötab edasi ootamata serveri poolset vastust.
"onreadystatechange" sündmus muudab koodi keeruliseks kuid samas välditakse niimoodi koodi seiskumist kui server ei vasta.
Määrates parameetri "false", väldime lisa "onreadystatechange" koodi. Kasutatakse siis kui pole oluline käivitada ülejäänud koodi, pärast päringu ebaõnnestumist.
Proovi ise, kasutades JavaScript'i kuhu on lisatud atribuut "false"
Veel näiteid
Laeme teksti-faili div elementi kasutades XML HTTP'd
Saadame päringu faili ressursi kohta, kasutades XML HTTP'd
Päring viimste uuenduste kohta, kasutades XML HTTP'd
Kuva XML fail Html tabelina
