AJAX primeri

AJAX primer očitavanja serverskog vremena

AJAX primer preuzimanja i objave serverskog vremena (kôd): datoteke primerXML.php, XMLpisiVreme.php u istom folderu

U datoteci XMLpisiVreme.php ispisuje se XML izvestaj očitanog serverskog vremena Podsetite se funkcije header


<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?><sat><vremesada>" .date('H:i:s')."</vremesada></sat>";
?>

U datoteci primerXML.php se nalazi AJAX kôd za asinhronu komunikaciju preko HTTPa

<html>
<head>
<title>Ajax primer sa XML ispisom</title>
<style>
.prikazOkvir {
width:300px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font:24px normal verdana, helvetica, arial, sans-serif;
}
</style>
<script language="JavaScript" type="text/javascript">
function kreirajXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    }
  }
}
return req;
}

var http = kreirajXMLHTTPRequest();

function dajServerVreme() {
  var staSeKuca = 'XMLpisiVreme.php';
  myRand = parseInt(Math.random()*999999999999999);
  var tekuciURL = staSeKuca+"?rand="+myRand;
  http.open("GET", tekuciURL, true);
  http.onreadystatechange = obradiHttpResponse;
  http.send(null);
}

function obradiHttpResponse() {
   if (http.readyState == 4) {
    if(http.status == 200) {
       var vremeTekuce = http.responseXML.getElementsByTagName("vremesada")[0];
       document.getElementById('vremePrikaz').innerHTML = vremeTekuce.childNodes[0].nodeValue;
    }
  } else {
  document.getElementById('vremePrikaz').innerHTML = '<img src="cekaj.gif">';
  }
}
</script>
</head>
<body style="background-color:#cccccc" onLoad="dajServerVreme()">

<h1 align="center">Ajax primer sa XML ispisom</h1>
<h2> Koliko je sati? (preuzeti serversko vreme bez osvezavanja Web stranice)</h2>
<form>
<input type="button" value="Serversko vreme" onClick="dajServerVreme()">
</form>
<div id="vremePrikaz" class="prikazOkvir"></div>
<p>
<img src="http://poincare.matf.bg.ac.rs/~jelenagr//uwit/zadaci2/grb.gif">

</body>
</html>

Pristup podacima koji su vraceni sa servera omogucava se uz pomoc dva svojstva XMLHttpRequest objekta: Response Text ili ResponseXML. Atribut Response Text vraca podatak u string formatu. Medjutim, mnogo vece mogucnosti pruzaju podaci u XML obliku koje obezbedjuje atribut ResponseXML.
XMLHttpRequest objekat ima i svojstvo status. To je numericka vrednost vracena sa servera, kao sto je 404 za Not Found ili 200 za OK.
Problem sa kesiranjem stranica:
Skoro svi browser- i odrzavaju takozvani keš posecenih stranica - lokalnu kopiju sadrzaja stranice skladistene na hard disku browser-ovog kompjutera. Kada se zahteva ta stranica, browser prvo pokusava da je procita iz njenog keša, a tek kasnije salje novi HTTP zahtev. Ovo je posebno znacajan problem sa Inernet Explorer- om. Iako, pomenuto keširanje moze izgledati kao prednost u kontekstu brzine ucitavanja stranica, kod pisanja AJAX aplikacija nastaje poteskoca. AJAX kontaktira sa serverom, ne cita podatke iz keša. Kada se kreira asinhroni zahtev ka serveru, svaki put mora biti formiran nov HTTP zahtev. U slucaju GET metode, u zahtevu se na kraju dodaje jos jedan parametar. Ako jedan deo URL zahteva svaki put generise drugu vrednost, to "zavara" browser, tako da svaki put salje HTTP zahtev na drugu adresu, a ne poziva keširanu stranicu. Koristi se Math objekat i njegova funkcija random(). Kod PUT metode ovaj problem ne postoji.

Nastavak 3