1. 05/13/13
AJAX
Γιάννης Αρβανιτάκης
A J A X

2. 2
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
AutocompleteAutocomplete

3. 3
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
Webmail (google, yahoo)Webmail (google, yahoo)

4. 4
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
FlickrFlickr

5. 5
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
Google DocsGoogle Docs

6. 6
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
http://maps.google.com/Google mapsGoogle maps

7. 7
AJAAJA
XX
ΣτηνΣτην πράξηπράξη
Web DesktopsWeb Desktops

8. 8
AJAAJA
XX
AAsynchronous
JAJAvascript and
XXML
ΔενΔεν είναιείναι καινούργια
καινούργια
!
τεχνολογία!
τεχνολογία

9. 9
π serverΗ ε ικοινωνία με τον γίνεται
π (Behind theασύγχρονα στο αρασκήνιο
scenes)
πΑνταλλαγή μικρότερης οσότητας
serverδεδομένων με τον
-Δεν χρειάζεται να ξανα φορτώνει
ολόκληρη η σελίδα
π πΠροτρέ ει τους ρογραμματιστές να
πδιαχωρίζουν τα δεδομένα α ό την
πμορφο οίηση
AJAAJA
XX
ΒασικάΒασικά χαρακτηριστικάχαρακτηριστικά

10. 10
AJAAJA
XX
ΒασικάΒασικά οφέληοφέλη
Κερδίζουμε σε ταχύτητα
π πΈχουμε καλύτερη και ιο άμεση διε αφή
/χρήστη με Η Υ
web “ ” desktopΟι εφαρμογές μοιάζουν με
εφαρμογές
Καλύτερη διαχείριση των δεδομένων
πκαθώς διαχωρίζονται α ό την
πμορφο οίηση

11. 11
AJAAJA
XX
πΚά οιαπΚά οια μειονεκτήματαμειονεκτήματα
Λειτουργία ιστορικού και σελιδοδεικτών
π DOMΔιαφορές στην υλο οίηση του και
Javascript, browsersτης σε διαφορετικούς

12. 12
XHTMLXHTML + CSSCSS
DOMDOM + JavascriptJavascript (ή πκά οια άλλη
γλώσσα client-side scripting)
XMLHttpRequestXMLHttpRequest
XMLXML ή JSONJSON
AJAAJA
XX
ΤιΤι ενσωματώνειενσωματώνει;;

13. 13
H XHTML π πα οτελεί την ουσία ένα υ οσύνολο
HTML πτης το ο οίο συμμορφώνεται στις
π W3C πε ιταγές του ώστε να λαμβάνει υ όψιν
XML.της και την
CSSΤα αρχεία αναλαμβάνουν εξολοκλήρου
π .την μορφο οίηση
XHTML + CSSXHTML + CSS

14. 14
πΈχουν τα δεδομένα ου
π serverστέλνονται α ό τον στον
Browser
XML πΗ είναι μια λήρης γλώσσα
mark-up
JSON π πΗ είναι ένας ολύ α λός
π πτρό ος ανα αράστασης
δεδομένων
XMLXML ήή JSONJSON

15. 15
XML/JSOXML/JSO
NNΠωςΠως δημιουργούνταιδημιουργούνται πα όπα ό τοντον server;server;
πΑνάλογα με την την λατφόρμα και την βάση
server.δεδομένων του
π π πΈτσι στην ερί τωση ου έχουμε έναν
PHP+mySQL, PHPσυνδυασμό ένα αρχείο θα
XML, JSONαναλάβει να φτιάξει μια δομή ή
π πα λού κειμένου ώστε να την εράσει στον
browser

16. 16
Document ObjectΤο
Model είναι ένα
standard για την
π HTML,ανα αράσταση
XHTML, XML
π πΧρησιμο οιείτε α ό την
Javascript (και άλλες
scripting languages) για
πτην δυναμική λοήγηση
μέσα σε ένα αρχείο
Javascript + DOMJavascript + DOM

17. 17
Javascript + DOMJavascript + DOM

18. 18
XMLhttpRequestXMLhttpRequest
π πΧρησιμο οιείται α ό διάφορες scripting
languages π javascriptό ως η για να μεταφέρει
π server clientδεδομένα α ό τον στον
π π clientΜ ορεί να ε ιστρέφει στον τα δεδομένα
XML, JSON πσε μορφή ή και α λού κειμένου
π πΥ άρχουν μικρές διαφορές στην υλο οίηση
browserτου ανάλογα με τον

19. 19
XMLhttpRequestXMLhttpRequest
ΔημιουργίαΔημιουργία αντικειμένουαντικειμένου

20. 20
XMLhttpRequestXMLhttpRequest
ΠροετοιμασίαΠροετοιμασία σύνδεσηςσύνδεσης μεμε τοντον serverserver
Παραλαβή των δεδομένωνΠαραλαβή των δεδομένων
π serverΕ ικονωνία με τονπ serverΕ ικονωνία με τον

21. 21
XMLhttpRequestXMLhttpRequest
readyStatereadyState

22. 22
XMLhttpRequestXMLhttpRequest
statusstatus

23. 23
Ajax FrameworksAjax Frameworks
javascriptΠεριέχουν έτοιμες βιβλιοθήκες και
CSS
πΕύκολη η ανά τυξη εφαρμογών με την χρήση
συναρτήσεων
π πΠοικίλουν ανάλογα με το ε ί εδο δόμησής
πτους και ανάλογα με την λατφόρμα
π (javascript, java, c++, php,υλο οίησής τους
.net)

24. 24
PrototypePrototype
π π jsΑ οτελείται α ό ένα μόνο αρχείο μεγέθους
123ΚΒ
,Βασική βιβλιοθήκη δεν έχει έτοιμα widgets
: MITΆδεια χρήσης license

25. 25
ScriptaculousScriptaculous
πΒιβλιοθήκη κυρίως για την μορφο οίηση και
π interface webτην ανά τυξη του της
εφαρμογής
Συχνά πχρησιμο οιείται σε συνδυασμό με την
prototype
: MITΆδεια χρήσης license

26. 26
MooToolsMooTools
πΒιβλιοθήκη κυρίως για την μορφο οίηση
π interface webκαι την ανά τυξη του της
εφαρμογής
πΠολλά αραδείγματα για διάφορα εφέ
Συχνά πχρησιμο οιείται σε συνδυασμό με
την prototype
: MITΆδεια χρήσης license

27. 27
MooToolsMooTools

28. 28
jQueryjQuery
(29-94 )Μικρό μέγεθος ΚΒ
πΔίνει μεγαλύτερο βάρος στην ε ικοινωνία
javascript HTMLμε
Παραδείγματα για διάφορα εφέ
: MITΆδεια χρήσης license GNU/GPLκαι

29. 29
YUIYUI
javascript, CSS πΒιβλιοθήκη η ο οία
π Ajaxχρησιμο οιεί και τεχνικές
πΠλήθος αραδειγμάτων
widgetsΈτοιμα
: BSDΆδεια χρήσης license

30. 30
YUIYUI

31. 31
DojoDojo
π widgetsΜεγάλος αριθμός α ό
π cookies,Α οθήκευση ιστορικού
π sever-sideΑντικείμενα α οθήκευσης δεδομένων
Yahoo
Flickr
Delicious
Picasa
Atom Read
documentationΠλούσιο
: BSDΆδεια χρήσης license, Academic Free
License

32. 32
Ext js 2.0Ext js 2.0
extension YUI,Ξεκίνησε σαν του στην
π jQueryσυνέχεια συμ εριέλαβε και την και
prototype πτην και τελικά α ό την έκδοση
1.1 αυτονομήθηκε
π widgetsΠολλά έτοιμα αραδείγματα και
out of the box
widgetsΈμφαση στην αισθητική των
API DocumentationΠλούσιο
: LGPLΆδεια χρήσης

33. 33
ΣυγκρίσειςΣυγκρίσεις

34. 34
Τι χρειάζομαι για να αρχίσω ναΤι χρειάζομαι για να αρχίσω να
ajax frame works;δοκιμάζω τα ajax frame works;δοκιμάζω τα
Web server (π apache) πΈνα χ και κά οια
π (π PHP+mySQL). πλατφόρμα χ Μ ορώ για
παράδειγμα να κάνω εγκατάσταση το
Xampp
π javascript,Ένα ε εξεργαστή κειμένου για
html (aptana IDE)
ajax frameworksΤα διάφορα
Διάθεση και όρεξη να ασχοληθώ με τα
π APIέτοιμα αραδείγματα και τα
Documentation Framework πτου στο ο οίο
δουλεύω