Γενικά μια ιστοσελίδα είναι ένα σύνολο html οδηγιών που στέλνει ο server στον browser του επισκέπτη όταν αυτός αιτείται να "δει" το περιεχόμενο της ιστοσελίδας αυτής. Η αποστολή των html οδηγιών γίνεται μια φορά και αφού αυτή ολοκληρωθεί η επικοινωνία server-browser κλείνει. Έτσι κάθε φορά που ο κάτοχος-δημιουργός-διαχειριστής της ιστοσελίδας κάνει αλλαγές στο περιεχόμενο της, οι αλλαγές αυτές δεν είναι άμεσα ορατές από τον επισκέπτη εκτός και αν αυτός ανανεώσει την ιστοσελίδα πατώντας το F5, οπότε και ξανα ανοίγει η επικοινωνία του browser με τον server παραλαμβάνοντας εκ νέου το ανανεωμένο περιεχόμενο.
Η χρήση της τεχνικής AJAX επιτρέπει σε μια ιστοσελίδα να ανανεώνεται ασύγχρονα (asynchronously) ανταλλάσοντας στο παρασκήνιο μικρού όγκου δεδομένα με τον server επιτρέποντας να ανανεώνονται μέρη της ιστοσελίδας (ένα div για παράδειγμα), χωρίς να ανανεώνεται ολόκληρη η σελίδα!
Η τεχνική AJAX χρησιμοποιείται πολύ συχνά σε σελίδες που περιέχουν φόρμες εγγραφής σε κάποια ιστοσελίδα ή forum. Είναι γνωστό ότι στις φόρμες αυτές πρέπει να επιλέξουμε ένα επιθυμητό username. Αν συμπληρώσατε ποτέ μια τέτοια φόρμα και είδατε να εμφανίζεται ένα μήνυμα προειδοποίησης ότι το username που πληκτρολογήσατε υπάρχει ήδη, χωρίς να ξαναφορτωθεί η σελίδα, τότε αυτή η σελίδα χρησιμοποιεί την τεχνική AJAX.
Επίσης το Facebook χρησιμοποιεί ευρέως την τεχνική αυτή σε διάφορα τμήματα της σελίδας, όπως για να εμφανίζει τα νέα posts των φίλων σας που σκρολάρουν συνεχώς στην λίστα επάνω δεξιά ή για να εμφανίσει τα σχόλια κάτω από τα posts σας.
Στο παρακάτω παράδειγμα κάθε φορά που ο επισκέπτης πληκτρολογεί έναν χαρακτήρα στο πεδίο κειμένου, ανοίγει - στο παρασκήνιο - η επικοινωνία του browser με τον server επιστρέφοντας (ο δεύτερος) το αποτέλεσμα το οποίο εμφανίζεται στο σημείο δίπλα απο τις λέξεις 'Διαθέσιμοι προορισμοί', χωρίς να ανανεώνεται ολόκληρη η σελίδα. Δοκιμάστε να πληκτρολογήσετε στο παρακάτω πεδίο κειμένου.
Αυτό που πρέπει να τονίσουμε στο παράδειγμα αυτό ώστε να γίνει κατανοητή η χρησιμότητα της τεχνικής AJAX είναι ότι αν ο διαχειριστής της σελίδας προσθέσει το όνομα μιας πόλης στην λίστα των διαθέσιμων προορισμών, τότε αυτή η πόλη (αυτή η νέα καταχώρηση) την ίδια στιγμή γίνεται άμεσα διαθέσιμη στον επισκέπτη και θα την εμφανίσει στον browser του χωρίς να χρειαστεί να ανανεώσει την σελίδα
Για να μπορέσετε να συνεχίσετε την Σειρά Μαθημάτων AJAX, θα πρέπει να γνωρίζετε HTML, CSS, XML και Javascript
Η χρήση της τεχνικής AJAX επιτρέπει σε μια ιστοσελίδα να ανανεώνεται ασύγχρονα (asynchronously) ανταλλάσοντας στο παρασκήνιο μικρού όγκου δεδομένα με τον server επιτρέποντας να ανανεώνονται μέρη της ιστοσελίδας (ένα div για παράδειγμα), χωρίς να ανανεώνεται ολόκληρη η σελίδα!
Η τεχνική AJAX χρησιμοποιείται πολύ συχνά σε σελίδες που περιέχουν φόρμες εγγραφής σε κάποια ιστοσελίδα ή forum. Είναι γνωστό ότι στις φόρμες αυτές πρέπει να επιλέξουμε ένα επιθυμητό username. Αν συμπληρώσατε ποτέ μια τέτοια φόρμα και είδατε να εμφανίζεται ένα μήνυμα προειδοποίησης ότι το username που πληκτρολογήσατε υπάρχει ήδη, χωρίς να ξαναφορτωθεί η σελίδα, τότε αυτή η σελίδα χρησιμοποιεί την τεχνική AJAX.
Επίσης το Facebook χρησιμοποιεί ευρέως την τεχνική αυτή σε διάφορα τμήματα της σελίδας, όπως για να εμφανίζει τα νέα posts των φίλων σας που σκρολάρουν συνεχώς στην λίστα επάνω δεξιά ή για να εμφανίσει τα σχόλια κάτω από τα posts σας.
Στο παρακάτω παράδειγμα κάθε φορά που ο επισκέπτης πληκτρολογεί έναν χαρακτήρα στο πεδίο κειμένου, ανοίγει - στο παρασκήνιο - η επικοινωνία του browser με τον server επιστρέφοντας (ο δεύτερος) το αποτέλεσμα το οποίο εμφανίζεται στο σημείο δίπλα απο τις λέξεις 'Διαθέσιμοι προορισμοί', χωρίς να ανανεώνεται ολόκληρη η σελίδα. Δοκιμάστε να πληκτρολογήσετε στο παρακάτω πεδίο κειμένου.
Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε
Διαθέσιμοι προορισμοί:
Για να μπορέσετε να συνεχίσετε την Σειρά Μαθημάτων AJAX, θα πρέπει να γνωρίζετε HTML, CSS, XML και Javascript
Τι ακριβώς όμως είναι η AJAX
Η AJAX δεν είναι γλώσσα προγραμματισμού όπως η JavaScript, αλλά ούτε και γλώσσα χαρακτηρισμού κειμένου όπως η HTML. Δεν θεωρείται καν γλώσσα. AJAX σημαίνει Asynchronous Javascript And XML και είναι η τεχνική με την οποία μπορούμε να δημιουργήσουμε πολύ πιο γρήγορες και δυναμικές ιστοσελίδες περιορίζοντας τον όγκο δεδομένων που ανταλλάσσει ο server με τον browser του επισκέπτη. Η ιδιαίτερη τεχνική αυτή επιτρέπει την ανανέωση περιεχομένων μιας ιστοσελίδας χωρίς αυτή να ανανεωθεί ολόκληρη.
Η υλοποίηση της τεχνικής AJAX γίνεται με τον συνδυασμό του αντικειμένου (object) XMLHttpRequest (πραγματοποιεί την ασύγχρονη επικοινωνία με τον server), την Javascript/DOM (αλληλεπιδρά με τα δεδομένα και τα εμφανίζει), την CSS (μορφοποιεί τα προς εμφάνιση δεδομένα) και την XML (συχνά χρησιμοποιείται για την μεταφορά δεδομένων).
Το παρακάτω σχεδιάγραμμα είναι απο την σελίδα w3schools.com
Η υλοποίηση της τεχνικής AJAX γίνεται με τον συνδυασμό του αντικειμένου (object) XMLHttpRequest (πραγματοποιεί την ασύγχρονη επικοινωνία με τον server), την Javascript/DOM (αλληλεπιδρά με τα δεδομένα και τα εμφανίζει), την CSS (μορφοποιεί τα προς εμφάνιση δεδομένα) και την XML (συχνά χρησιμοποιείται για την μεταφορά δεδομένων).
Το παρακάτω σχεδιάγραμμα είναι απο την σελίδα w3schools.com
Δείτε το script του παράδείγματος του παραπάνω παραφδείγματος
<head>
...
<script type="text/javascript">
function showHint(str) {
var xmlhttp;
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_towns.php?q="+str,true);
xmlhttp.send();
}
</script>
...
</head>
...
<script type="text/javascript">
function showHint(str) {
var xmlhttp;
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_towns.php?q="+str,true);
xmlhttp.send();
}
</script>
...
</head>
Δείτε τον κώδικα του get_towns.php
<?php
// Fill up array with names
$a[]="Athens";
$a[]="Thessaloniki";
$a[]="Piraeus";
...
$a[]="Hios";
$a[]="Volos";
//q parameter
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0) {
$hint=""
for($i=0; $i
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
}
else {
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "") {
$response="no results"
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
// Fill up array with names
$a[]="Athens";
$a[]="Thessaloniki";
$a[]="Piraeus";
...
$a[]="Hios";
$a[]="Volos";
//q parameter
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0) {
$hint=""
for($i=0; $i
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
}
else {
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "") {
$response="no results"
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Στις επόμενες ενότητες θα εξετάσουμε τμήμα-τμήμα τον κώδικα Javascript που δημιουργεί το αντικείμενο XMLHttpRequest και υλοποιεί την τεχνική AJAX
