05/13/13AJAX Γιάννης Αρβανιτάκης

A J A X

2

AJAAJAXX

ΣτηνΣτην πράξηπράξη

AutocompleteAutocomplete

3

AJAAJAXX

ΣτηνΣτην πράξηπράξη

Webmail (google, yahoo)Webmail (google, yahoo)

4

AJAAJAXX

ΣτηνΣτην πράξηπράξη

FlickrFlickr

5

AJAAJAXX

ΣτηνΣτην πράξηπράξη

Google DocsGoogle Docs

6

AJAAJAXX

ΣτηνΣτην πράξηπράξη

http://maps.google.com/Google mapsGoogle maps

7

AJAAJAXX

ΣτηνΣτην πράξηπράξη

Web DesktopsWeb Desktops

8

AJAAJAXXAAsynchronous

JAJAvascript and

XXML

ΔενΔεν είναιείναι καινούργιακαινούργ

ια

!τεχνολογ

ία!τεχνολογ

ία

9

π server Η ε ικοινωνία με τον γίνεται π (Behind the ασύγχρονα στο αρασκήνιο

scenes) π Ανταλλαγή μικρότερης οσότητας serverδεδομένων με τον

- Δεν χρειάζεται να ξανα φορτώνει ολόκληρη η σελίδα

π π Προτρέ ει τους ρογραμματιστές να π διαχωρίζουν τα δεδομένα α ό την

πμορφο οίηση

AJAAJAXX

ΒασικάΒασικά χαρακτηριστικάχαρακτηριστικά

10

AJAAJAXX

ΒασικάΒασικά οφέληοφέλη

Κερδίζουμε σε ταχύτητα π π Έχουμε καλύτερη και ιο άμεση διε αφή /χρήστη με Η Υ

web “ ” desktop Οι εφαρμογές μοιάζουν μεεφαρμογές

Καλύτερη διαχείριση των δεδομένων π καθώς διαχωρίζονται α ό τηνπμορφο οίηση

11

AJAAJAXX

πΚά οιαπΚά οια μειονεκτήματαμειονεκτήματα

Λειτουργία ιστορικού και σελιδοδεικτών π DOM Διαφορές στην υλο οίηση του και

Javascript, browsersτης σε διαφορετικούς

12

XHTMLXHTML + CSSCSS

DOMDOM + JavascriptJavascript ( ή πκά οια άλλη γλώσσα client-side scripting)

XMLHttpRequestXMLHttpRequest

XMLXML ή JSONJSON

AJAAJAXX

ΤιΤι ενσωματώνειενσωματώνει ;;

13

H XHTML π π α οτελεί την ουσία ένα υ οσύνολο HTML π της το ο οίο συμμορφώνεται στις

π W3C π ε ιταγές του ώστε να λαμβάνει υ όψιν XML.της και την

CSS Τα αρχεία αναλαμβάνουν εξολοκλήρου π .την μορφο οίηση

XHTML + CSSXHTML + CSS

14

π Έχουν τα δεδομένα ου π server στέλνονται α ό τον στον

Browser XML π Η είναι μια λήρης γλώσσα

mark-up JSON π π Η είναι ένας ολύ α λός

π π τρό ος ανα αράστασηςδεδομένων

XML XML ήή JSON JSON

15

XML/JSOXML/JSONNΠωςΠως δημιουργούνταιδημιουργούνται πα όπα ό τοντον server; server;

π Ανάλογα με την την λατφόρμα και την βάση server.δεδομένων του

π π π Έτσι στην ερί τωση ου έχουμε έναν PHP+mySQL, PHP συνδυασμό ένα αρχείο θα

XML, JSON αναλάβει να φτιάξει μια δομή ήπ π α λού κειμένου ώστε να την εράσει στον

browser

16

Document Object ΤοModel είναι έναstandard για την

π HTML, ανα αράστασηXHTML, XML

π π Χρησιμο οιείτε α ό τηνJavascript ( και άλλεςscripting languages) για

π την δυναμική λοήγηση μέσα σε ένα αρχείο

Javascript + DOMJavascript + DOM

17

Javascript + DOMJavascript + DOM

18

XMLhttpRequestXMLhttpRequestπ π Χρησιμο οιείται α ό διάφορες scripting

languages π javascript ό ως η για να μεταφέρει π server clientδεδομένα α ό τον στον

π π client Μ ορεί να ε ιστρέφει στον τα δεδομένα XML, JSON π σε μορφή ή και α λού κειμένου

π π Υ άρχουν μικρές διαφορές στην υλο οίηση browserτου ανάλογα με τον

19

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

20

XMLhttpRequestXMLhttpRequestΠροετοιμασίαΠροετοιμασία σύνδεσηςσύνδεσης μεμε τοντον server server

Παραλαβή των δεδομένων Παραλαβή των δεδομένων

π serverΕ ικονωνία με τονπ serverΕ ικονωνία με τον

21

XMLhttpRequestXMLhttpRequestreadyStatereadyState

22

XMLhttpRequestXMLhttpRequeststatusstatus

23

Ajax FrameworksAjax Frameworks javascript Περιέχουν έτοιμες βιβλιοθήκες και

CSS π Εύκολη η ανά τυξη εφαρμογών με την χρήση

συναρτήσεων π π Ποικίλουν ανάλογα με το ε ί εδο δόμησής

π τους και ανάλογα με την λατφόρμαπ (javascript, java, c++, php, υλο οίησής τους

.net)

24

PrototypePrototypeπ π js Α οτελείται α ό ένα μόνο αρχείο μεγέθους

123ΚΒ , Βασική βιβλιοθήκη δεν έχει έτοιμα widgets

: MIT Άδεια χρήσης license

25

ScriptaculousScriptaculous π Βιβλιοθήκη κυρίως για την μορφο οίηση και

π interface web την ανά τυξη του τηςεφαρμογήςΣυχνά πχρησιμο οιείται σε συνδυασμό με την prototype

: MIT Άδεια χρήσης license

26

MooToolsMooTools π Βιβλιοθήκη κυρίως για την μορφο οίηση

π interface web και την ανά τυξη του τηςεφαρμογής

π Πολλά αραδείγματα για διάφορα εφέΣυχνά πχρησιμο οιείται σε συνδυασμό με την prototype

: MIT Άδεια χρήσης license

27

MooToolsMooTools

28

jQueryjQuery (29-94 )Μικρό μέγεθος ΚΒ

π Δίνει μεγαλύτερο βάρος στην ε ικοινωνίαjavascript HTMLμε

Παραδείγματα για διάφορα εφέ : MIT Άδεια χρήσης license GNU/GPLκαι

29

YUIYUI javascript, CSS π Βιβλιοθήκη η ο οία

π Ajaxχρησιμο οιεί και τεχνικές πΠλήθος αραδειγμάτων

widgetsΈτοιμα : BSD Άδεια χρήσης license

30

YUIYUI

31

DojoDojo π widgetsΜεγάλος αριθμός α ό

π cookies, Α οθήκευση ιστορικού π sever-sideΑντικείμενα α οθήκευσης δεδομένων

YahooFlickrDeliciousPicasaAtom Read

documentationΠλούσιο : BSD Άδεια χρήσης license, Academic Free

License

32

Ext js 2.0Ext js 2.0 extension YUI, Ξεκίνησε σαν του στην π jQuery συνέχεια συμ εριέλαβε και την και

prototype π την και τελικά α ό την έκδοση1.1 αυτονομήθηκε

π widgets Πολλά έτοιμα αραδείγματα καιout of the box

widgetsΈμφαση στην αισθητική των API DocumentationΠλούσιο

: LGPLΆδεια χρήσης

33

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

34

Τι χρειάζομαι για να αρχίσω να Τι χρειάζομαι για να αρχίσω να ajax frame works;δοκιμάζω τα ajax frame works;δοκιμάζω τα

Web server (π apache) π Ένα χ και κά οιαπ (π PHP+mySQL). π λατφόρμα χ Μ ορώ γιαπ αράδειγμα να κάνω εγκατάσταση τοXampp

π javascript, Ένα ε εξεργαστή κειμένου γιαhtml (aptana IDE)

ajax frameworksΤα διάφορα Διάθεση και όρεξη να ασχοληθώ με τα

π API έτοιμα αραδείγματα και ταDocumentation Framework π του στο ο οίο

δουλεύω