☰

Παράδειγμα 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

Επεξηγήσεις

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