Asynchronous Javascript And XML (AJAX) Γιώργος Θάνος Παρασκευή 21 Νοεμβρίου 2008

Εισαγωγή (1/2)  Όταν πρωτοεμφανίστηκε η Javascript οι κατασκευαστές web εφαρμογών ήταν ενθουσιασμένοι διότι μπορούσαν συγκεκριμένες λειτουργίες να τρέχουν τοπικά γρήγορα στον browser.  Στις περιπτώσεις όμως που απαιτούνταν η διεπαφή με τον Server υπήρχε το μειονέκτημα ότι απαιτούνταν να φορτωθεί το σύνολο της HTML σελίδας, πράγμα που καθιστούσε την διεπαφή αργή για χρήσεις που απαιτούν γρήγορη αποκρισιμότητα. Διαφάνεια 2

Εισαγωγή (2/2)  Επιμέρους προσπάθειες ώστε να φορτώνεται μόνο το τμήμα της σελίδας που ενδιαφέρει έγιναν από πολλούς κατασκευαστές πλοηγών από τα μέσα τις προηγούμενης δεκαετίας.  To 1999 η Microsoft όρισε το αντικείμενο XMLHTTPRequest ως ActiveX control για τον Internet Exploer 5.  Σύντομα ακολούθησαν Mozilla και Safari με αντίστοιχες υλοποιήσεις.  Τον Απρίλιο του 2006 το W3C εξέδωσε την πρώτη έκδοση ενός draft σε μία προσπάθεια δημιουργίας ενός web standard. Διαφάνεια 3

Τι ονομάζουμε AJAX;  Είναι η τεχνική ανταλλαγής πληροφορίας με τον server μέσω HTTP χωρίς να φορτωθεί το σύνολο της web σελίδας, αλλά μόνο το τμήμα του κώδικα που ενδιαφέρει.  Ο στόχος είναι η μέγιστη αποκρισιμότητα, με δεδομένο ότι η πληροφορία που ανταλλάσσεται είναι σχετικά περιορισμένου μεγέθους.  Ο χρήστης δεν αλληλεπιδρά πατώντας κάποιο submit button. Αντίθετα, σε κάθε καταχώρηση του χρήστη ( π. χ. σε μία φόρμα ) η πληροφορία που καταχωρεί ελέγχεται και επιστρέφεται πίσω στον server. Διαφάνεια 4

Παράδειγμα (1/4)  Ας υποθέσουμε ότι έχουμε την παρακάτω απλή web φόρμα.  Που είναι το εικονίδιο submit; Πηγή : Διαφάνεια 5

Παράδειγμα (2/3) Πηγή : Διαφάνεια 6

Παράδειγμα (3/3)  Στη συνάρτηση ajaxFunction() προσθέτω τον κώδικα : Πηγή : Διαφάνεια 7

Πως μπορούμε να κάνουμε τον κώδικα περισσότερο ευανάγνωστο ; Διαφάνεια 8 function createAjaxObject() { var xmlhttp; try { var xmlhttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer Browsers try { xmlhttp= new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // Something went wrong alert("Your browser broke!"); return false; } } return xmlhttp; } var ajaxObject ; function ajaxFunction() { ajaxObject = createAjaxObject(); ajaxObject.onreadystatechange=adustTimeFunction; ajaxObject.open("GET", "serverTime.php", true); ajaxOject.send(null); } function adustTimeFunction() { if(ajaxObject.readyState == 4) { document.myForm.time.value =ajaxObject.responseText; } }  Για την εφαρμογή του παραδείγματος μπορείτε να χρησιμοποιήσετε το πλήρες URL: