Σάββατο 6 Δεκεμβρίου 2008

Ajax εύκολα και γρήγορα [Μέρος 2:Ενημέρωση κώδικα]

Στην προηγούμενη αναρτηση μου "Ajax εύκολα και γρήγορα" είχα παρουσιάσει μια από τις διάφορες μορφές που μπορεί να χρησιμοποιηθεί η τεχνική αυτή. Είχα παρουσιασει την μεταφορά πληροφορίας μέσω XML και αναπαραστασή της μέσω ενός πίνακα που δημιουργούσα δυναμικά μέσω JavaScript.
Πολλές φορές όμως το κομμάτι HTML που θέλουμε για την αναπαράσταση της πληροφορίας μπορεί να ειναι πιο περίπλοκο, οπότε προτιμάμε να το έχουμε έτοιμο από την μεριά του server. Οπότε ο server επιστρέφει ένα έτοιμο κομματι HTML κι εμεις απλά το τοποθετούμαι με χρήση JavaScript στο καταλληλο σημείο.
Το παραδειγμα της προηγούμενης αναρτησης θα μπορούσε να γραφτει ως εξής με αυτή την μεθοδολογία.

<html>
<head> 
<script type="text/javascript"> 
var xmlhttp; 
function loadHTMLDoc(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=xmlhttp.responseText;
document.getElementById('copy').innerHTML=txt; 
}
</script>
</head> 
<body> 
<div id="copy"> 
<button onclick="loadHTMLDoc('cd.html')">
Get CD info
</button>
</div>
</body> 
</html>  
Όπου το cds.html θα ειναι ένα αρχείο xml της ακολουθης μορφής
<table border="'1'">
<tr>
<td>Empire Burlesque</td>
<td>ob Dylanlt;/td>
</tr>
<tr>
<td>Hide your heart</td>
<td>Bonnie Tyler;/td>
</tr>
</table>

LinkWithin

Blog Widget by LinkWithin

Mobile edition