Εφαρµογές και Περιβάλλοντα Εργασίας AJAX Θεόδωρος Χ. Κασκάλης Αναπληρωτής Καθηγητής Πανεπιστήµιο υτικής Μακεδονίας
Εισαγωγή AJAX σηµαίνει: Asynchronous JavaScript and XML Ορισµός Wikipedia: Το AJAX, είναι µια τεχνική ανάπτυξης αλληλεπιδραστικών δικτυακών σελίδων/εφαρµογών. Η σκοπιµότητά του έγκειται στη δηµιουργία της αίσθησης µεγαλύτερης ανταπόκρισης από τις ιστοσελίδες, µέσω της ανταλλαγής µικρών τµηµάτων δεδοµένων µε το διακοµιστή, διαφανώς και χωρίς να απαιτείται η πλήρης επαναφόρτωση της σελίδας. Τελικός στόχος είναι η βελτίωση της αλληλεπίδρασης, της ταχύτητας, της λειτουργικότητας και της χρηστικότητας.
Προβλήµατα ιστοσελίδων Οι απλές ιστοσελίδες πάντα κάνουν RELOAD ενώ θα έπρεπε να κάνουν UPDATE Οι χρήστες περιµένουν την επαναφόρτωση της σελίδας όταν το µόνο που άλλαξε είναι ίσως ένα µικρό τµήµα της Επιτρέπονται µόνο µεµονωµένες αιτήσεις/ απαντήσεις
Παραδείγµατα http://www.ajaxtrans.com/ http://maps.google.com/ http://www.objectgraph.com/dictionary/ http://www.kayak.com/ http://lyricsfly.com/ http://ondras.zarovi.cz/sql/demo/
Γιατί συζητάµε για το AJAX τόσο πολύ τώρα; Μεγαλώνουν οι απαιτήσεις για εµπλουτισµένες δικτυακές υπηρεσίες Ευρυζωνικότητα σηµαίνει ότι µπορούµε (και θέλουµε) να κάνουµε περισσότερα Απέκτησε όνοµα Όπως το LAMP, βοηθά τους ανθρώπους να καταλάβουν την τεχνική Το Google µας «κακοµαθαίνει» Gmail, Google Maps, Google Docs, Google Calendar, Οι άνθρωποι πιστεύουν πλέον στην ανάπτυξη δικτυακών εφαρµογών και όχι δικτυακών τόπων
Ο ρόλος του AJAX στο Web 2.0 Χαρακτηριστικά του Web 2.0 Ο ιστός ως πλατφόρµα Κοινωνική δικτύωση Υπέρβαση του hardware Υπηρεσίες και όχι λογισµικό Εµπλουτισµένο περιβάλλον χρήσης Το AJAX βρίσκεται στον πυρήνα του Web 2.0 Τόσο το περιβάλλον χρήστη Όσο και στην αλληλεπίδραση µε τους servers
Συστατικά του AJAX HTML και CSS Παρουσίαση πληροφοριών Document Object Model Αλληλεπίδραση µε το πληροφοριακό περιεχόµενο Το αντικείµενο XMLHttpRequest ΑΣΥΓΧΡΟΝΗ λήψη δεδοµένων από τον web server Javascript Ισχυρή αλληλεπίδραση µε το χρήστη και «συγκόλληση» όλων των παραπάνω
Επεξεργασία αίτησης
Ασύγχρονη επεξεργασία - XMLHttpRequest Επιτρέπεται η έναρξη µιας αίτησης HTTP στο παρασκήνιο Η απάντηση επιστρέφει «διαφανώς» µέσα στον κώδικα Javascript Υποστηρίζεται από όλους τους τυπικούς browsers
Παράδειγµα XMLHttpRequest ηµιουργία αντικειµένου var requester = new XMLHttpRequest(); (IE 6): var requester = new ActiveXObject("Microsoft.XMLHTTP"); Μεταφορά δεδοµένων στον server requester.open("post", "/query.php") requester.send("name=bob&email=bob@example.com"); «ιαφανής» αναµονή του client requester.onreadystatechange = statehandler; Όπου statehandler είναι µια συνάρτηση που θα χειριστεί την απάντηση µε βάση µια µεταβλητή readystate: 0 Uninitialised 1 Loading 2 Loaded 3 Interactive 4 Completed
ιαχείριση απάντησης (statehandler) Έλεγχος για τον αν το αντικείµενο XMLHttpRequest επέστρεψε επιτυχώς τα δεδοµένα, ή προέκυψε σφάλµα. if (requester.readystate == 4) { if (requester.status == 200) { success(); } }
Συνολικό Παράδειγµα var req = new XMLHttpRequest(); req.onreadystatechange = myhandler; req.open("get", "servlet", true); req.send("p1=abc"); function myhandler() { if (req.readystate == 4) { dosomethingwith(req.responsexml); } }
Πιθανά προβλήµατα Προγραµµατισµός σε Javascript Βοήθεια από βιβλιοθήκες (libraries) και περιβάλλοντα εργασίας (frameworks) Χρήση του DOM Πιθανές διαφοροποιήσεις µεταξύ browsers Πολλές (ίσως) αιτήσεις HTTP requests στον server Ωστόσο είναι µικρές οκιµές οκιµές cross-browser Νέες εκδόσεις browsers Τι γίνεται µε τα πλήκτρα του browser; (π.χ. Back Button)
Frameworks Έτοιµες συναρτήσεις, βιβλιοθήκες Αντιµετώπιση cross-browser προβληµάτων Οικονοµία στον κώδικα απλότητα Ευκολία εκµάθησης Αντιµετώπιση νέων εκδόσεων browsers µέσω νέων εκδόσεων frameworks
Ext διαχείριση του AJAX Ext.Ajax.request({ url : 'ajax.php', params : { action : 'getdate' }, method: 'GET', success: function ( result, request ) { Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responsetext); }, failure: function ( result, request) { Ext.MessageBox.alert('Failed', result.responsetext); } });
Το AJAX φτάνει παντού Λειτουργικά συστήµατα (Adobe AIR) Mac OS Windows Linux Παιχνιδοµηχανές Wii (Opera) Κινητά τηλέφωνα Opera Mobile and Opera Mini Symbian S60 Windows Mobile iphone