☰

Εισαγωγή AJAX (Asynchronous JavaScript and XML)

Η ajax δεν είναι μια νέα τεχνολογία ή μια νέα γλώσσα προγραμματισμού αλλά ένα εργαλείο, μια τεχνική που βασίζεται στο αντικείμενο XMLHttpRequest και στη γλώσσα javascript. Σε συνδυασμό με την XML (και τελευταία χρόνια με το αντικείμενο JSON) μπορεί να γίνει πιο ισχυρή.

Με την ajax μπορεί πλέον ο προγραμματιστής να έχει μια σελίδα φορτωμένη στο πρόγραμμα περιήγησης και να την ενημερώνει με δεδομένα χωρίς να χρειάζεται να ξαναφορτώνει από την αρχή όλη τη σελίδα.

Φανταστείτε για παράδειγμα μια σελίδα η οποία εμφανίζει τα αποτελέσματα αγώνων ποδοσφαίρου. Κάθε φορά που πρέπει να γίνει μια ενημέρωση με τα αποτελέσματα δεν χρειάζεται να ξανακατεβαίνει όλη η σελίδα αλλά μόνο εκείνα τα δεδομένα που χρειάζονται ενημέρωση.

Τα δεδομένα που παίρνει η ajax βρίσκονται στον σέρβερ και μπορεί να είναι αποθηκευμένα σε ένα αρχείο κειμένου (text file), σε ένα αρχείο xml, σε ένα αρχείο JSON ή σε μια βάση δεδομένων.

Αν τα δεδομένα βρίσκονται σε μια βάση δεδομένων, τότε η ajax καλεί ένα αρχείο php ή asp ή όποιο άλλο σκριπτ τρέχει στον σέρβερ το οποίο (με ένα κατάλληλο sql ερώτημα) ανακτά τα δεδομένα από τη βάση και τα επιστρέφει στον χρήστη (browser).

Το αντικείμενο XMLHttpRequest

Το αντικείμενο XMLHttpRequest είναι ένα αντικείμενο που υποστηρρίζει η javascript και το οποίο προσφέρει όλες τις συναρτήσεις (functions), χαρακτηριστικά (properties) και συμβάντα (events) για τη σωστή λειτουργία μιας εφαρμογής ajax.

Το αντικείμενο XMLHttpRequest αρχικά δημιουργήθηκε και χρησιμοποιήθηκε από την MicroSoft αργότερα όμως και μετά την ευρεία χρήση από την Google το αντικείμενο πέρασε στην υποστήριξη της W3C.

Παράδειγμα

Στο παρακάτω παράδειγμα γίνεται επίδειξη ενός μίνιμαλ σκριπτ με τις απαραίτητες σημειώσεις.

<div id="myDiv">Δεδομένα</div>
<script>
	var xmlhttp=new XMLHttpRequest(); //Δημιουργία ενός στιμιοτύπου του αντικειμένου
	xmlhttp.onreadystatechange=function() //Δήλωση συνάρτησης για το συμβάν onreadystatechange
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200) //έλεγχοι πριν την απόκριση
		{
			var data = xmlhttp.responseText;  //ανάγνωση δεδομένων
			document.getElementById('myDiv').innerHTML=data; //χρήση των δεδομένων
		}
	}
	xmlhttp.open("GET", "info.txt", true); //Σύνδεση με σερβερ για ανάγνωση του info.txt
	xmlhttp.send(); // αποστολή αιτήματος
</script>

Επιτυχία!!!

Επεξηγήσεις

1. Αρχικά δημιουργείται ένα στιγμιότυπο του XMLHttpRequest που αποθηκεύεται στη μεταβλητή xmlhttp
2. Στη συνέχεια δηλώνεται η συνάρτηση που θα κληθεί όταν αλλάξει η κατάσταση του στιγμιότυπου.
3. Όταν κληθεί η συνάρτηση και γίνουν οι σχετικοί έλεγχοι είμαστε έτοιμοι να διαβάσουμε τα δεδομένα.
   Για να διαβάσουμε τα δεδομένα χρησιμοποιούμε την ιδιότητα responseText ή responseXML.
4. Αφού διαβάσουμε τα δεδομένα μπορούμε να τα χρησιμοποιήσουμε όπως θέλουμε με απλή javascript.
   Στο συγκεκριμένο παράδειγμα τα δεδομένα είναι το κείμενο "Επιτυχία!!!" που είναι αποθηκευμένο στο αρχείο "info.txt" και τα δεδομένα αυτά περνάνε στον div με id="myDiv".
5. Η συνάρτηση open() κάνει τη σύνδεση με τον σερβερ. Η παράμετρος "GET" δηλώνει τη μέθοδο, Η παράμετρος "info.txt" δηλώνει το αρχείο που καλείται από τον σέρβερ και η παράμετρος true δηλώνει ότι η επικοινωνία είναι ασύγχρονη.
6. Τέλος η συνάρτηση send() στέλνει το αίτημα στον σέρβερ.

Καταστάσεις (states)

Το αντικείμενο XMLHttpRequest περιέχει την ιδιότητα (attribute) readyState και η οποία μπορεί να έχει 5 διαφορετικές τιμές των οποίων τα ονόματα και οι αντίστοιχες αριθμητικές τιμές φαίνονται παρακάτω:

• UNSENT = 0
• OPENED = 1
• HEADERS_RECEIVED = 2
• LOADING = 3
• DONE = 4

Στο παρακάτω παράδειγμα μπορείτε να δείτε τη χρήση της ιδιότητας readyState.

<script>
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) { // ή xmlhttp.readyState == xmlhttp.DONE
         if(xmlhttp.status == 200) {
            var data = xmlhttp.responseText;
         }
      }
   }
   xmlhttp.open("GET", "./info.txt", true);
   xmlhttp.send();
</script>