Primer 71

AJAX osnove

Izvorna koda HTML:		Rezultat izvedbe kode HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="windows-1250" /> <script type="text/javascript"> var vic=1; var xmlHttp; // vzpostavljanje XMLHttp objekta function vzpostaviXmlHttpObjekt() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } } return xmlHttp; } // konec vzpostaviXmlHttpObjekt() function naloziHTML() { // določanje naslednjega vica if (vic<3) vic++; else vic=1; var url="http://chp.uni-mb.si/milan/rain/Vic"+vic+".htm"; // vzpostavljanje XMLHttp objekta xmlHttp = vzpostaviXmlHttpObjekt(); if (xmlHttp == null) { alert ('Brskalnik ne podpira HTTP zahtevkov') return } xmlHttp.onreadystatechange = stanjeSpremenjeno; xmlHttp.open('GET', url, true); xmlHttp.send(null); } // naloziHTML() // obdelava, vsebine, ko jo xmlHttp objekt vrne function stanjeSpremenjeno() { if (xmlHttp.readyState == 4 \|\| xmlHttp.readyState == 'complete') { document.getElementById('vic').innerHTML=xmlHttp.responseText; } } // konec stanjeSpremenjeno() </script> </head> <body onload="naloziHTML()"> <h1>Demonstracija delovanja AJAX-a</h1> <div id="vic" ></div> <button onclick="naloziHTML()">Naloži nov vic</button> </body> </html>