AJAX (Asynchronous JavaScript and XML)

Στην ενότητα αυτή γίνεται παρουσίαση της τεχνολογίας AJAX.

Επίσης παρουσιάζονται αρκετά παραδείγματα τα οποία ξεκινάνε από πολύ απλές εφαρμογές και προχωράνε σε πιο σύνθετες.

Εισαγωγή στη Ajax

Η 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 διαφορετικές τιμές των οποίων τα ονόματα και οι αντίστοιχες αριθμητικές τιμές φαίνονται παρακάτω:

Στο παρακάτω παράδειγμα μπορείτε να δείτε τη χρήση της ιδιότητας 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>

Παράδειγμα 1

Στο παρακάτω παράδειγμα η κλήση στον σέρβερ γίνεται μετά από ένα συμβάν και συγκεκριμένα όταν γίνει κλικ στο κουμπί "Διάβασε δεδομένα".

<script>
		function getData() //καλείται μετά από κάποιο συμβάν
		{
			var xmlhttp=new XMLHttpRequest();
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					var data = xmlhttp.responseText;
					document.getElementById('myTxt').value=data;
				}
			}
			xmlhttp.open("GET", "info.txt", true);
			xmlhttp.send();
		}
	</script>

	<input type="text"></input>
	<button onClick="getData()">Διάβασε δεδομένα</button>

Επιτυχία!!!

Παράδειγμα 2

Στο παρακάτω παράδειγμα η κλήση στον σέρβερ γίνεται όταν φορτώσει το έγγραφο.

Επίσης, στο παράδειγμα αυτό η ajax καλεί από τον σερβερ ένα xml έγγραφο και συγκεκριμένα το products.xml.

<script>
		window.addEventListener('load', loadXMLDoc);
		function loadXMLDoc()
		{
			var xmlhttp=new XMLHttpRequest();
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					var xmldoc=xmlhttp.responseXML;
					var name=xmldoc.getElementsByTagName("name")[0].firstChild.nodeValue;
					var price=xmldoc.getElementsByTagName("price")[0].firstChild.nodeValue;
					document.getElementById('name').innerHTML=name;
					document.getElementById('price').innerHTML=price;
				}
			}
			xmlhttp.open("GET","products.xml");
			xmlhttp.send();
		}
	</script>
	<style>
		div span
		{
			padding:4px;
			background-color:#6FF;
		}
	</style>

	<body>
		<div><span id="name"></span> <span id="price"></span></div>
	</body>

Samsung 245

Επεξηγήσεις

  1. Τα δεδομένα είναι στο αρχείο products.xml.
  2. Χρησιμοποιούμε τη responseXML για να διαβάσουμε το xml αρχεία αντί της responseText.
  3. Επειδή το αντικείμενο που διαβάζουμε είναι ένα XML object, το διαχειριζόμαστε ως τέτοιο χρησιμοποιώντας τις DOM συναρτήσεις.

Παράδειγμα 3

Στο παρακάτω παράδειγμα η κλήση στον σέρβερ γίνεται όταν φορτώσει το έγγραφο.

Επίσης, στο παράδειγμα αυτό η ajax καλεί από τον σερβερ ένα json έγγραφο και συγκεκριμένα το info.json.

<html>
	<head>
		<title>Ajax example</title>
		<meta charset="utf-8" />
		<script>
			var xmlhttp=new XMLHttpRequest(); //Δημιουργία ενός στιμιοτύπου του αντικειμένου
			xmlhttp.onreadystatechange=function() { //Δήλωση συνάρτησης για το συμβάν onreadystatechange
				if(xmlhttp.readyState==4) { //έλεγχο για το readyState
					if(xmlhttp.status==200) { //έλεγχο για το status
						var data = xmlhttp.responseText;  //ανάγνωση δεδομένων
						var obj = JSON.parse(data); //πρέπει να γίνει parsed
						document.getElementById('fname').innerHTML=obj.fname;			
						document.getElementById('lname').innerHTML=obj.lname;			
						document.getElementById('year').innerHTML=obj.year;
						}
				}
			}
			xmlhttp.open("GET", "./info.json", true); //Σύνδεση με σερβερ για ανάγνωση του info.json
			xmlhttp.send(); // αποστολή αιτήματος
		</script>
	</head>
	<body>
		<div id="fname"></div>
		<div id="lname"></div>
		<div id="year"></div>
	</body>
	</html>

John
Brown
1980

Επεξηγήσεις

  1. Τα δεδομένα είναι στο αρχείο info.json.
  2. Επειδή το αντικείμενο που διαβάζουμε είναι ένα json αρχείο, πρέπει να το κάνουμε parse με την εντολή: JSON.parse().