Τρίτη 2 Δεκεμβρίου 2008

Ajax εύκολα και γρήγορα [Μέρος 1:Ενημέρωση περιεχομένου]

Τι είναι AJAX
AJAX = Asynchronous JavaScript And XML ή στα ελληνικά AJAX = Ασύγχρονη JavaScript και XML
Είναι μια τεχνική που χρησιμοποιείται ώστε να στέλνονται HTTP Requests μέσω JavaScript ώστε να είναι διαφανής ο τρόπος με τον οποίο αντλούνται οι πληροφορίες από τον server.

Παράδειγμα χρήσης


<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}

txt="<table border="'1'">";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;

}
</script>
</head>
<body>
<div id="copy">
<button onclick="loadXMLDoc('cd.xml')">Get CD info</button>
</div>
</body>
</html>


Όπου το cds.xml θα ειναι ένα αρχείο xml της ακολουθης μορφής
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
</catalog>
Επεξήγηση παραδείγματος
Το συγκεκριμένο παράδειγμα διαβάζει το αρχείο xml και παρουσιάζει τα δεδομένα υπό την μορφή πίνακα, ο οποίος έχει φτιαχτεί με JavaScript. Αυτό το XML θα μπορουσε να δημιουργείται και δυναμικά και να περιέχει ολόκληρη την πληροφορία που χρειάζεται ώστε να ενημερωθεί η οθόνη του χρήστη.

Σημειωση
Στην περίπτωση που σας ενδιαφέρει να μαθεται για το πως να αξιοποιήσετε το Ajax ή να σας γίνει καλύτερα κατανοητό το τι ειναι σας προτείνω να επισκεφτείτε το Coder.gr αλλα και το w3scools.com ή να αφήσετε κάποιο σχολιο ώστε να επεκτείνω την συγκεκριμένη αναρτηση!

LinkWithin

Blog Widget by LinkWithin

Mobile edition