Κατέβασμα παρουσίασης
Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε
ΔημοσίευσεZandra Maris Τροποποιήθηκε πριν 9 χρόνια
1
Asynchronous Javascript And XML (AJAX) Γιώργος Θάνος Παρασκευή 21 Νοεμβρίου 2008
2
Εισαγωγή (1/2) Όταν πρωτοεμφανίστηκε η Javascript οι κατασκευαστές web εφαρμογών ήταν ενθουσιασμένοι διότι μπορούσαν συγκεκριμένες λειτουργίες να τρέχουν τοπικά γρήγορα στον browser. Στις περιπτώσεις όμως που απαιτούνταν η διεπαφή με τον Server υπήρχε το μειονέκτημα ότι απαιτούνταν να φορτωθεί το σύνολο της HTML σελίδας, πράγμα που καθιστούσε την διεπαφή αργή για χρήσεις που απαιτούν γρήγορη αποκρισιμότητα. Διαφάνεια 2
3
Εισαγωγή (2/2) Επιμέρους προσπάθειες ώστε να φορτώνεται μόνο το τμήμα της σελίδας που ενδιαφέρει έγιναν από πολλούς κατασκευαστές πλοηγών από τα μέσα τις προηγούμενης δεκαετίας. To 1999 η Microsoft όρισε το αντικείμενο XMLHTTPRequest ως ActiveX control για τον Internet Exploer 5. Σύντομα ακολούθησαν Mozilla και Safari με αντίστοιχες υλοποιήσεις. Τον Απρίλιο του 2006 το W3C εξέδωσε την πρώτη έκδοση ενός draft σε μία προσπάθεια δημιουργίας ενός web standard. Διαφάνεια 3
4
Τι ονομάζουμε AJAX; Είναι η τεχνική ανταλλαγής πληροφορίας με τον server μέσω HTTP χωρίς να φορτωθεί το σύνολο της web σελίδας, αλλά μόνο το τμήμα του κώδικα που ενδιαφέρει. Ο στόχος είναι η μέγιστη αποκρισιμότητα, με δεδομένο ότι η πληροφορία που ανταλλάσσεται είναι σχετικά περιορισμένου μεγέθους. Ο χρήστης δεν αλληλεπιδρά πατώντας κάποιο submit button. Αντίθετα, σε κάθε καταχώρηση του χρήστη ( π. χ. σε μία φόρμα ) η πληροφορία που καταχωρεί ελέγχεται και επιστρέφεται πίσω στον server. Διαφάνεια 4
5
Παράδειγμα (1/4) Ας υποθέσουμε ότι έχουμε την παρακάτω απλή web φόρμα. Που είναι το εικονίδιο submit; Πηγή : www.tizag.com Διαφάνεια 5
6
Παράδειγμα (2/3) Πηγή : www.tizag.com Διαφάνεια 6
7
Παράδειγμα (3/3) Στη συνάρτηση ajaxFunction() προσθέτω τον κώδικα : Πηγή : www.tizag.com Διαφάνεια 7
8
Πως μπορούμε να κάνουμε τον κώδικα περισσότερο ευανάγνωστο ; Διαφάνεια 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: http://www.tizag.com/ajaxTutorial/serverTime.php http://www.tizag.com/ajaxTutorial/serverTime.php
Παρόμοιες παρουσιάσεις
© 2024 SlidePlayer.gr Inc.
All rights reserved.