Σ Δ Η Κ

ΣΔΥΝΟΛΟΓΗΚΟ ΔΚΠΑΗΓΔΤΣΗΚΟ ΗΓΡΤΜΑ ΚΡΖΣΖ΢
΢ΥΟΛΖ ΔΦΑΡΜΟ΢ΜΔΝΖ΢ ΠΛΖΡΟΦΟΡΗΚΖ΢ ΚΑΗ ΠΟΛΤΜΔ΢ΩΝ
Μελέηη ζηην ηεσνολογία WebServices μέζυ JavaScript
ΠΣΤΥΗΑΚΖ ΔΡΓΑ΢ΗΑ
ηνπ
ΤΥΜΠΑΚΙΑΝΑΚΗ ΑΠΟΣΤΟΛΟΥ
Δπιβλέπυν Καθηγηηήρ: Αζαλάζηνο Μαιάκνο
Ζξάθιεην, Απξίιηνο 2010
(Τπνγξαθή)
...................................
ΤΥΜΠΑΚΙΑΝΑΚΗΣ ΑΠΟΣΤΟΛΟΣ
Πηπρηνχρνο Σερλνιφγνο Μεραληθφο Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζσλ
© 2010 – All rights reserved
Πεπίλητη
΢θνπφο ηεο πηπρηαθήο εξγαζίαο ήηαλ ε κειέηε θαη αλάπηπμε πξσηνηχπνπ ζηελ
ηερλνινγία AJAX (Asynchronous JavaScript And XML) κε ηξνθνδφηεζε κέζσ
ππεξεζίαο δηαδηθηχνπ (WebService). Ζ ηερλνινγία απηή βξίζθεηαη ζε πξψηκν ζηάδην
αλάπηπμεο θαη παξνπζηάδεη εμαηξεηηθφ πεδίν εθαξκνγψλ ζην δηαδίθηπν. Σν AJAX είλαη έλα
ζχλνιν ηερληθψλ πνπ επηηξέπεη ηελ αζχγρξνλε επηθνηλσλία κεηαμχ κηα δηαδηθηπαθήο
εθαξκνγήο Πειάηε (Client-side web application) θαη ηνπ Γηαθνκηζηή (Server-side).
΢ην πιαίζην απηήο ηεο ηερλνινγίαο θαηαζθεπάζηεθε κηα δηαδηθηπαθή εθαξκνγή, ε
νπνία αλαιακβάλεη λα απνζεθεχζεη, λα δηαρεηξηζηεί θαη λα πξνβάιεη έλα ζχλνιν επαθψλ
ηνπ ρξήζηε. Οη επαθέο απηέο βξίζθνληαη απνζεθεπκέλεο ζηνλ Γηαθνκηζηή, ν νπνίνο θαη
δέρεηαη αηηήζεηο απφ ηελ πιεπξά ηνπ Πειάηε κέζσ αζχγρξνλσλ αηηεκάησλ (requests)
AJAX γηα λα εθηειέζεη ηηο ελέξγεηεο πνπ επηζπκεί ν ρξήζηεο.
΢πγθεθξηκέλα, έγηλε κειέηε ηεο ηερλνινγίαο AJAX, δειαδή ηνπ ζπλφινπ ησλ
ηερλνινγηψλ πνπ ηελ απνηεινχλ, θαη βαζίδνληαη ζε εθαξκνγέο ζηελ πιεπξά ηνπ Πειάηε
(Client-side). ΢ε απηήλ ηελ πιεπξά ρξεζηκνπνηήζεθαλ νη ηερλνινγίεο HTML, JavaScript
(jQuery) θαη CSS. Γηα ηελ πιεπξά ηεο δηαδηθηπαθήο ππεξεζίαο ηνπ Γηαθνκηζηή
ρξεζηκνπνηήζεθε ε ηερλνινγία ColdFusion ηεο Adobe, θαζψο θαη γηα ηνλ ίδην ηνλ
Γηαθνκηζηή πνπ είλαη έλαο ColdFusion Server. Σέινο, γηα ηελ απνζήθεπζε ησλ επαθψλ
ρξεζηκνπνηήζεθε ην πξφηππν JSON, ην νπνίν θαη είλαη έλα ελαιιαθηηθφ πξφηππν ηεο
γιψζζαο XML πνπ αξρηθά ππνζηήξηδε ην AJAX.
Ζ ζπγθεθξηκέλε δηαδηθηπαθή εθαξκνγή κπνξεί λα γίλεη νδεγφο γηα θαηαζθεπή
εθαξκνγψλ κε ρξήζε ηεο ηερλνινγίαο AJAX, θαζψο ε φιε θηινζνθία ηεο έγθεηηαη ζηελ
ρξήζε κίαο κφλν ζειίδαο ε νπνία δελ ρξεηάδεηαη λα μαλαθνξησζεί πνηέ αιιά κέζα απφ ηελ
νπνία εθηεινχληαη φιεο νη εξγαζίεο ηεο εθαξκνγήο κε αζχγρξνλε επηθνηλσλία ζην
παξαζθήλην, ρσξίο λα ππάξρεη αξλεηηθφ αληίθηππν ζηνλ ρξήζηε κε ρακέλνπο ρξφλνπο
επαλαθνξηψζεσλ.
Λέξειρ Κλειδιά: AJAX, Αζχγρξνλε, jQuery, JavaScript, XML, ColdFusion, JSON, HTML
Abstract
The scope of this thesis was the study and development of a prototype based on the
AJAX technology (Asynchronous JavaScript and XML), which feeds of a WebService.
This technology is at an early stage of development and presents an exceptional range of
applications on the Web. AJAX is a group of techniques which allows asynchronous
communication between a web application on the Client-side and a Server.
A web application was build, based on AJAX technology, which undertakes the
storage, administration and presentation of a sum of contacts of the user. These contacts are
stored on the Server, and the Client-side application can then make asynchronous AJAX
requests to the Server, giving the commands needed to be executed according to the user's
actions.
More specifically, the group of technologies consisting AJAX were studied, based
on applications on the client-side. On this side, the technologies of HTML, JavaScript
(jQuery as the core framework) and CSS were studied and applied. On the server side, the
technology of ColdFusion by Adobe was used as the web service, as well as for the Server
itself, which is a ColdFusion Server. Finally, for the contacts storage, the JSON format
was used, as an alternative to the XML language that the AJAX supported at its early
stages.
This web application can be used as a guide for building AJAX applications, as the
whole philosophy was the use of one single web page for everything. This results in a
Single-page application which executes all its functions without reloading, making use of
asynchronous communication at the background, saving the end user from waiting between
long reloading times.
Keywords: AJAX, asynchronous, jQuery, JavaScript, XML, ColdFusion, JSON, HTML
Πίνακας περιεχομένων
1 Διζαγυγή.................................................................................................................. 5
1.1
AJAX θαη Αζχγρξνλε Δπηθνηλσλία .............................................................................5
1.2
Αληηθείκελν πηπρηαθήο.................................................................................................6
1.3
Οξγάλσζε θεηκέλνπ .....................................................................................................7
2 Θευπηηικό ςπόβαθπο.............................................................................................. 8
2.1
AJAX (Asynchronous JavaScript and XML) ..............................................................9
2.1.1
Ση είλαη ην AJAX; ..................................................................................................9
2.1.2
Ιζηνξία ................................................................................................................10
2.1.3
Σερλνινγίεο .........................................................................................................11
2.1.4
Μεηνλεθηήκαηα θαη Αδπλακίεο.............................................................................12
2.2
Ζ Γιψζζα ΢ήκαλζεο HTML .....................................................................................14
2.3
Ζ γιψζζα θχιισλ ζηπι CSS.....................................................................................14
2.4
Ζ γιψζζα JavaScript .................................................................................................15
2.5
To Μνληέιν DOM (Document Object Model) ..........................................................16
2.5.1
Ση είλαη ην DOM; ................................................................................................16
2.5.2
Ιζηνξία ................................................................................................................16
2.5.3
Δθαξκνγέο ζηα πξνγξάκκαηα Πεξηήγεζεο Ιζηνύ .................................................18
2.5.4
Τινπνηήζεηο .........................................................................................................19
2.6
Σν Αληηθείκελν XMLHttpRequest.............................................................................20
2.6.1
Ση είλαη ην XMLHttpRequest; ..............................................................................20
2.6.2
Η ΢ρέζε ηνπ XMLHttpRequest κε ην AJAX .........................................................20
2.6.3
Ιζηνξία θαη Τπνζηήξημε .......................................................................................21
2.6.4
Σν Αίηεκα HTTP .................................................................................................23
2.7
Ζ βηβιηνζήθε jQuery .................................................................................................26
2.7.1
Ση είλαη ε jQuery; ................................................................................................26
2.7.2
Υαξαθηεξηζηηθά ...................................................................................................27
2.7.3
Υξήζε ..................................................................................................................27
2.8
Ζ γιψζζα ζήκαλζεο XML ........................................................................................29
2.9
Σν κνξθφηππν JSON..................................................................................................30
Σελίδα | 1
2.9.1
Ιζηνξία ................................................................................................................30
2.9.2
Σύπνη Γεδνκέλωλ θαη ΢πληαθηηθό .......................................................................31
2.9.3
΢ρήκα JSON ........................................................................................................33
2.9.4
Υξήζε ηνπ JSON ζην AJAX .................................................................................33
2.9.5
Θέκαηα Αζθαιείαο ..............................................................................................34
2.9.6
΢ύγθξηζε κε ηελ XML ..........................................................................................36
2.9.7
Απνδνηηθόηεηα.....................................................................................................36
Γηαδηθηπαθέο Τπεξεζίεο (Web Services) ..............................................................37
2.10
2.10.1
Δηζαγωγηθά..........................................................................................................37
2.10.2
Πξνδηαγξαθέο .....................................................................................................39
2.10.3
Μνξθέο ηεο ρξήζεο .............................................................................................40
2.10.4
Μεζνδνινγίεο ΢ρεδηαζκνύ ..................................................................................41
2.10.5
Κξηηηθέο ...............................................................................................................42
Ζ πιαηθφξκα αλάπηπμεο εθαξκνγψλ ColdFusion .................................................42
2.11
2.11.1
Ση είλαη ην ColdFusion; .......................................................................................42
2.11.2
Γεληθή Δπηζθόπεζε .............................................................................................43
2.11.3
Αλάιπζε Δπηιεγκέλωλ Υαξαθηεξηζηηθώλ ............................................................46
2.11.4
Αθξωλύκηα ..........................................................................................................49
Αξρηηεθηνληθή MVC (Model-View-Controller) ....................................................50
2.12
2.12.1
Δηζαγωγηθά..........................................................................................................50
2.12.2
Γεληθή Δπηζθόπεζε .............................................................................................51
3 Ανάλςζη Απαιηήζευν Σςζηήμαηορ ..................................................................... 52
3.1
Αξρηηεθηνληθή ............................................................................................................52
3.2
Πεξηγξαθή Λεηηνπξγηψλ ............................................................................................53
3.2.1
Αξρηθή θόξηωζε ηεο εθαξκνγήο ..........................................................................53
3.2.2
Πεδίν Αλαδήηεζεο ...............................................................................................54
3.2.3
Λίζηα Δπαθώλ .....................................................................................................55
3.2.4
Φόξκα Δπεμεξγαζίαο θαη Γεκηνπξγία Νέαο Δπαθήο ...........................................56
3.2.5
Η ζπκπεξηθνξά ηεο δηεύζπλζεο URL ηεο εθαξκνγήο ...........................................57
4 Σσεδίαζη Σςζηήμαηορ ........................................................................................... 58
4.1
Αξρηηεθηνληθή Δθαξκνγήο.........................................................................................58
Σελίδα | 2
4.2
Πιεπξά ηνπ Πειάηε ...................................................................................................59
4.3
Πιεπξά ηνπ Γηαθνκηζηή.............................................................................................61
5 Υλοποίηζη .............................................................................................................. 64
5.1
Πιεπξά ηνπ Πειάηε ...................................................................................................64
5.1.1
Απηό-εθηεινύκελα κπινθ ζπλαξηήζεωλ ...............................................................64
5.1.2
Σν «application.js» Δίλαη έλα Δξγνζηάζην Αληηθείκελωλ....................................66
5.1.3
Πξνζζήθε Διεγθηώλ ...........................................................................................68
5.1.4
Πξνζζήθε Μνληέιωλ (θαη Πξνβνιώλ) ...............................................................70
5.1.5
Η θεληξηθή ζειίδα «index.html» ..........................................................................71
5.1.6
Σν Μνληέιν «contact.js» .....................................................................................75
5.1.7
Σν Μνληέιν «contact_service.js»........................................................................76
5.1.8
Η πξνβνιή «ajax_notification.js» .......................................................................81
5.1.9
Ο Διεγθηήο «contacts.js» ....................................................................................83
5.1.10
΢ηαηηθή Έθδνζε ηεο πιεπξάο ηνπ Πειάηε ............................................................84
5.2
Πιεπξά ηνπ Γηαθνκηζηή – ColdFusion ......................................................................85
5.2.1
Η ρξήζε ηνπ δηαρεηξηζηή ζπκβάληωλ «OnCFCRequest()» ..................................85
5.2.2
Γεληθή Δπηζθόπεζε ηωλ θιάζεωλ .......................................................................86
5.2.3
Σν «εμάξηεκα» ππξήλαο «Base.cfc»....................................................................86
5.2.4
Σν «εμάξηεκα» «Contacts.cfc» ...........................................................................87
5.3
Πιαηθφξκεο θαη πξνγξακκαηηζηηθά εξγαιεία ...........................................................90
5.3.1
Γηαδηθαζία εγθαηάζηαζεο ηεο πηπρηαθήο εξγαζίαο ζε ππνινγηζηή .......................92
6 Έλεγσορ................................................................................................................... 94
6.1
Μεζνδνινγία ειέγρνπ ................................................................................................94
6.2
Αλαιπηηθή παξνπζίαζε ειέγρνπ ................................................................................95
6.2.1
Φόξηωζε θαη Αξρηθή ΢ειίδα ...............................................................................95
6.2.2
Αλαδήηεζε επαθήο...............................................................................................96
6.2.3
Δπεμεξγαζία Δπαθήο ...........................................................................................97
6.2.4
Γεκηνπξγία λέαο επαθήο ......................................................................................98
6.2.5
Γηαγξαθή Δπαθήο................................................................................................99
6.2.6
Με ζπκπιήξωζε ηνπ πεδίνπ ηνπ νλόκαηνο ........................................................100
7 Δπίλογορ ............................................................................................................... 102
Σελίδα | 3
7.1
΢χλνςε θαη ζπκπεξάζκαηα......................................................................................102
7.2
Μειινληηθέο επεθηάζεηο ..........................................................................................103
8 Παπάπηημα: Σσεηικέρ εθαπμογέρ με σπήζη AJAX .......................................... 104
8.1
Google Suggest ........................................................................................................105
8.2
Google Gmail ...........................................................................................................106
8.3
Google Maps ............................................................................................................107
8.4
eBuddy Web Messenger ..........................................................................................108
8.5
Stripe Generator 2.0 .................................................................................................109
8.6
ajaxWindows............................................................................................................110
9 Βιβλιογπαθία ....................................................................................................... 111
Σελίδα | 4
1
Δηζαγσγή
1.1 AJAX θαη Αζύγρξνλε Δπηθνηλσλία
Κνηηάδνληαο πίζσ κεξηθά ρξφληα, ε θαηαζθεπή κηαο δηαδηθηπαθήο εθαξκνγήο ήηαλ
θαηαδηθαζκέλε εμ’ αξρήο λα πζηεξεί ζε πνιιά ζεκεία, έλαληη ησλ εθαξκνγψλ πνπ
αλαπηχζζνληαλ γηα “offline” (εθηφο ζχλδεζεο) ρξήζε ζηνπο επηηξαπέδηνπο ππνινγηζηέο
(Desktop applications). Ζ αθζνλία ιεηηνπξγηψλ θαη ε γεληθή πνηφηεηα απνθξηηηθφηεηαο
(responsiveness) ησλ ηειεπηαίσλ, έθαλαλ ηηο δηαδηθηπαθέο εθαξκνγέο ηδίαο πνηφηεηαο λα
θαληάδνπλ έλα καθξηλφ κέιινλ.
Σν πξφβιεκα ήηαλ εκθαλέο. ΢ε πνιιέο πεξηπηψζεηο, ζρεηηθέο ζειίδεο ζε έλαλ ηζηφηνπν
(website) απνηεινχληαλ απφ αξθεηφ πεξηερφκελν ην νπνίν ήηαλ θνηλφ κεηαμχ ηνπο.
Υξεζηκνπνηψληαο παξαδνζηαθέο κεζφδνπο, απηφ ην πεξηερφκελν έπξεπε λα μαλαθνξησζεί ζε
θάζε αίηεκα ηνπ Πειάηε. Απηφ ην πξφβιεκα ήξζε λα ιχζεη ην AJAX.
Με ηελ ρξήζε ηνπ AJAX, κηα δηαδηθηπαθή εθαξκνγή κπνξεί λα θάλεη κηα αίηεζε πξνο ηνλ
Γηαθνκηζηή, δεηψληαο κφλν ην πεξηερφκελν πνπ ρξεηάδεηαη λα αλαλεσζεί, κεηψλνληαο έηζη
δξαζηηθά θαη ηνλ φγθν ησλ δεδνκέλσλ πνπ πξέπεη λα κεηαθεξζνχλ, αιιά θαη ηνλ ρξφλν
θφξησζεο ηνπ πεξηερνκέλνπ θαη θαηά ζπλέπεηα ηηο ζειίδαο θαη γεληθφηεξα ηεο εθαξκνγήο.
Ζ ρξήζε αζχγρξνλσλ αηηήζεσλ επηηξέπεη ζην ΢χζηεκα Γηεπαθήο Υξήζηε (User Interface)
ηνπ πεξηεγεηή Ηζηνχ (Web browser) ηνπ Πειάηε λα είλαη πην δηαδξαζηηθφ (interactive) θαη
λα αληαπνθξίλεηαη γξεγνξφηεξα ζηηο ελέξγεηεο ηνπ ρξήζηε. Δπηπιένλ, ζπγθεθξηκέλα ηκήκαηα
Σελίδα | 5
ησλ ζειίδσλ κπνξνχλ λα επαλαθνξησζνχλ ρσξηζηά, αηνκηθά. Οη ηειηθνί ρξήζηεο εχθνια
αληηιακβάλνληαη ηελ δηαθνξά, κε ηελ εθαξκνγή λα είλαη πην γξήγνξε, λα αληαπνθξίλεηαη
θαιχηεξα, αθφκα θαη φηαλ ε ηερλνινγία δελ έρεη αιιάμεη απφ ηελ πιεπξά ηνπ Γηαθνκηζηή.
΢ηα πιενλεθηήκαηα απφ ηελ ρξήζε ηνπ AJAX έρνπκε επίζεο ηελ κείσζε ησλ απαηηνχκελσλ
ζπλδέζεσλ πξνο ησλ Γηαθνκηζηή, αθνχ κέξε ηνπ θψδηθα (scripts) θαζψο θαη ηα θχιια ζηπι
(style sheets) πνπ απαηηνχληαη, ρξεηάδεηαη λα αηηεζνχλ κία κφλν θνξά. Σέινο, κπνξεί λα
δηαηεξεζεί κηα θαηάζηαζε ζε φιε ηελ έθηαζε ελφο ηζηφηνπνπ, αθνχ ε κεηαβιεηέο ηεο
JavaScript ζα εμαθνινπζνχλ λα ππάξρνπλ θνξησκέλεο, εθφζνλ ε θεληξηθή ζειίδα
(container page) δελ ρξεηάδεηαη λα μαλαθνξησζεί.
1.2 Αληηθείκελν πηπρηαθήο
΢ε απηήλ ηελ πηπρηαθή εξγαζία κειεηάηαη ην ζχλνιν ησλ ηερλνινγηψλ πνπ απαξηίδνπλ ην
AJAX, θαη ζηελ ζπλέρεηα θαηαζθεπάδεηαη κηα δηαδηθηπαθή εθαξκνγή ε νπνία θάλεη ρξήζε
ηεο ηερλνινγίαο απηήο γηα λα παξαρζεί κηα ιεγφκελε «μονοζέλιδη εθαπμογή» (Single-page
Application). Ζ θαηαζθεπή κηα ηέηνηαο εθαξκνγήο είλαη κηα ξηδνζπαζηηθή αιιαγή απφ ην
θιαζζηθφ κνηίβν ηνπ «Αίηηζη – Απάνηηζη» πνπ ππάξρεη ζηελ πιεηνςεθία ηνπ δηαδηθηχνπ
ζήκεξα. Γελ απαηηεί κφλν έλα εμαηξεηηθφ ζηξψκα αθαίξεζεο (abstraction layer) ηεο
JavaScript φπσο ην jQuery, αιιά θαζηζηά αλαγθαία θαη κηα πην πεξίπινθε αξρηηεθηνληθή
ζπζηήκαηνο, φπσο απηή ηνπ MVC (Model-View-Controller).
Καζψο ην AJAX νπζηαζηηθά αλαθέξεηαη ζε ιχζεηο γηα ηελ πιεπξά ηνπ Πειάηε, ε ρξήζε κηαο
ηερλνινγίαο γηα ηελ πιεπξά ηνπ Γηαθνκηζηή είλαη ζρεηηθά ειεχζεξε θαη φρη ηφζν κεγάιεο
ζεκαζίαο. Άιισζηε, φπσο αλαθέξζεθε θαη πξνεγνπκέλσο, νη εθαξκνγέο AJAX κπνξνχλ λα
θαηαζθεπαζηνχλ θαη ρσξίο λα αιιάμεη ε πιεπξά ηνπ Γηαθνκηζηή, θπξίσο φζνλ αθνξά ηελ
ηερλνινγία θαη ηελ αξρηηεθηνληθή ηεο. Με απηφ ην ζθεπηηθφ επηιέρζεθε ε ηερλνινγία
ColdFusion γηα ηελ πιεπξά ηνπ Γηαθνκηζηή, ηφζν γηα ηνλ ίδην ηνλ Γηαθνκηζηή πνπ ζα
θηινμελεί ηελ εθαξκνγή, φζν θαη γηα ηελ δηαδηθηπαθή ππεξεζία πνπ θαηαζθεπάζηεθε θαη
εθηειείηαη ζηελ πιεπξά ηνπ Γηαθνκηζηή γηα ηελ εμππεξέηεζε ηεο AJAX πιεπξάο ηνπ
Πειάηε.
΢ηα πιαίζηα ινηπφλ ηεο παξαπάλσ αξρηηεθηνληθήο, θαηαζθεπάζηεθε κηα δηαδηθηπαθή
εθαξκνγή, νη «Έξςπνερ Δπαθέρ», ε νπνία επηηξέπεη ζηνλ ηειηθφ ρξήζηε λα απνζεθεχεη, λα
επεμεξγάδεηαη θαη λα αλαδεηά κηα ιίζηα επαθψλ, ζαλ έλα ειεθηξνληθφ βηβιίν επαθψλ
δειαδή. Ο ρξήζηεο κπνξεί λα δεκηνπξγήζεη κηα λέα επαθή, λα επεμεξγαζηεί κηα ήδε
ππάξρνπζα, λα αλαδεηήζεη κηα επαθή απφ ηελ ιίζηα θαη λα ηελ πξνβάιεη, θαη ηέινο λα
δηαγξάςεη κηα επαθή. Όιεο απηέο νη ελέξγεηεο παξνπζηάδνληαη θαη εθηεινχληαη ζε έλα
πεξηβάιινλ κίαο κφλν ζειίδαο, ηεο νπνίαο ην πεξηερφκελν ν ρξήζηεο βιέπεη λα αιιάδεη
αθφκα θαη νινθιεξσηηθά, ρσξίο φκσο λα μαλαθνξηψλεηαη πνηέ ε πξαγκαηηθή ζειίδα ή λα
Σελίδα | 6
κεηαθέξεηαη ζε θάπνηα άιιε. Όια γίλνληαη ζην παξαζθήλην, κε ηελ εθαξκνγή λα επηθνηλσλεί
κέζσ αζχγρξνλσλ αηηεκάησλ AJAX κε ηνλ Γηαθνκηζηή θαη λα αιιάδεη δπλακηθά ην
πεξηερφκελν ηεο ζειίδαο αλάινγα κε ηελ απφθξηζε ησλ αηηεκάησλ απηψλ, δειαδή ησλ
ελεξγεηψλ ηνπ ρξήζηε.
Ζ επηινγή ελφο ηέηνηνπ είδνπο εθαξκνγήο έγηλε γηα δηάθνξνπο ιφγνπο. Ο θχξηνο ιφγνο ήηαλ
φηη ε αξρηηεθηνληθή ηεο «μονοζέλιδηρ» εθαξκνγήο είλαη έλαο αξθεηά ζπκπαγήο ηξφπνο
θαηαζθεπήο κηαο δηαδηθηπαθήο εθαξκνγήο, γεγνλφο ην νπνίν βνεζάεη ηνλ γεληθφηεξν ζηφρν
απηήο ηεο πηπρηαθήο εξγαζίαο, πνπ δελ είλαη άιινο απφ ηελ επίδεημε ησλ δπλαηνηήησλ ηεο
ηερλνινγίαο AJAX, δειαδή ηελ πςειή πνηφηεηα ηεο ακεζφηεηαο, ηεο ιεηηνπξγηθφηεηαο θαη
ηεο επρξεζηίαο πνπ ιακβάλεη ν ηειηθφο ρξήζηεο κηα ηέηνηαο εθαξκνγήο. ΢ήκεξα, ε γεληθή
θηινζνθία γηα ηελ δεκηνπξγία δηαδηθηπαθψλ ππεξεζηψλ, επηβάιεη ηελ δεκηνπξγία φιν θαη
πεξηζζφηεξν πινχζησλ εθαξκνγψλ, κε κηα ηάζε πνπ ζέιεη ηηο θαιχηεξεο πξαθηηθέο πνπ
εθαξκφδνληαη ζηελ πιεπξά ηνπ Γηαθνκηζηή, λα κεηαθέξνληαη ηψξα ζηνλ Πειάηε,
απαιιάζζνληαο ηνλ Γηαθνκηζηή απφ αξθεηφ θφξην θαη πνιχηηκνπο πφξνπο. Καζψο ε
ηερλνινγία πξνρσξάεη θαη ε ππνινγηζηηθή ηζρχ ζηελ πιεπξά ηνπ Πειάηε νινέλα θαη
εκπινπηίδεηαη θαη γίλεηαη αξθεηά ηζρπξή, ε παξαπάλσ θηινζνθία θαη ηάζε είλαη αθφκα πνην
ηθαλφ θαη αλαγθαίν λα εθαξκνζηεί. Ζ εθαξκνγή «Έξςπνερ Δπαθέρ» αθνινπζεί απηήλ ηελ
ηάζε θαη θηινζνθία θαη ηελ εθκεηαιιεχεηαη ζην έπαθξν.
1.3 Οξγάλσζε θεηκέλνπ
Σν Κεθάλαιο 2 εθζέηεη θαη πεξηγξάθεη αλαιπηηθά φιεο ηηο ηερλνινγίεο πνπ ζπλέβαιαλ ζηελ
δεκηνπξγία ηεο εξγαζίαο. ΢ην Κεθάλαιο 3 γίλεηαη κηα ζπλνπηηθή πεξηγξαθή ηεο
αξρηηεθηνληθήο ηεο εθαξκνγήο θαη πεξηγξάθνληαη αλαιπηηθά φιεο νη ιεηηνπξγίεο ηεο. Σν
Κεθάλαιο 4 αλαιχεηαη ε ζρεδίαζε ηεο εθαξκνγήο κε ιεπηνκέξεηεο γηα ηελ αξρηηεθηνληθή
ησλ δχν πιεπξψλ πνπ ηελ απνηεινχλ. ΢ην Κεθάλαιο 5 αλαιχνληαη νξηζκέλα ελδεηθηηθά
ηερληθά ζέκαηα γηα ηελ αλάπηπμε ηεο εθαξκνγήο θαη δίλνληαη πιεξνθνξίεο γηα ην ινγηζκηθφ
πνπ ρξεζηκνπνηήζεθε θαη ηελ δηαδηθαζία εγθαηάζηαζεο ηεο εθαξκνγήο. Σν Κεθάλαιο 6 κε
ηελ βνήζεηα ελφο ζελαξίνπ αμηνινγεί ηελ εθαξκνγή θαη απνηειεί θαη ην εγρεηξίδην ρξήζεο
ηεο. ΢ην Κεθάλαιο 7 είλαη ν επίινγνο ηεο εθαξκνγήο θαζψο θαη κεξηθέο ηδέεο γηα κειινληηθή
επέθηαζή ηεο. Δθαξκνγέο ζρεηηθέο κε ην αληηθείκελν ηεο πηπρηαθήο εξγαζίαο
παξνπζηάδνληαη ζην Κεθάλαιο 8 . Σν Κεθάλαιο 9 απνηειεί ηελ βηβιηνγξαθία ηεο πηπρηαθήο
εξγαζίαο.
Σελίδα | 7
2
Θεσξεηηθό ππόβαζξν
Γηα ηελ αλάπηπμε ηεο εθαξκνγήο «Έξςπνερ Δπαθέρ» ηεο πηπρηαθήο εξγαζίαο, ρξεηάζηεθε λα
κειεηεζνχλ φιεο νη ηερλνινγίεο θαη νη ηερληθέο πνπ απνηεινχλ ην AJAX. Γηα λα
θαηαζθεπαζηεί κηα νινθιεξσκέλε εθαξκνγή AJAX, ήηαλ απαξαίηεην λα αλαπηπρζεί ε
ηερλνινγία ζηελ πιεπξά ηνπ Γηαθνκηζηή αιιά θαη ε ηερλνινγία ζηελ κεξηά ηνπ Πειάηε. Οη
ηερλνινγίεο πνπ κειεηήζεθαλ θαη εθαξκφζηεθαλ είλαη νη εμήο:
Γηα ηελ πιεπξά ηνπ Πειάηε:
1. Γιψζζα πξνγξακκαηηζκνχ JavaScript
2. Αληηθείκελν XMLHttpRequest
3. Βηβιηνζήθε ηεο JavaScript, jQuery
4. Γιψζζα ΢ήκαλζεο HTML(Hypertext Markup Language)
5. Γιψζζα θχιισλ ζηπι Cascading Style Sheets (CSS)
Γηα ηελ πιεπξά ηνπ Γηαθνκηζηή:
1. Γιψζζα ΢ήκαλζεο ColdFusion (ColdFusion Markup Language)
2. Σερλνινγία Γηαθνκηζηή ColdFusion (ColdFusion Server)
3. Μνξθφηππν JSON (JavaScript Object Notation data format)
Γηα ηελ γεληθφηεξε αλάπηπμε ηεο εθαξκνγήο, θαη θπξίσο ηεο αξρηηεθηνληθήο ηεο:
1. Οη Τπεξεζίεο Ηζηνχ Web Services
2. Σν Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (Document Object Model) ή DOM
3. Ζ αξρηηεθηνληθή ινγηζκηθνχ MVC (Model-View-Controller)
Σελίδα | 8
΢ηηο παξαθάησ ελφηεηεο ζα δνζεί ιεπηνκεξή πεξηγξαθή, ζε ζεσξεηηθή βάζε, γηα ηηο
πξναλαθεξζείζεο ηερλνινγίεο. Ζ γιψζζα JavaScript θαζψο θαη ε γιψζζεο HTML θαη CSS
ζεσξνχληαη γλσζηέο θαη ζα πεξηγξαθνχλ ζπλνπηηθά, ελψ επίζεο ζπλνπηηθά ζα πεξηγξαθεί θαη
ε γιψζζα XML ε νπνία αλήθεη ζηηο ηερλνινγίεο ηνπ αξρηθνχ ππξήλα ηνπ AJAX αιιά δελ
ρξεζηκνπνηήζεθε ζε απηήλ ηελ εξγαζία.
2.1 AJAX (Asynchronous JavaScript and XML)
2.1.1 Τη είλαη ην AJAX;
Ο φξνο «AJAX» αξρηθά δεκηνπξγήζεθε απφ ηελ ζπληνκνγξαθία ηνπ "Asynchronous
JavaScript and XML". Οπζηαζηηθά ην AJAX δελ είλαη κηα λέα ηερλνινγία, νχηε κηα λέα
γιψζζα πξνγξακκαηηζκνχ, αιιά έλαο λένο ηξφπνο ρξήζεο ησλ ππαξρφλησλ ηερλνινγηψλ.
Δίλαη έλα γθξνππ απφ αιιειέλδεηεο ηερληθέο αλάπηπμεο ηζηνζειίδσλ, πνπ ρξεζηκνπνηνχληαη
ζηελ πιεπξά ηνπ Πειάηε (client-side) γηα ηελ δεκηνπξγία δηαδξαζηηθψλ δηαδηθηπαθψλ
εθαξκνγψλ.
“AJAX: Η ηέρλε ηεο αληαιιαγήο δεδνκέλωλ κε έλα Γηαθνκηζηή δηαδηθηύνπ, θαη ηεο
αιιαγήο κεξώλ κηαο ηζηνζειίδαο, ρωξίο λα μαλαθνξηωζεί νιόθιεξε ε ηζηνζειίδα.”
-- w3schools.com
Με ην AJAX, νη δηαδηθηπαθέο εθαξκνγέο κπνξνχλ λα αλαθηνχλ δεδνκέλα απφ ηνλ
Γηαθνκηζηή (server) αζχγρξνλα, δειαδή ζην παξαζθήλην, ρσξίο λα παξεκβαίλνπλ ζηελ
εκθάληζε θαη ηελ ζπκπεξηθνξά ηεο ππάξρνπζαο ζειίδαο. Ζ ρξήζε ησλ ηερληθψλ ηνπ AJAX
έρεη νδεγήζεη ζε αχμεζε ησλ δηαδξαζηηθψλ ή δπλακηθψλ δηεπαθψλ ζηηο ηζηνζειίδεο.
΢πλήζσο,
ηα
δεδνκέλα
αλαθηψληαη
ρξεζηκνπνηψληαο
ην
αληηθείκελν
(object)
XMLHttpRequest, ην νπνίν ζα αλαιπζεί παξαθάησ.
΢ε απηφ ην ζεκείν, αμίδεη λα επηζεκαλζεί ην εμήο νμχκσξν. Παξά ην φλνκά ηνπ, ην AJAX
δελ απαηηεί ηελ ρξήζε ηεο XML γηα ηελ ιήςε ησλ δεδνκέλσλ, θαζψο επίζεο δελ είλαη
απαξαίηεην ηα αηηήκαηα πξνο ησλ Γηαθνκηζηή λα είλαη αζχγρξνλα. Απηφ ζπκβαίλεη γηαηί απφ
ην 2005, πνπ αξρηθά παξνπζηάζηεθε ην AJAX σο ηδέα, κέρξη ζήκεξα, νη πξνγξακκαηηζηέο
δηαδηθηχνπ ην έρνπλ εκπινπηίζεη κε δηάθνξνπο ηξφπνπο θαη ην έρνπλ επεθηείλεη
ελζσκαηψλνληαο αξθεηέο λέεο ηερλνινγίεο. Σν φλνκα φκσο έρεη παξακείλεη ην ίδην, θαζψο
ήηαλ απαξαίηεην έλα δηαθξηηφ αλαγλσξηζηηθφ γηα ηελ ρξήζε φισλ απηψλ ησλ ηερλνινγηψλ,
θάησ απφ έλα θνηλφ φξν ψζηε λα κελ ππάξρεη ζχγρπζε.
Σελίδα | 9
2.1.2 Ιζηνξία
Ζ θφξησζε αζχγρξνλνπ πεξηερνκέλνπ έγηλε πξαγκαηηθφηεηα γηα πξψηε θνξά ην 1995, κε ηελ
πξψηε έθδνζε ηεο γιψζζαο πξνγξακκαηηζκνχ Java. Σφηε παξνπζηάζηεθαλ γηα πξψηε θνξά
ηα «Java Applets», ηα νπνία επέηξεπαλ «μεηαγλυηηιζμένο» (compiled) θψδηθα ζηελ κεξηά
ηνπ Πειάηε (client-side) λα θνξηψζεη δεδνκέλα αζχγρξνλα απφ ηνλ δηαδηθηπαθφ Γηαθνκηζηή
(web server), κεηά ηελ θφξησζε κηαο ηζηνζειίδαο. Σελ ίδηα εθαξκνγή είρε θαη ην «IFrame»
ζηνηρείν ηεο γιψζζαο ζήκαλζεο HTML, ην νπνίν παξνπζίαζε κηα ρξνληά αξγφηεξα, ην
1996, ν Internet Explorer ηεο Microsoft. Σν 1999 έγηλε ην κεγάιν βήκα, κε ηνλ Internet
Explorer 5 λα ελζσκαηψλεη ζηα ActiveX Controls ηνπ ην «πεπιηύλιγμα» (wrapper)
XMLHTTP, ην νπνίν κέρξη θαη ζήκεξα ρξεζηκνπνηείηαη απφ ζρεδφλ φινπο ηνπο πεξηεγεηέο
Γηαδηθηχνπ (Ιnternet Βrowsers) σο ην έκθπην (native) αληηθείκελν XMLHttpRequest.
Όκσο, παξά ηελ θνηλή απνδνρή θαη ηελ αλαγλψξηζε ηεο ζπνπδαηφηεηαο απηήο ηεο
ηερλνινγίαο, έπξεπε λα πεξάζνπλ αξθεηά ρξφληα, ψζπνπ ην 2004 πξψηε ε Google, λα θάλεη
εθηεηακέλε ρξήζε ηνπ AJAX ζην Gmail, κηα ππεξεζία αληαιιαγήο ειεθηξνληθήο
αιιεινγξαθίαο. Μέρξη ηφηε ε ρξεζηκφηεηα ησλ HTTP αηηήζεσλ πξνο ηνλ Γηαθνκηζηή ζην
παξαζθήλην, θαζψο θαη γεληθά νη αζχγρξνλεο ηερλνινγίεο ζην δηαδίθηπν, παξέκελαλ αξθεηά
αζαθήο θαη ε εθαξκνγή θαη ππνζηήξημε ηνπο απφ ηνπο πξνγξακκαηηζηέο ήηαλ πνιχ
πεξηνξηζκέλε. Σν 2005, ε Google θαη πάιη, κε ην Google Maps, κηα ππεξεζία πεξηήγεζεο
ραξηψλ, έθαλε επξέσο γλσζηφ ην AJAX, θαη πνιινί εξεπλεηέο θαη πξνγξακκαηηζηέο άξρηζαλ
λα αζρνινχληαη καδί ηνπ, παξφιν πνπ δελ ππήξρε θαλ ζαλ φξνο ή νξηζκφο ηφηε.
Δξ.: Γηαηί έληωζεο ηελ αλάγθε λα δώζεηο έλα όλνκα ζ’ απηό;
Απ.: Υξεηαδόκνπλ θάηη ζπληνκόηεξν από ην «Αζύγρξνλε JavaScript + CSS + DOM
+ XMLHttpRequest” γηα λα ρξεζηκνπνηώ όηαλ ζπδεηνύζα απηήλ ηελ πξνζέγγηζε κε
ηνπο πειάηεο.
-- Jesse James Garrett
"Ννλφο" ηνπ φξνπ «AJAX» είλαη ν Jesse James Garrett, Πξφεδξνο θαη ηδξπηήο ηεο εηαηξίαο
Adaptive Path, o νπνίνο πξψηνο ζηνλ θφζκν, ζην άξζξν ηνπ "Ajax: A New Approach to
Web Applications" ηνλ Φεβξνπάξην ηνπ 2005, έδσζε έλα φλνκα ζηελ δπλαηφηεηα πνπ
ππήξρε κε ηηο ηφηε ππάξρνπζεο ηερλνινγίεο, λα γεθπξσζεί ην θελφ κεηαμχ Γηαθνκηζηή
(Server) θαη Πειάηε (Client) κε ηελ αζχγρξνλε επηθνηλσλία κεηαμχ απηψλ.
΢ηηο 5 Απξηιίνπ ηνπ 2006, ε δηεζλήο θνηλνπξαμία γηα ηελ θαηνρχξσζε πξνηχπσλ ηνπ
παγθφζκηνπ ηζηνχ WC3 (World Wide Web Consortium) αλαθνίλσζε ην πξψην πξνζρέδην
Σελίδα | 10
πξνδηαγξαθήο γηα ην αληηθείκελν, ζε κηα πξνζπάζεηα λα δεκηνπξγήζεη έλα επίζεκν
δηαδηθηπαθφ πξφηππν.
2.1.3 Τερλνινγίεο
Ο φξνο «AJAX» ήξζε λα αλαπαξαζηήζεη έλα επξχ γθξνππ απφ δηαδηθηπαθέο ηερλνινγίεο νη
νπνίεο κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα λα παξέρνπλ ηα κέζα ζε κηα δηαδηθηπαθή εθαξκνγή
λα επηθνηλσλήζεη κε έλαλ Γηαθνκηζηή ζην παξαζθήλην, ρσξίο λα παξεκβαίλνπλ κε ηελ
ηξέρνπζα θαηάζηαζε ηεο ζειίδαο. ΢ην άξζξν ηνπ φπνπ επηλφεζε ηνλ φξν «AJAX», ν Jesse
James Garrett εμεγνχζε φηη νη απαηηνχκελεο ηερλνινγίεο ήηαλ νη εμήο:

Σελ γιψζζα ζήκαλζεο HTML ή ηελ XHTML θαη ηελ γιψζζα θχιισλ ζηπι CSS,
γηα ηελ παξνπζίαζε

Σν Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (Document Object Model) ή DOM, γηα ηελ
δπλακηθή έθζεζε ησλ δεδνκέλσλ θαζψο θαη ηελ αιιειεπίδξαζε κε απηά.

Σελ γιψζζα ζήκαλζεο XML θαη ηελ γιψζζα κεηαζρεκαηηζκνχ XSLT γηα ηελ
αληαιιαγή, ηελ δηαρείξηζε θαη πξνβνιή ησλ δεδνκέλσλ

Σν αληηθείκελν XMLHttpRequest γηα ηελ αζχγρξνλε επηθνηλσλία

Σελ γιψζζα πξνγξακκαηηζκνχ JavaScript ζαλ ελσηηθφ θξίθν φισλ ησλ παξαπάλσ
ηερλνινγηψλ
Έθηνηε φκσο, επήιζαλ πνιιέο εμειίμεηο ζηηο ηερλνινγίεο πνπ ρξεζηκνπνηνχληαλ γηα ηελ
αλάπηπμε κηαο εθαξκνγήο AJAX, θαζψο θαη ζηνλ θαζνξηζκφ ηνπ φξνπ AJAX. Δηδηθφηεξα,
έρεη δηαπηζησζεί φηη:

Ζ γιψζζα JavaScript δελ είλαη ε κφλε γιψζζα πξνγξακκαηηζκνχ απφ ηελ πιεπξά
ηνπ Πειάηε πνπ κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ αλάπηπμε κηαο εθαξκνγήο AJAX.
Άιιεο γιψζζεο φπσο ε VBScript είλαη ηθαλέο λα παξέρνπλ ηελ απαηηνχκελε
ιεηηνπξγηθφηεηα. Παξφια απηά φκσο, ε JavaScript έρεη παξακείλεη ε πην δεκνθηιήο
γιψζζα ζηνλ πξνγξακκαηηζκφ ηνπ AJAX θπξίσο γηα ηελ ελζσκάησζε θαη ηελ
ζπκβαηφηεηα πνπ έρεη κε ηελ πιεηνςεθία ησλ ζχγρξνλσλ πεξηεγεηψλ Ηζηνχ (Web
Browsers).

Ζ γιψζζα ζήκαλζεο XML δελ είλαη απαξαίηεηε γηα ηελ αληαιιαγή δεδνκέλσλ θαη
θαηά ζπλέπεηα θαη ε γιψζζα κεηαζρεκαηηζκνχ XSLT δελ είλαη αλαγθαία γηα ηελ
δηαρείξηζε ησλ δεδνκέλσλ. ΢πρλά ρξεζηκνπνηείηαη ην κνξθφηππν JSON (JavaScript
Object Notation) ζαλ έλα ελαιιαθηηθφ πξφηππν γηα ηελ αληαιιαγή δεδνκέλσλ,
παξφιν πνπ θαη άιια πξφηππα, φπσο ε πξν-δηακνξθσκέλε (preformatted) HTML ή
αθφκα θαη ην απιφ θείκελν, κπνξνχλ επίζεο λα ρξεζηκνπνηεζνχλ.
Σελίδα | 11
2.1.4 Μεηνλεθηήκαηα θαη Αδπλακίεο
Λφγσ ηεο δπλακηθήο θχζεο ηνπο, νη AJAX δηεπαθέο είλαη ζπρλά δπζθνιφηεξν λα
αλαπηπρζνχλ ζε ζχγθξηζε κε ηηο ζηαηηθέο ζειίδεο. Οη εθαξκνγέο AJAX αλαπφθεπθηα
πεξηιακβάλνπλ εθηέιεζε πνιχπινθσλ ηκεκάησλ JavaScript θψδηθα ζηελ κεξηά ηνπ Πειάηε.
Σν λα γίλεη έλαο ηέηνηνο πεξίπινθνο θψδηθαο απνδνηηθφο θαη ρσξίο ζθάικαηα, είλαη έλαο
ζηφρνο πνπ πξέπεη λα ιεθζεί ζνβαξά ππφςε.
Δπίζεο, νη ζειίδεο πνπ δεκηνπξγήζεθαλ δπλακηθά κε ηελ ρξήζε δηαδνρηθψλ αηηεκάησλ
AJAX δελ θαηαγξάθνπλ απηφκαηα ηνλ εαπηφ ηνπο ζηελ κεραλή ηζηνξηθνχ ηνπ Πεξηεγεηή
(browser). Απηφ έρεη σο απνηέιεζκα ην πάηεκα ηνπ θνπκπηνχ «Πίζυ» ηνπ Πεξηεγεηή λα
κελ κεηαθέξεη ηνλ ρξήζηε πίζσ ζε κηα πξνγελέζηεξε θαηάζηαζε ηεο AJAX ζειίδαο, αιιά
πηζαλφλ λα ηνλ κεηαθέξεη ζηελ ηειεπηαία νιφθιεξε ζειίδα πνπ είρε επηζθεθηεί πξηλ απφ
απηή. Κάπνηεο ηερληθέο επίιπζεο απηνχ ηνπ πξνβιήκαηνο πεξηιακβάλνπλ ηελ ρξήζε
αφξαησλ «IFrames» γηα λα πξνθαιέζνπλ αιιαγέο ζην ηζηνξηθφ ηνπ Πεξηεγεηή θαη γηα λα
αιιάδνπλ ην «μέπορ άγκςπαρ» (anchor portion) ηεο δηεχζπλζεο URL (αθνινπζνχκελν απφ
έλα ζχκβνιν «#» ή hash) φηαλ εθηειεζηεί ην AJAX, θαη παξαθνινπζψληαο ην ζηελ
ζπλέρεηα γηα αιιαγέο.
Οη αιιεπάιιειεο ελεκεξψζεηο ησλ δπλακηθψλ ζειίδσλ έρνπλ δεκηνπξγήζεη έλα επηπιένλ
πξφβιεκα, πνπ έγθεηηαη ζην φηη ν ρξήζηεο δχζθνια κπνξεί λα πξνζζέζεη ζηνπο
ζειηδνδείθηεο ηνπ κηα ζπγθεθξηκέλε θαηάζηαζε ηεο εθαξκνγήο. Λχζεηο γηα απηφ ην
πξφβιεκα ππάξρνπλ, θαη πνιιέο απφ απηέο βαζίδνληαη ζηελ ρξήζε ηνπ «αναγνυπιζηικού
κομμαηιού» (fragment identifier) ηεο δηεχζπλζεο URL (ην θνκκάηη ελφο URL πνπ
βξίζθεηαη κεηά ην ζχκβνιν «#») γηα λα παξαθνινπζνχλ, θαη επνκέλσο λα επηηξέπνπλ ζηνλ
ρξήζηε λα απνζεθεχεη, κηα δεδνκέλε θαηάζηαζε ηεο εθαξκνγήο.
Δίλαη γεγνλφο φηη νη πεξηζζφηεξνη απηφκαηνη θαηαρσξεηέο δηαδηθηχνπ (web crawlers) δελ
εθηεινχλ θψδηθα JavaScript. Δπνκέλσο, νη δηαδηθηπαθέο εθαξκνγέο πνπ έρνπλ πξννξηζηεί
γηα δεκφζηα (αλνηθηή πξνο φινπο) θαηαρψξεζε, πξέπεη λα παξέρνπλ έλαλ ελαιιαθηηθφ κέζν
γηα ηελ πξνζπέιαζε ηνπ πεξηερνκέλνπ ηνπο ην νπνίν, ππφ θαλνληθέο ζπλζήθεο, ζα είρε
αλαθηεζεί κε ηελ ρξήζε ηνπ AJAX, έηζη ψζηε λα επηηξέπνπλ ζηηο κεραλέο αλαδήηεζεο λα ην
θαηαρσξήζνπλ ζηηο βάζεηο ηνπο.
Έλα πνιχ ζεκαληηθφ κεηνλέθηεκα είλαη απηφ ηεο ζπκβαηφηεηαο κε ζπζθεπέο πνπ δελ
ππνζηεξίδνπλ φιεο ηηο ηερλνινγίεο πνπ αμηνπνηεί κηα AJAX εθαξκνγή. Κάζε ρξήζηεο πνπ ν
Πεξηεγεηήο ηνπ δελ ππνζηεξίδεη ηελ ρξήζε ηεο JavaScript ή ηνπ αληηθεηκέλνπ
XMLHttpRequest, ή απιψο έρεη απελεξγνπνηεκέλεο απηέο ηηο ιεηηνπξγίεο, δελ ζα είλαη ζε
ζέζε λα ρξεζηκνπνηήζεη θαηάιιεια ηηο ζειίδεο πνπ ζηεξίδνληαη ζηελ ρξήζε ηνπ AJAX.
Οκνίσο, ζπζθεπέο φπσο θηλεηά ηειέθσλα, πξνζσπηθνί ειεθηξνληθνί βνεζνί (Personal
Σελίδα | 12
Digital Assistants ή PDAs) θαη νζφλεο αλάγλσζεο (Screen Readers) ελδερνκέλσο λα κελ
παξέρνπλ ππνζηήξημε γηα ηηο απαηηνχκελεο ηερλνινγίεο. Αθφκε θαη νη νζφλεο αλάγλσζεο πνπ
ππνζηεξίδνπλ AJAX, κπνξεί λα κελ έρνπλ ηελ δπλαηφηεηα λα «δηαβάζνπλ» θαηάιιεια ην
δπλακηθά παξαγφκελν πεξηερφκελν. Ο κφλνο ηξφπνο γηα λα επηηξαπεί ζηνλ ρξήζηε λα
ρξεζηκνπνηήζεη ηελ εθαξκνγή, είλαη λα γπξίζνπκε πίζσ ζε κεζφδνπο πνπ δελ ρξεζηκνπνηνχλ
θαζφινπ ηελ JavaScript. Απηφ κπνξεί λα επηηεπρζεί κφλν εθφζνλ επηβεβαησζεί φηη φιεο νη
δηαζπλδέζεηο (links) θαη νη θφξκεο (forms) ηεο εθαξκνγήο κπνξνχλ λα απνδνζνχλ
θαηάιιεια, θαη δελ ζα βαζίδνληαη απνθιεηζηηθά ζηελ ρξήζε AJAX. Έπεηηα, απφ ηελ πιεπξά
ηεο JavaScript, ε ππνβνιή ηεο θφξκαο ζα κπνξνχζε λα ζηακαηήζεη κε ηελ εληνιή «return
false».
Έλαο πνιχ ζεκαληηθφο πεξηνξηζκφο ζηελ ρξήζε ηνπ AJAX έγθεηηαη ζηελ θνηλή πνιηηηθή
θαηαγσγήο (Same Origin Policy). Ζ πνιηηηθή απηή είλαη έλα ζεκαληηθφ ζρέδην αζθάιεηαο ην
νπνίν ηζρχεη γηα νξηζκέλεο γιψζζεο πξνγξακκαηηζκνχ πνπ εθηεινχληαη ζηελ πιεπξά ηνπ
Πεξηεγεηή (δειαδή ηνπ Πειάηε) φπσο ε JavaScript. ΢πλνπηηθά, ε πνιηηηθή απηή επηηξέπεη
ζηα ηξέρνληα θνκκάηηα θψδηθα (running scripts) ησλ ζειίδσλ, ηα νπνία πξνέξρνληαη απφ
ηνλ ίδην δηθηπαθφ ηφπν, λα έρνπλ πξφζβαζε ζηηο κεηαμχ ηνπο κεζφδνπο θαη ηδηφηεηεο ρσξίο
εηδηθνχο πεξηνξηζκνχο, αιιά ηνπο απνηξέπεη λα έρνπλ πξφζβαζε ζην κεγαιχηεξν κέξνο ησλ
κεζφδσλ θαη ησλ ηδηνηήησλ θαηά κήθνο ησλ ζειίδσλ πνπ βξίζθνληαη ζε δηαθνξεηηθνχο
δηθηπαθνχο ηφπνπο. Με βάζε ηα παξαπάλσ ινηπφλ, κεξηθέο ηερληθέο πνπ εθαξκφδνληαη ζην
AJAX δελ επηηξέπεηαη λα ρξεζηκνπνηεζνχλ θαηά κήθνο ησλ ηνκέσλ (domains), αιιά ζα
πξέπεη λα πεξηνξηζηνχλ ζε ρξήζε κφλν θάησ απφ ηνλ ίδην ηνκέα (domain). Μηα ιχζε έξρεηαη
απφ ηελ θνηλνπξαμία W3C, κε ηελ δηάζεζε ελφο πξνζρεδίνπ πάλσ ζην αληηθείκελν
XMLHttpRequest ην νπνίν πξννξίδεηαη λα ηνπ επηηξέςεη απηήλ ηελ ιεηηνπξγία.
Σειεηψλνληαο, πξέπεη λα ζεκεησζεί πσο φπσο θαη άιιεο ηερλνινγίεο ηνπ δηαδηθηχνπ, ην
AJAX έρεη ην δηθφ ηνπ ζχλνιν απφ ηξσηά ζεκεία, ηα νπνία νη πξνγξακκαηηζηέο θαινχληαη
λα αληηκεησπίζνπλ. Δίλαη γεγνλφο, φηη πξνγξακκαηηζηέο κε εμνηθείσζε ζε άιιεο ηερλνινγίεο
ηνπ δηαδηθηχνπ ζα πξέπεη λα κειεηήζνπλ πάλσ ζε λέεο κεζφδνπο θσδηθνπνίεζεο θαη
δνθηκψλ, γηα λα είλαη ζε ζέζε λα γξάςνπλ αζθαιείο AJAX εθαξκνγέο. Έλα επηπιένλ ζέκα
πνπ πξνθχπηεη αθνξά ην φηη νη Γηεπαθέο πνπ θάλνπλ ρξήζε ηνπ AJAX κπνξνχλ λα απμήζνπλ
δξακαηηθά ηνλ αξηζκφ ησλ αηηήζεσλ πνπ παξάγνπλ νη ρξήζηεο, πξνο ηνπο Γηαθνκηζηέο
δηαδηθηχνπ θαζψο θαη ζηηο ιεηηνπξγίεο πνπ θξχβνπλ πίζσ ηνπο, φπσο νη Βάζεηο Γεδνκέλσλ
θαη άιιεο. Απηφ κνηξαία κπνξεί λα νδεγήζεη ζε κεγαιχηεξνπο ρξφλνπο απφθξηζεο ή/θαη
πξφζζεηεο αλάγθεο γηα επηπιένλ ή θαιχηεξν πιηθφ (hardware).
Σελίδα | 13
2.2 Η Γιώζζα Σήκαλζεο HTML
Ζ γιψζζα HTML, ηεο νπνίαο ε νλνκαζία πξνέξρεηαη απφ ηα αξρηθά ηνπ «HyperText
Markup Language» («Γλώζζα Σήμανζηρ Υπεπκειμένος»), είλαη ε θπξίαξρε γιψζζα
ζήκαλζεο γηα ηηο ηζηνζειίδεο. Παξέρεη ηα κέζα γηα ηελ δεκηνπξγία δνκεκέλσλ εγγξάθσλ
(structured documents) κε ηελ ππνδήισζε κηαο δνκηθήο ζεκαζηνινγίαο ζε θείκελν φπσο
επηθεθαιίδεο, παξάγξαθνη, ιίζηεο θ.ιπ., θαζψο θαη ζε ζπλδέζεηο (links), παξαζέζεηο (quotes)
θαη άιια ζηνηρεία. Δπηηξέπεη ζε εηθφλεο θαη αληηθείκελα λα ελζσκαησζνχλ θαη λα
ρξεζηκνπνηεζνχλ γηα ηελ δεκηνπξγία δηαδξαζηηθψλ θνξκψλ (interactive forms). Δίλαη
γξακκέλε ζε κνξθή «ζηνηρείσλ HTML» πνπ απνηεινχληαη απφ «εηηθέηεο» (tags) νη νπνίεο
πεξηβάιινληαη απφ γσληαθέο αγθχιεο («<» θαη «>») θαη βξίζθνληαη εληφο ηνπ πεξηερνκέλνπ
ηεο ηζηνζειίδαο. Μπνξεί λα ζπκπεξηιακβάλεη (include) ή λα θνξηψλεη θνκκάηηα θψδηθα
(scripts) ζε γιψζζεο φπσο ε JavaScript ηα νπνία επηδξνχλ ηελ ζπκπεξηθνξά ησλ
επεμεξγαζηψλ ηεο HTML, φπσο νη Πεξηεγεηέο Ηζηνχ (Web Browsers) θαη ηα θχιια ζηπι
CSS, γηα ηνλ θαζνξηζκφ ηεο εκθάληζεο θαη ηεο δηάηαμεο ηνπ θεηκέλνπ θαη άιινπ πιηθνχ. Ζ
θνηλνπξαμία W3C, ε νπνία ζπληεξεί ηα πξφηππα ηεο HTML θαη ησλ CSS, ελζαξξχλεη ηελ
ρξήζε ησλ θχιισλ ζηπι CSS πάλσ ζε ζαθή παξνπζηαζηηθή ζήκαλζε.
2.3 Η γιώζζα θύιισλ ζηπι CSS
Ζ Cascading Style Sheets ή CSS είλαη κηα γιψζζα θχιισλ ζηπι, ε νπνία ρξεζηκνπνηείηαη
γηα λα πεξηγξάςεη ηελ ζεκαζηνινγία παξνπζίαζεο (δειαδή ηελ φςε θαη ηελ κνξθνπνίεζε)
ελφο εγγξάθνπ πνπ είλαη γξακκέλν ζε κηα γιψζζα ζήκαλζεο. Ζ πην θνηλή εθαξκνγή ηεο
είλαη ε πεξηγξαθή ηνπ ζηπι ηζηνζειίδσλ πνπ είλαη γξακκέλεο ζε γιψζζα HTML ή XHTML,
αιιά κπνξεί επίζεο λα εθαξκνζηεί ζε νπνηνδήπνηε είδνπο έγγξαθν γξακκέλν ζε θψδηθα
XML. Ζ CSS είλαη θπξίσο ζρεδηαζκέλε γηα λα επηηξέπεη ηνλ δηαρσξηζκφ ηνπ πεξηερνκέλνπ
ηνπ εγγξάθνπ (γξακκέλν ζε HTML ή θάπνηα παξφκνηα γιψζζα ζήκαλζεο) απφ ηελ
παξνπζίαζε ηνπ εγγξάθνπ, ζπκπεξηιακβαλνκέλσλ ησλ ζηνηρείσλ φπσο είλαη ε δηάηαμε, ηα
ρξψκαηα θαη νη γξακκαηνζεηξέο. Απηφο ν δηαρσξηζκφο κπνξεί λα βειηηψζεη ηελ
πξνζβαζηκφηεηα ηνπ πεξηερνκέλνπ, λα παξέρεη πεξηζζφηεξε επειημία θαη έιεγρν ζηνλ
πξνζδηνξηζκφ ησλ ραξαθηεξηζηηθψλ ηεο παξνπζίαζεο, λα επηηξέπεη ζε πνιιαπιέο ζειίδεο λα
κνηξάδνληαη ηελ ίδηα κνξθνπνίεζε, θαη λα κεηψζεη ηελ πνιππινθφηεηα θαη ηελ επαλάιεςε
ηνπ δνκηθνχ πεξηερνκέλνπ (π.ρ. ην φηη επηηξέπεη ηνλ ζρεδηαζκφ ηζηνζειίδσλ ρσξίο ηελ ρξήζε
πηλάθσλ) . Ζ CSS κπνξεί επίζεο λα επηηξέςεη ζηελ ίδηα ζειίδα ζήκαλζεο λα παξνπζηαζηεί
κε δηαθνξεηηθά ζηπι γηα δηαθνξεηηθέο κεζφδνπο απφδνζεο, φπσο είλαη ε απφδνζε ζε νζφλε,
ζε εθηχπσζε, ζε θσλή (φηαλ δηαβάδεηαη απφ έλα πξφγξακκα πεξηήγεζεο βαζηζκέλν ζηελ
Σελίδα | 14
νκηιία) θαη ζε ζπζθεπέο αθήο γηα αλζξψπνπο κε πξνβιήκαηα φξαζεο βαζηζκέλεο ζην
ζχζηεκα Braille. Δλψ ν ζπληάθηεο ελφο εγγξάθνπ κπνξεί ηππηθά λα ζπλδέζεη ην έγγξαθν κε
έλα θχιιν ζηπι CSS, ν αλαγλψζηεο κπνξεί λα ρξεζηκνπνηήζεη έλα δηαθνξεηηθφ θχιιν ζηπι,
ίζσο θάπνην απφ ηνλ δηθφ ηνπ ππνινγηζηή, γηα λα παξαθάκςεη απηφ πνπ ν ζπληάθηεο έρεη
νξίζεη. Ζ CSS πξνζδηνξίδεη ιεπηνκεξψο έλα ζχζηεκα πξνηεξαηφηεηαο γηα ηνλ θαζνξηζκφ
ησλ θαλφλσλ ζηπι πνπ πξέπεη λα εθαξκνζηνχλ, εάλ γηα έλα ζπγθεθξηκέλν ζηνηρείν
αληηζηνηρνχλ πεξηζζφηεξνη απφ έλαο θαλφλεο. Οη πξνδηαγξαθέο γηα ηελ γιψζζα CSS
ηεξνχληαη απφ ηελ θνηλνπξαμία W3C. Ωο «ηχπνο δηαδηθηπαθνχ κέζνπ» (Internet media
type) γηα ηελ CSS έρεη θαηαρσξεζεί λα ρξεζηκνπνηείηαη ην «text/css».
2.4 Η γιώζζα JavaScript
Ζ JavaScript είλαη κηα αληηθεηκελνζηξαθήο γιψζζα πξνγξακκαηηζκνχ πνπ αλήθεη ζηελ
θαηεγνξία ησλ γισζζψλ «ζεναπίος» («scripting languages»), δειαδή ησλ γισζζψλ πνπ
επηηξέπνπλ ηνλ έιεγρν κίαο ή πεξηζζνηέξσλ εθαξκνγψλ ινγηζκηθνχ. ΢πλήζσο νη «scripting»
γιψζζεο είλαη ελζσκαησκέλεο εληφο ηεο εθαξκνγήο ινγηζκηθνχ πνπ ειέγρνπλ. Ζ JavaScript
επηηξέπεη ηελ πξνγξακκαηηζηηθή πξφζβαζε ζε αληηθείκελα πνπ πεξηέρνληαη ζε κία εθαξκνγή
ζηελ πιεπξά ηνπ Πειάηε θαη ζε άιινπ είδνπο εθαξκνγψλ. Υξεζηκνπνηείηαη θαηά θχξην ιφγν
κε ηελ κνξθή ηεο «JavaScript ζηελ πιεπξά ηνπ Πειάηε» («client-side JavaScript»), ε
νπνία πινπνηείηαη σο έλα ελζσκαησκέλν εμάξηεκα (integrated component) ηνπ
πξνγξάκκαηνο πεξηήγεζεο, επηηξέπνληαο ηελ αλάπηπμε εκπινπηηζκέλσλ δηεπαθψλ ρξήζηε
θαη δπλακηθψλ ηζηνζειίδσλ.
Ζ JavaScript είλαη κηα δηάιεθηνο πνπ αθνινπζεί ην πξφηππν «ECMAScript» θαη
ραξαθηεξίδεηαη σο κία δπλακηθή, «ραιαξήο δαθηπινγξάθεζεο» («loose typing» ή «weak
typing»), βαζηζκέλεο ζε πξσηφηππν («prototype-based») γιψζζα κε πξψηεο θιάζεο
ζπλαξηήζεηο. Ζ JavaScript επεξεάζηεθε απφ πνιιέο γιψζζεο θαη ζρεδηάζηεθε λα κνηάδεη κε
ηελ Java, αιιά λα είλαη επθνιφηεξε ζην λα «δνπιεπηεί» απφ κε πξνγξακκαηηζηέο. Ζ
JavaScript, παξά ην φλνκα, δελ έρεη νπζηαζηηθά θακία ζρέζε κε ηελ γιψζζα Java, παξά ην
γεγνλφο φηη έρνπλ επηθαλεηαθέο νκνηφηεηεο κεηαμχ ηνπο.
Σελίδα | 15
2.5 To Μνληέιν DOM (Document Object Model)
2.5.1 Τη είλαη ην DOM;
Σν Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (DOM) είλαη κηα ζχκβαζε γηα ηνλ ζπκβνιηζκφ θαη ηελ
αιιειεπίδξαζε κε ηα αληηθείκελα (objects) κέζα ζε έλα έγγξαθν HTML, XHTML θαη
XML, ε νπνία είλαη αλεμάξηεηε πιαηθφξκαο (cross-platform) θαη αλεμάξηεηε γιψζζαο
πξνγξακκαηηζκνχ (language-independent). Σα ζπζηαηηθά ηνπ κνληέινπ DOM, φπσο γηα
παξάδεηγκα ηα «΢ηνηρεία» ηνπ («Elements»), κπνξνχλ λα «δηεπζπλζηνδνηεζνχλ» θαη λα
δηαρεηξηζηνχλ κέζα απφ ην ζπληαθηηθφ ηεο γιψζζαο πξνγξακκαηηζκνχ πνπ ρξεζηκνπνηείηαη.
Ζ δεκφζηα δηεπαθή ελφο κνληέινπ DOM θαζνξίδεηαη κέζα απφ ζηελ δηθή ηνπ Γηεπαθή
Αλάπηπμεο Δθαξκνγψλ (Application Programming Interface ή API).
2.5.2 Ιζηνξία
Ζ ηζηνξία ηνπ κνληέινπ DOM είλαη ζπλπθαζκέλε κε ηελ ηζηνξία ηνπ ιεγφκελνπ θαη
«Πφιεκνπ ησλ Πεξηεγεηψλ» ζηα ηέιε ηεο δεθαεηίαο ηνπ 1990 κεηαμχ ηνπ Netscape
Navigator θαη ηνπ Microsoft Internet Explorer, θαζψο θαη κε εθείλε ηεο γιψζζαο
JavaScript θαη ηεο γιψζζαο JScript, νη νπνίεο ήηαλ νη πξψηεο γιψζζεο πξνγξακκαηηζκνχ
πνπ ελζσκαηψζεθαλ επξέσο ζηηο «κεραλέο δηάηαμεο» (layout engines) ησλ πεξηεγεηψλ
Ηζηνχ.
2.5.2.1 DOM Δπηπέδνπ 0
Ζ γιψζζα JavaScript θπθινθφξεζε απφ ηελ Netscape Communications ην 1996 εληφο ηνπ
πεξηεγεηή ηεο Netscape Navigator 2.0. Ζ αληαγσλίζηξηα ηεο Netscape, ε Microsoft,
θπθινθφξεζε ηνλ πεξηεγεηή Internet Explorer 3.0 αξγφηεξα ηελ ίδηα ρξνληά κε κία
«κεηαθνξά» (port) ηεο γιψζζαο JavaScript, κε ην φλνκα JScript. Καη νη δπν γιψζζεο
επέηξεπαλ
ζηνπο
πξνγξακκαηηζηέο
δηαδηθηχνπ
λα
δεκηνπξγνχλ
ηζηνζειίδεο
κε
δηαδξαζηηθφηεηα ζηελ πιεπξά ηνπ Πειάηε (client-side interactivity). Οη πεξηνξηζκέλεο
δπλαηφηεηεο ηεο πξψηεο γεληάο απηψλ ησλ γισζζψλ, γηα ηνλ εληνπηζκφ ησλ ζπκβάλησλ πνπ
είραλ πξνθιεζεί απφ ηνλ ρξήζηε (user-generated events) θαη ηεο ηξνπνπνίεζεο ηνπ
εγγξάθνπ HTML, έγηλαλ ηειηθά γλσζηέο σο «DOM Δπιπέδος 0» ή «Legacy DOM»
(«θιεξνλνκηά DOM»). Καλέλα αλεμάξηεην πξφηππν δελ αλαπηχρζεθε γηα ην «DOM
Δπιπέδος 0», αιιά πεξηγξάθηεθε ελ κέξεη ζηηο πξνδηαγξαθέο ηεο γιψζζαο HTML4.
Σν «Legacy DOM» είρε πεξηνξηζκνχο ζηα είδε ησλ ζηνηρείσλ (elements) πνπ έδηλε
πξφζβαζε. Σα ζηνηρεία πνπ αληηπξνζψπεπαλ θφξκα, ζχλδεζε (link) θαη εηθφλα κπνξνχζαλ
λα αλαθεξζνχλ κε κία ηεξαξρηθή νλνκαζία πνπ μεθηλνχζε απφ ην αληηθείκελν «ξίδα» (root
Σελίδα | 16
element) ηνπ εγγξάθνπ. Μηα ηεξαξρηθή νλνκαζία κπνξνχζε λα θάλεη ρξήζε είηε ησλ
νλνκάησλ είηε ηνπ δηαδνρηθνχ δείθηε (sequential index) ησλ ζηνηρείσλ πνπ δηέζρηδε. Γηα
παξάδεηγκα, έλα ζηνηρείν θφξκαο εηζφδνπ (form input element) κπνξνχζε λα πξνζπειαζεί
είηε σο «έγγξαθν.φλνκαΦφξκαο.φλνκαΔηζφδνπ» είηε σο «έγγξαθν.θφξκεο[0].ζηνηρεία[0]».
Έλα ζεκαληηθφ ραξαθηεξηζηηθφ ηνπ «Legacy DOM» ήηαλ ε δπλαηφηεηα λα γίλεη έιεγρνο
εγθπξφηεηαο κηα θφξκαο απφ ηελ πιεπξά ηνπ Πειάηε, κε ηελ ρξήζε ηνπ δεκνθηινχο εθέ
«rollover» («αλαηξνπήο»).
2.5.2.2 Δλδηάκεζν DOM
Σν 1997, ε Netscape θαη ε Microsoft θπθινθφξεζαλ ακθφηεξεο ηηο εθδφζεηο 4.0 ησλ
Netscape Navigator θαη Internet Explorer αληίζηνηρα, πξνζζέηνληαο ππνζηήξημε γηα ηελ
Dynamic HTML (DHTML), ιεηηνπξγία πνπ επηηξέπεη αιιαγέο ζε έλα θνξησκέλν έγγξαθν
HTML. Ζ DHTML απαηηνχζε «επεθηάζεηο» (extensions) ζην ζηνηρεηψδεο αληηθείκελν
εγγξάθνπ πνπ ήηαλ δηαζέζηκν ζηηο πινπνηήζεηο ηνπ «Legacy DOM». Αλ θαη νη πινπνηήζεηο
ηνπ «Legacy DOM» ήηαλ ζε κεγάιν βαζκφ ζπκβαηέο, επεηδή ε JScript ήηαλ βαζηζκέλε
ζηελ JavaScript, νη «επεθηάζεηο» ηεο DHTML ζην κνληέιν DOM είραλ αλαπηπρζεί
παξάιιεια θαη απφ ηνπο δπν θαηαζθεπαζηέο ησλ πεξηεγεηψλ θαη παξέκεηλαλ κε ζπκβαηέο.
Απηέο νη εθδφζεηο ηνπ κνληέινπ DOM έκεηλαλ γλσζηέο σο ην «Intermediate DOM»
(Δλδηάκεζν DOM).
Οη εθδφζεηο ησλ «Intermediate DOM» επέηξεπαλ ηνλ ρεηξηζκφ ησλ ηδηνηήησλ (properties)
ησλ θχιισλ ζηπι Cascading Style Sheets (CSS), νη νπνίεο επεξέαδαλ ηελ εκθάληζε ελφο
εγγξάθνπ. Έδηλαλ επίζεο πξφζβαζε ζε έλα λέν ραξαθηεξηζηηθφ κε ην φλνκα «layers»
(«ζηξψκαηα») κέζσ ηεο ηδηφηεηαο «document.layers» (ζηνλ Netscape Navigator) θαη ηεο
ηδηφηεηαο «document.all» (γηα ηνλ Internet Explorer). Δμ’ αηηίαο ησλ ζεκειησδψλ
αζπκβαηνηήησλ αλάκεζα ζηα δπν «Intermediate DOM», ε «αλεμάξηεηε-πεξηεγεηή»
(«cross-browser») αλάπηπμε απαηηνχζε εηδηθφ ρεηξηζκφ γηα θάζε ππνζηεξηδφκελν
πξφγξακκα πεξηήγεζεο. Μεηαγελέζηεξεο εθδφζεηο ηνπ Netscape Navigator εγθαηέιεηςαλ
ηελ ππνζηήξημε γηα ηνλ δηθφ ηνπ κνληέιν «Intermediate DOM». Ο Internet Explorer
ζπλερίδεη λα ππνζηεξίδεη ην δηθφ ηνπ κνληέιν γηα ιφγνπο ζπκβαηφηεηαο «πξνο ηα πίζσ»
(backwards compatibility).
2.5.2.3 Σππνπνίεζε
Ζ θνηλνπξαμία World Wide Web Consortium (W3C), ηδξχζεθε ην 1994 γηα ηελ πξνψζεζε
αλνηθηψλ πξνηχπσλ (open standards) γηα ηνλ Παγθφζκην Γηαδηθηπαθφ Ηζηφ. Ήηαλ απηή πνπ
κάδεςε ζην ίδην ηξαπέδη ηελ Netscape Communications, ηελ Microsoft καδί κε άιιεο
εηαηξίεο γηα ηελ αλάπηπμε ελφο πξνηχπνπ γηα ηηο γιψζζεο πξνγξακκαηηζκνχ ησλ πεξηεγεηψλ,
Σελίδα | 17
ην νπνίν νλνκάζηεθε «ECMAScript». Ζ πξψηε έθδνζε ηνπ πξνηχπνπ δεκνζηεχηεθε ην
1997. Αθνινχζεζαλ εθδφζεηο ηεο γιψζζαο JavaScript θαη ηεο JScript νη νπνίεο
ελζσκάησζαλ ην πξφηππν «ECMAScript» γηα κεγαιχηεξε ζπκβαηφηεηα, αλεμάξηεηα ηνπ
πξνγξάκκαηνο πεξηήγεζεο.
Μεηά ηελ θπθινθνξία ηνπ πξνηχπνπ «ECMAScript», ε W3C άξρηζε ηηο εξγαζίεο γηα έλα
ηππνπνηεκέλν κνληέιν DOM. Σν αξρηθφ πξφηππν κνληέινπ DOM, γλσζηφ σο «DOM
Δπίπεδος 1», πξνηάζεθε απφ ηελ W3C ζηα ηέιε ηνπ 1998. ΢ρεδφλ ηαπηφρξνλα
θπθινθφξεζε ε έθδνζε 5.0 ηνπ Internet Explorer ε νπνία παξείρε πεξηνξηζκέλε
ππνζηήξημε γηα ην κνληέιν «DOM Δπιπέδος 1». Σν «Δπίπεδο 1» παξείρε έλα πιήξεο
κνληέιν γηα έλα νιφθιεξν έγγξαθν HTML ή XML, ζπκπεξηιακβαλνκέλσλ θαη ησλ κέζσλ
γηα ηελ αιιαγή νπνηνπδήπνηε κέξνπο ηνπ εγγξάθνπ απηνχ. Με ζπκβαηά πξνγξάκκαηα
πεξηήγεζεο, φπσο ν Internet Explorer 4.x θαη ο Netscape Navigator 4.x, εμαθνινπζνχζαλ
λα ρξεζηκνπνηνχληαη επξέσο σο ηα ηέιε ηνπ 2000.
΢ηα ηέιε ηνπ 2000 δφζεθε ζηελ δεκνζηφηεηα ην πξφηππν «DOM Δπιπέδος 2». Δηζήγαγε ηελ
ζπλάξηεζε (function) «getElementById» θαζψο θαη έλα κνληέιν ζπκβάλησλ (event
model), ελψ παξείρε θαη ππνζηήξημε γηα ηα «namespaces» ηεο XML θαη ηελ γιψζζα
θχιισλ ζηπι CSS. Σν πξφηππν «DOM Δπιπέδος 3», πνπ απνηειεί θαη ηελ ηξέρνπζα έθδνζε
ηεο πξνδηαγξαθήο γηα ην κνληέιν DOM, δεκνζηεχηεθε ηνλ Απξίιην ηνπ 2004, θαη πξνζζέηεη
ππνζηήξημε γηα ηελ γιψζζα «XPath» θαζψο θαη ρεηξηζκφ ζπκβάλησλ ηνπ πιεθηξνινγίνπ.
Δπίζεο πξνζηέζεθε κηα δηεπαθή γηα ηελ «ζεηξηνπνίεζε» (serialization) εγγξάθσλ σο θψδηθα
XML.
Μέρξη ην 2005, κεγάια ηκήκαηα ηνπ πξνηχπνπ DOM ηεο W3C απνιάκβαλαλ πνιχ θαιήο
ππνζηήξημεο απφ ηα θνηλά πξνγξάκκαηα πεξηήγεζεο πνπ ήηαλ «ζπκκνξθσκέλα» κε ην
πξφηππν «ECMAScript», ζπκπεξηιακβαλνκέλσλ ησλ Internet Explorer 6 (2001), Opera,
Safari θαη φισλ ησλ πεξηεγεηψλ πνπ ζηεξίδνληαη ζηελ κεραλή Gecko ηεο Mozilla (φπσο ν
Firefox θαη ν Camino).
2.5.3 Δθαξκνγέο ζηα πξνγξάκκαηα Πεξηήγεζεο Ιζηνύ
Έλαο πεξηεγεηήο Ηζηνχ δελ είλαη ππνρξεσκέλνο λα ρξεζηκνπνηεί ην κνληέιν DOM
πξνθεηκέλνπ λα απεηθνλίζεη (render) έλα έγγξαθν HTML. Ωζηφζν, ην κνληέιν DOM
απαηηείηαη απφ ηελ γιψζζα JavaScript φηαλ πξφθεηηαη λα επηζεσξήζεη (inspect), ή λα
ηξνπνπνηήζεη, δπλακηθά κηα ηζηνζειίδα. Με άιια ιφγηα, ην «Document Object Model»
είλαη ν ηξφπνο πνπ ε JavaScript βιέπεη ηελ πεξηερφκελε HTML ζειίδα ηεο θαη ηελ
θαηάζηαζε (state) ηνπ πξνγξάκκαηνο πεξηήγεζεο.
Σελίδα | 18
2.5.4 Υινπνηήζεηο
Γεδνκέλνπ φηη ην κνληέιν DOM ππνζηεξίδεη πινήγεζε ζε νπνηαδήπνηε θαηεχζπλζε (π.ρ.,
ηνπ «παηέξα» θαη ηνπ πξνεγνχκελνπ «αδεξθνχ») θαη επηηξέπεη απζαίξεηεο ηξνπνπνηήζεηο,
κηα πινπνίεζε πξέπεη ηνπιάρηζηνλ λα απνζεθεχεη ζηελ κλήκε (buffer) ην έγγξαθν ην νπνίν
έρεη «δηαβαζηεί» κέρξη ηφηε, ή έζησ θάπνηα αλαιπκέλε (parsed) κνξθή ηνπ.
2.5.4.1 Μεραλέο Γηάηαμεο (Layout Engines)
Σα πξνγξάκκαηα πεξηήγεζεο Ηζηνχ βαζίδνληαη ζηηο «κεραλέο δηάηαμεο» γηα λα αλαιχζνπλ
(parse) ηελ HTML ζε έλα κνληέιν DOM. Μεξηθέο «κεραλέο δηάηαμεο» φπσο ε Gecko, ε
Trident/MSHTML θαη ε Presto είλαη ζπλδεδεκέλεο θπξίσο ή θαη απνθιεηζηηθά κε έλα
ζπγθεθξηκέλν πξφγξακκα πεξηήγεζεο φπσο ν Firefox, ν Internet Explorer θαη ν Opera
αληίζηνηρα. Άιιεο, φπσο ε WebKit, ρξεζηκνπνηνχληαη απφ θνηλνχ απφ έλαλ αξηζκφ
πεξηεγεηψλ, φπσο ν Safari θαη ν Chrome ηεο Google. Οη δηάθνξεο «κεραλέο δηάηαμεο»
πινπνηνχλ ηα πξφηππα ηνπ κνληέινπ DOM κε πνηθίινπο βαζκνχο «ζπκκφξθσζεο».
2.5.4.2 Βηβιηνζήθεο
Τινπνηήζεηο ηνπ κνληέινπ DOM:

Libxml2

MSXML

Xerces (κηα πινπνίεζε ηνπ κνληέινπ DOM ζε γιψζζα C++ κε «δεζκεχζεηο»
(bindings) ησλ γισζζψλ Java θαη Pearl)
Γηεπαθέο Αλάπηπμεο Δθαξκνγψλ (APIs) πνπ εθζέηνπλ πινπνηήζεηο ηνπ κνληέινπ DOM:

JAXP (Java API γηα Γηεξγαζία (Processing) θψδηθα XML) είλαη κηα API γηα ηελ
πξφζβαζε παξφρσλ ηνπ κνληέινπ DOM
Δλαιιαθηηθέο βηβιηνζήθεο XML πνπ βαζίδνληαη ζε δεληξηθή δνκή θαη δελ ππνζηεξίδνπλ ην
κνληέιν DOM:

VTD-XML (είλαη κηα βηβιηνζήθε Java ε νπνία πξνζθέξεη ελαιιαθηηθή πξνβνιή ησλ
εγγξάθσλ XML, βαζηζκέλε ζε δέληξν)
Σελίδα | 19
2.6 Τν Αληηθείκελν XMLHttpRequest
2.6.1 Τη είλαη ην XMLHttpRequest;
Σν
XMLHttpRequest
είλαη
κηα
Γηεπαθή
Αλάπηπμεο
Δθαξκνγψλ
(Application
Programming Interface ή API) ηνπ κνληέινπ DOM (Document Object Model). Μπνξεί
λα ρξεζηκνπνηεζεί κέζα ζε κηα γιψζζα πξνγξακκαηηζκνχ ελφο Πεξηεγεηή Γηαδηθηχνπ, φπσο
ε JavaScript, γηα λα ζηείιεη έλα αίηεκα HTTP (Hypertext Transfer Protocol) ή HTTPS
(HTTP Secure) απεπζείαο ζε έλαλ Γηαθνκηζηή δηαδηθηχνπ θαη λα θνξηψζεη ηα δεδνκέλα
απάληεζήο ηνπ Γηαθνκηζηή απεπζείαο πίζσ ζηελ γιψζζα. Απφ ηελ ζηηγκή πνπ ηα δεδνκέλα
βξεζνχλ κέζα ζηελ γιψζζα, είλαη δηαζέζηκα ηφζν σο έλα XML (eXtensible Markup
Language) έγγξαθν, αλ ε απάληεζε είρε έγθπξε ζήκαλζε XML, θαη σο «απλό κείμενο»
(plain text). Σα δεδνκέλα XML κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα λα πξνζαξκνζηεί (λα
επεμεξγαζηεί, λα παξαπνηεζεί) ην ηξέρνλ ελεξγφ έγγξαθν ζην παξάζπξν ηνπ Πεξηεγεηή,
ρσξίο λα απαηηείηαη απφ ηνλ Πειάηε λα θνξηψζεη κηα θαηλνχξγηα έθδνζε ηνπ εγγξάθνπ ηεο
ηζηνζειίδαο. Δπηπξφζζεηα, ηα δεδνκέλα ζε «απιφ θείκελν» κπνξνχλ λα αμηνινγεζνχλ εληφο
ηεο γιψζζαο πξνγξακκαηηζκνχ θαη λα πξνζαξκφζνπλ θαη απηά ην έγγξαθν. Γηα παξάδεηγκα,
εάλ ρξεζηκνπνηείηαη ε γιψζζα JavaScript, ην «απιφ θείκελν» κπνξεί λα δηακνξθσζεί σο
JSON (JavaScript Object Notation) απφ ηνλ Γηαθνκηζηή δηαδηθηχνπ θαη λα αμηνινγεζεί
απφ ηελ JavaScript γηα λα δεκηνπξγεζεί έλα αληηθείκελν δεδνκέλσλ (data object) γηα ρξήζε
πάλσ ζην ηξέρνλ κνληέιν DOM.
Δξ.: Σν AJAX είλαη απιά έλα άιιν όλνκα γηα ην XMLHttpRequest;
Απ.: Όρη. Σν XMLHttpRequest είλαη κόλν έλα κέξνο ηνπ AJAX. Σν
XMLHttpRequest είλαη ην ηερληθό εμάξηεκα (component) πνπ θάλεη ηελ αζύγρξνλε
επηθνηλωλία κε ηελ Γηαθνκηζηή δπλαηή.
-- Jesse James Garrett
2.6.2 Η Σρέζε ηνπ XMLHttpRequest κε ην AJAX
Σν αληηθείκελν XMLHttpRequest παίδεη ίζσο ηνλ πην ζεκαληηθφ ξφιν ζηελ δηαδηθηπαθή
ηερληθή αλάπηπμεο AJAX. Γηα λα ιεθζεί ή λα ζηαιεί πιεξνθνξία απφ/πξνο κηα βάζε
δεδνκέλσλ ή έλα αξρείν ζηνλ Γηαθνκηζηή ρξεζηκνπνηψληαο παξαδνζηαθή JavaScript,
έπξεπε λα γίλνπλ ηα παξαθάησ βήκαηα:

Αξρηθά ζα έπξεπε λα δεκηνπξγεζεί κηα HTML θφξκα

Ο ρξήζηεο ζα έπξεπε λα παηήζεη ην θνπκπί «Υποβολή» (Submit button) γηα λα
ζηείιεη/ιάβεη ηελ πιεξνθνξία
Σελίδα | 20

΢ηελ ζπλέρεηα λα πεξηκέλεη ηνλ Γηαθνκηζηή λα απαληήζεη

Καη ηειηθά ζα θνξησλφηαλ κηα λέα ζειίδα κε ηα απνηειέζκαηα.
Λφγσ ηνπ φηη ν Γηαθνκηζηήο επέζηξεθε κηα λέα ζειίδα θάζε θνξά πνπ ν ρξήζηεο ππέβαιε
κηα λέα είζνδν (input), νη παξαδνζηαθέο δηαδηθηπαθέο εθαξκνγέο έπξεπε λα εθηεινχληαη
αξγά θαη έηζη έηεηλαλ λα γίλνληαη ιηγφηεξν θηιηθέο πξνο ηνλ ρξήζηε (user-friendly). Με ην
AJAX, ε JavaScript κπνξνχζε λα επηθνηλσλήζεη απεπζείαο κε ηνλ Γηαθνκηζηή, θαη απηφ δελ
ζα κπνξνχζε λα γίλεη, παξά κφλν κέζσ ηεο ρξήζεο ηνπ αληηθεηκέλνπ XMLHttpRequest. Γη
απηφ ην ιφγν, ην AJAX δελ ζα ππήξρε εάλ δελ είρε αλαπηπρζεί ην αληηθείκελν
XMLHttpRequest, θαζψο φιε ε θηινζνθία ηνπ ζηεξίδεηαη ζηελ αζχγρξνλε επηθνηλσλία πνπ
απηφ ηνπ πξνζθέξεη.
Με ηελ ρξήζε ηνπ αληηθεηκέλνπ XMLHttpRequest, κηα ηζηνζειίδα κπνξεί λα θάλεη κηα
αίηεζε πξνο, θαη λα πάξεη κηα απάληεζε απφ, έλαλ Γηαθνκηζηή δηαδηθηχνπ, ρσξίο λα
μαλαθνξησζεί ε ζειίδα. Ο ρξήζηεο ζα κείλεη ζηελ ίδηα ζειίδα, θαη ν θψδηθάο πνπ ηξέρεη ζην
παξαζθήλην θαη αληαιιάζεη ζειίδεο κε ηνλ Γηαθνκηζηή, ζα ιεηηνπξγεί πεξλψληαο
απαξαηήξεηνο γη απηφλ.
2.6.3 Ιζηνξία θαη Υπνζηήξημε
Ζ γεληθή ηδέα πίζσ απφ ην αληηθείκελν XMLHttpRequest δεκηνπξγήζεθε αξρηθά απφ ηνπο
ππεχζπλνπο γηα ηελ αλάπηπμε ηεο ππεξεζίαο ειεθηξνληθνχ ηαρπδξνκείνπ «Outlook Web
Access», κέζα ζηα πιαίζηα αλάπηπμεο ηεο ηερλνινγίαο Γηαθνκηζηή «Microsoft Exchange
Server 2000» ηεο γλσζηήο εηαηξίαο. Αλαπηχρζεθε κηα δηεπαθή κε ην φλνκα
«IXMLHTTPRequest», ε νπνία ζηελ ζπλέρεηα ελζσκαηψζεθε ζηελ δεχηεξε έθδνζε ηεο
βηβιηνζήθεο MSXML, βαζηζκέλε ζηελ αξρηθή γεληθή ηδέα. Ζ δεχηεξε έθδνζε ηεο
βηβιηνζήθεο MSXML θπθινθφξεζε κε ηνλ Πεξηεγεηή «Internet Explorer 5.0» ηεο
εηαηξίαο, ηνλ Μάξηην ηνπ 1999, ε νπνία θαη επέηξεπε ηελ πξφζβαζε, κέζσ ηνπ ζπζηήκαηνο
(framework)
ActiveX,
ζηελ
δηεπαθή
IXMLHTTPRequest
ρξεζηκνπνηψληαο
ην
«πεπικάλςμμα» (wrapper) XMLHTTP ηεο βηβιηνζήθεο.
Ζ κε θεξδνζθνπηθή νξγάλσζε Mozilla Foundation αλέπηπμε θαη ελζσκάησζε κηα δηεπαθή
κε ην φλνκα nslXMLHttpRequest κέζα ζηελ «μησανή διάηαξηρ» (layout engine) Gecko.
Απηή ε δηεπαθή είρε κνληεινπνηεζεί έηζη ψζηε ε ιεηηνπξγία ηεο λα πιεζηάδεη φζν ην δπλαηφλ
πεξηζζφηεξν ζε απηήλ ηεο δηεπαθήο IXMLHTTPRequest ηεο Microsoft. Ζ Mozilla
δεκηνχξγεζε έλα «πεπικάλςμμα» (wrapper) γηα ηελ ρξήζε απηήο ηεο δηεπαθήο κέζσ ελφο
αληηθεηκέλνπ ηεο JavaScript, ην νπνίν νλφκαζε XMLHttpRequest. Σν αληηθείκελν
XMLHttpRequest έγηλε πξνζηηφ κε ηελ θπθινθνξία ηεο έθδνζεο 0.6 ηεο κεραλήο Gecko,
ζηηο 6 Γεθεκβξίνπ ηνπ 2000, δελ ήηαλ φκσο πιήξσο ιεηηνπξγηθφ. Γηα λα γίλεη, ρξεηάζηεθε
πεξίπνπ ελάκηζε ρξφλνο, έσο φηνπ ε Mozilla λα θπθινθφξεζε ηελ έθδνζε 1.0 ηεο κεραλήο
Σελίδα | 21
Gecko, ηνλ Ηνχλην ηνπ 2002. Έπεηηα, ην αληηθείκελν XMLHttpRequest έγηλε έλα «de facto»
πξφηππν κεηαμχ ησλ ππφινηπσλ θπξηνηέξσλ «ανηιππόζυπυν σπήζηη» (user agents). Γηα ην
ιεηηνπξγηθφ ζχζηεκα ηεο εηαηξίαο Apple, ην Mac OS, ην πξφηππν ελζσκαηψζεθε ζην
πεξηεγεηή δηαδηθηχνπ Safari απφ ηελ έθδνζή 1.2 πνπ θπθινθφξεζε ηνλ Φεβξνπάξην ηνπ
2004, θαη ζηνλ πεξηεγεηή δηαδηθηχνπ iCab απφ ηελ έθδνζε 3.0b352 πνπ θπθινθφξεζε ηνλ
΢επηέκβξην ηνπ 2005. Σν πξφηππν ελζσκαηψζεθε θαη ζηνλ πεξηεγεηή ηζηνχ Opera, απφ ηελ
έθδνζε 8.0 πνπ θπθινθφξεζε ηνλ Απξίιην ηνπ 2005, ελψ δελ άξγεζε λα ελζσκαησζεί θαη
ζηνλ πεξηεγεηή ηζηνχ Konqueror ηνπ ιεηηνπξγηθνχ ζπζηήκαηνο Linux.
Ζ θνηλνπξαμία World Wide Web Consortium (W3C) δεκνζίεπζε έλα «ζε εμέιημε»
Πξνζρέδην (Working Draft) πξνδηαγξαθήο γηα ην αληηθείκελν XMLHttpRequest ζηηο 5
Απξίιην ηνπ 2006, ην νπνίν είρε ζπληαρζεί απφ ηελ Anne Van Kesteren ηεο εηαηξίαο Opera
Software θαη ηνλ Dean Jackson ηεο W3C. ΢θνπφο ηνπ πξνζρεδίνπ, ζχκθσλα κε ηνπο
ζπληάθηεο ηνπ ήηαλ «ε ηεθκεξίσζε ελφο ειάρηζηνπ ζπλφινπ απφ ζπκβαηά ραξαθηεξηζηηθά
(interoperable features) πνπ ζα βαζίδνληαλ πάλσ ζηηο ππάξρνληεο πινπνηήζεηο, ην νπνίν ζα
επέηξεπε ζηνπο πξνγξακκαηηζηέο δηαδηθηχνπ λα ρξεζηκνπνηνχλ απηά ηα ραξαθηεξηζηηθά
ρσξίο ηελ ρξήζε θψδηθα ν νπνίνο ζα ήηαλ ζπγθεθξηκέλεο πιαηθφξκαο (platform-specific
code). Ζ ηειεπηαία αλαζεψξεζε ηεο πξνδηαγξαθήο ηνπ αληηθεηκέλνπ XMLHttpRequest
έγηλε ζηηο 19 Ννεκβξίνπ ηνπ 2009, ην νπνίν θαηαηάζζεηαη αθφκα ζην ζηάδην εμέιημεο.
Παξάιιεια, ε θνηλνπξαμία W3C έρεη δεκνζηεχζεη θαη έλα επηπιένλ πξνζρέδην
πξνδηαγξαθήο γηα ην αληηθείκελν XMLHttpRequest, ζηηο 25 Φεβξνπαξίνπ ηνπ 2008, ην
νπνίν επίζεο βξίζθεηαη ζε ζηάδην εμέιημεο θαη είρε ηίηιν «XMLHttpRequest Δπίπεδο 2».
Σν «Δπίπεδο 2» απνηειείηαη απφ επεθηάζεηο ζηελ ιεηηνπξγηθφηεηα ηνπ αληηθεηκέλνπ
XMLHttpRequest. Μεξηθέο απφ απηέο ηηο επεθηάζεηο είλαη ηα ζπκβάληα πξνφδνπ (progress
events), ε ππνζηήξημε γηα αηηήκαηα κεηαμχ δηθηπαθψλ ηφπσλ θαη ε κεηαρείξηζε ησλ ξνψλ
ησλ bytes (byte streams). Ζ ηειεπηαία αλαζεψξεζε ζηελ πξνδηαγξαθή ηνπ «Δπίπεδος 2»
έγηλε ζηηο 30 ΢επηεκβξίνπ ηνπ 2008, ελψ εμαθνινπζεί λα ραξαθηεξίδεηαη σο πξνζρέδην «ελ
εμειίμεη».
Ζ Microsoft πξφζζεζε ην αλαγλσξηζηηθφ (identifier) ηνπ αληηθεηκέλνπ XMLHttpRequest
ζηηο δηθέο ηεο γιψζζεο πξνγξακκαηηζκνχ κε ηνλ πεξηεγεηή Internet Explorer 7.0, ν νπνίνο
βγήθε ζηελ θπθινθνξία ηνλ Οθηψβξην ηνπ 2006, έμη κήλεο κεηά ην αξρηθφ πξνζρέδην ηεο
πξνδηαγξαθήο ηνπ XMLHttpRequest. Δδψ πξέπεη λα επηζεκαλζεί ην πξφβιεκα πνπ ππάξρεη
κε ηηο πξνγελέζηεξεο εθδφζεηο ηνπ πεξηεγεηή Internet Explorer, 5.0, 5.5 θαη 6. ΢ηηο εθδφζεηο
5 θαη 6 δελ θαζνξίδεηαη ην αλαγλσξηζηηθφ γηα ην αληηθείκελν XMLHttpRequest κέζα ζηηο
γιψζζεο πξνγξακκαηηζκνχ ηνπο, θαζψο ην αλαγλσξηζηηθφ δελ είρε γίλεη πξφηππν ηνλ θαηξφ
πνπ απηέο νη εθδφζεηο θπθινθφξεζαλ. Γηα λα επηηεπρζεί ε ζπκβαηφηεηα «πξνο ηα πίζσ»
(backward compatibility) ζα πξέπεη λα γίλεη κηα αλίρλεπζή αληηθεηκέλνπ (object detection)
Σελίδα | 22
γηα ηελ δηαπίζησζε εάλ ην αλαγλσξηζηηθφ ηνπ XMLHttpRequest πθίζηαηαη ή φρη. Οη
ηζηνζειίδεο πνπ θάλνπλ ρξήζε ηνπ XMLHttpRequest ή ηνπ XMLHTTP κπνξνχλ λα
κεηξηάζνπλ ηηο ηξέρνπζεο κηθξνδηαθνξέο ζηηο πινπνηήζεηο, είηε κε ηελ ελζπιάθσζε ηνπ
αληηθεηκέλνπ XMLHttpRequest ζην εζσηεξηθφ ελφο «πεπικαλύμμαηορ» (wrapper) ηεο
JavaScript, είηε κε ηελ ρξήζε ελφο ππάξρνληνο πιαηζίνπ (framework) πνπ ηελ θάλεη. Καη
ζηηο δχν πεξηπηψζεηο, ην «πεπικάλςμμα» πξέπεη λα αλαγλσξίδεη ηηο ηθαλφηεηεο πνπ έρνπλ νη
ηξέρνπζεο πινπνηήζεηο θαη λα ιεηηνπξγεί κέζα ζηα πιαίζηα ησλ αλαγθψλ ηνπ.
2.6.4 Τν Αίηεκα HTTP
΢ε απηήλ ηελ ππνελφηεηα ζα πεξηγξαθεί ν ηξφπνο κε ηνλ νπνίν ιεηηνπξγεί έλα αίηεκα πνπ
θάλεη ρξήζε ηνπ αληηθεηκέλνπ XMLHttpRequest ζηα πιαίζηα ελφο «ανηιππόζυπος
σπήζηη» (user agent) πνπ «ζπκκνξθψλεηαη» κε ην «ελ εμειίμεη» πξνζρέδην ηεο θνηλνπξαμία
W3C. Καζψο ην πξφηππν ηεο W3C γηα ην αληηθείκελν XMLHttpRequest είλαη αθφκα έλα
πξνζρέδην, νη «ανηιππόζυποι σπήζηη» δελ είλαη ππνρξεσκέλνη λα «πηνζεηήζνπλ» φιεο ηηο
ιεηηνπξγίεο πνπ νξίδεη ε W3C, επνκέλσο νπνηνδήπνηε απφ ηα παξαθάησ ππφθεηληαη ζε
αιιαγέο. Ηδηαίηεξε πξνζνρή πξέπεη λα δίλεηαη θαηά ηνλ πξνγξακκαηηζκφ κε ην αληηθείκελν
XMLHttpRequest πνπ αθνξά πνιιαπινχο «ανηιπποζώποςρ σπήζηη». Παξαθάησ ζα
επηρεηξεζεί ε θαηαγξαθή ησλ αληηθάζεσλ κεηαμχ ησλ θπξηφηεξσλ «ανηιππόζυπυν
σπήζηη».
2.6.4.1 Η Μέζνδνο «open»
Σα αηηήκαηα HTTP θαη HTTPS ηνπ αληηθεηκέλνπ XMLHttpRequest πξέπεη λα
αξρηθνπνηεζνχλ κέζσ ηεο κεζφδνπ «open». Απηή ε κέζνδνο πξέπεη λα θιεζεί πξηλ απφ ηελ
πξαγκαηηθή απνζηνιή κηαο αίηεζεο, γηα λα επηθπξψζεη θαη λα αλαιχζεη ηελ κέζνδν αίηεζεο,
ηελ δηεχζπλζε URL, θαη ηελ δηεχζπλζε URI (Uniform Resource Identifier, Ομοιόμοπθο
Αναγνυπιζηικό Πηγήρ)
ησλ ζηνηρείσλ ηνπ ρξήζηε, ηα νπνία θαη πξφθεηηαη λα
ρξεζηκνπνηεζνχλ γηα ηελ αίηεζε. Απηή ε κέζνδνο δελ δηαβεβαηψλεη φηη ε δηεχζπλζε URL
ππάξρεη ή φηη ηα ζηνηρεία ηνπ ρξήζηε είλαη ζσζηά. Ζ κέζνδνο κπνξεί λα δερηεί έσο θαη πέληε
παξακέηξνπο, απαηηεί φκσο κφλν δχν γηα λα αξρηθνπνηήζεη κηα αίηεζε.
Ζ πξψηε παξάκεηξνο ηεο κεζφδνπ είλαη κηα ζπκβνινζεηξά θεηκέλνπ (text string) πνπ
ππνδεηθλχεη ηελ κέζνδν αίηεζεο HTTP πνπ ρξεζηκνπνηεί. Οη κέζνδνη αίηεζεο πνπ πξέπεη λα
ππνζηεξίδνληαη απφ έλαλ «ζπκκνξθσκέλν» «ανηιππόζυπο σπήζηη», φπσο πεξηγξάθνληαη
απφ ην πξνζρέδην ηεο W3C γηα ην αληηθείκελν XMLHttpRequest, έρνπλ θαηαγξαθεί επί ηνπ
παξφληνο σο νη εμήο:

GET (Τπνζηεξίδεηαη απφ ηνλ IE7+, Mozilla 1+)

POST (Τπνζηεξίδεηαη απφ ηνλ IE7+, Mozilla 1+)
Σελίδα | 23

HEAD (Τπνζηεξίδεηαη απφ ηνλ IE7+)

PUT

DELETE

OPTIONS (Τπνζηεξίδεηαη απφ ηνλ IE7+)
Ωζηφζν, νη κέζνδνη αίηεζεο δελ πεξηνξίδνληαη ζε εθείλεο πνπ αλαγξάθνληαη παξαπάλσ. Σν
πξνζρέδην ηεο W3C δειψλεη φηη έλα πξφγξακκα πεξηήγεζεο κπνξεί λα ππνζηεξίδεη
επηπξφζζεηεο κεζφδνπο αίηεζεο, θαηά ηελ δηθή ηνπο θξίζε.
Ζ δεχηεξε παξάκεηξνο ηεο κεζφδνπ είλαη άιιε κία ζπκβνινζεηξά θεηκέλνπ, ε νπνία
ππνδεηθλχεη ηελ δηεχζπλζε URL ηεο αίηεζεο HTTP. H W3C πξνηείλεη φηη ηα πξνγξάκκαηα
πεξηήγεζεο ζα πξέπεη λα εκθαλίδνπλ έλα ζθάικα (raise an error) θαη λα κελ επηηξέπνπλ ηελ
αίηεζε κηα δηεχζπλζεο URL ε νπνία ζα αλαθέξεηαη είηε ζε δηαθνξεηηθή ζχξα (port), είηε ζε
δηαθνξεηηθφ ζπζηαηηθφ «ihost» (ihost component) ηεο δηεχζπλζεο URI απφ ην ηξέρνλ
έγγξαθν.
Ζ ηξίηε παξάκεηξνο είλαη κηα «ινγηθή» («Boolean») ηηκή ε νπνία ππνδεηθλχεη εάλ ε αίηεζε
είλαη, ή δελ είλαη, αζχγρξνλε. Απηή ε παξάκεηξνο δελ είλαη απαηηνχκελε ζχκθσλα κε ην
πξνζρέδην ηεο W3C. Ζ πξνεπηιεγκέλε ηηκή ηεο παξακέηξνπ ζα πξέπεη λα ζεσξείηαη φηη είλαη
ε «αληθήρ» («true») απφ έλαλ «ανηιππόζυπο σπήζηη» πνπ είλαη ζπκκνξθσκέλνο κε ηελ
W3C, φηαλ ε παξάκεηξνο δελ έρεη νξηζηεί. Μηα αζχγρξνλε αίηεζε («true») δελ ζα πεξηκέλεη
γηα κηα απάληεζε ηνπ Γηαθνκηζηή πξηλ λα ζπλερίζεη κε ηελ εθηέιεζε ηνπ ηξέρνληνο
θνκκαηηνχ θψδηθα. Αληηζέησο, ζα επηθαιεζηεί ηνλ «ακποαηή ζςμβάνηυν» (event listener)
«onreadystatechange» ηνπ αληηθεηκέλνπ XMLHttpRequest θαηά ηελ δηάξθεηα ησλ
δηάθνξσλ ζηαδίσλ ηεο αίηεζεο. Μηα ζχγρξνλε αίηεζε («false») σζηφζν, ζα ζηακαηήζεη ηελ
εθηέιεζε ηνπ ηξέρνληνο θνκκαηηνχ θψδηθα έσο φηνπ ε αίηεζε έρεη νινθιεξσζεί, ρσξίο λα
επηθαιεζηεί ηνλ «ακποαηή ζςμβάνηυν» «onreadystatechange».
Ζ ηέηαξηε θαη πέκπηε παξάκεηξνο αθνξνχλ ηνλ ρξήζηε θαη ηνλ θσδηθφ πξφζβαζεο,
αληίζηνηρα, ηεο δηεχζπλζεο URI. Απηέο νη παξάκεηξνη δελ απαηηνχληαη θαη πξέπεη λα
ρξεζηκνπνηείηαη σο πξνεπηινγή ν ηξέρνλ ρξήζηεο θαη θσδηθφο πξφζβαζεο ηνπ εγγξάθνπ,
εθφζνλ απηά δελ παξέρνληαη, φπσο νξίδεηαη απφ ην πξνζρέδην ηεο W3C.
2.6.4.2 Η Μέζνδνο «setRequestHeader»
Με ηελ επηηπρή αξρηθνπνίεζε κηαο αίηεζεο, ε κέζνδνο «setRequestHeader» ηνπ
αληηθεηκέλνπ XMLHttpRequest κπνξεί λα θιεζεί γηα λα ζηείιεη «κεθαλίδερ» (headers) ηνπ
πξσηνθφιινπ HTTP κε ηελ αίηεζε. Ζ πξψηε παξάκεηξνο απηήο ηεο κεζφδνπ είλαη ην φλνκα
ηηο ζπκβνινζεηξάο θεηκέλνπ ηεο «κεθαλίδαρ». Ζ δεχηεξε παξάκεηξνο είλαη ε ηηκή ηεο
ζπκβνινζεηξάο θεηκέλνπ. Ζ κέζνδνο απηή πξέπεη λα θιεζεί γηα θάζε «κεθαλίδα» πνπ
ρξεηάδεηαη λα ζηαιεί κε ηελ αίηεζε. Οπνηεζδήπνηε «κεθαλίδερ» πνπ ζπλάπηνληαη εδψ ζα
Σελίδα | 24
αθαηξεζνχλ ηελ επφκελε θνξά πνπ ζα θιεζεί ε κέζνδνο «open» ζηελ πεξίπησζε ελφο
ζπκκνξθσκέλνπ κε ηελ W3C «ανηιππόζυπος σπήζηη».
2.6.4.3 Η Μέζνδνο «send»
Γηα λα ζηαιεί κηα αίηεζε HTTP, πξέπεη λα θιεζεί ε κέζνδνο «send» ηνπ αληηθεηκέλνπ
XMLHttpRequest. Απηή ε κέζνδνο δέρεηαη κία κφλν παξάκεηξν ε νπνία πεξηέρεη ην
πεξηερφκελν πνπ πξέπεη λα ζηαιζεί κε ηελ αίηεζε. Ζ παξάκεηξνο απηή κπνξεί λα παξαιεθζεί
εάλ δελ ππάξρεη πεξηερφκελν πνπ πξέπεη λα ζηαιζεί. Σν πξνζρέδην ηεο W3C αλαθέξεη φηη ε
παξάκεηξνο απηή κπνξεί λα είλαη νπνηνπδήπνηε ηχπνπ πνπ είλαη δηαζέζηκνο ζηελ γιψζζα
πξνγξακκαηηζκνχ, αξθεί λα κπνξεί λα κεηαηξαπεί ζε ζπκβνινζεηξά θεηκέλνπ, κε εμαίξεζε
ην αληηθείκελν εγγξάθνπ DOM (DOM document). Δάλ έλαο «ανηιππόζυπορ σπήζηη» δελ
κπνξέζεη λα κεηαηξέςεη απηήλ ηελ παξάκεηξν ζε ζπκβνινζεηξά, ηφηε ε παξάκεηξνο πξέπεη
λα αγλνεζεί.
Δάλ ε παξάκεηξνο είλαη έλα αληηθείκελν εγγξάθνπ DOM, ν «ανηιππόζυπορ σπήζηη» πξέπεη
λα δηαζθαιίζεη φηη ην έγγξαθν έρεη κεηαηξαπεί ζε «νξζψο-κνξθνπνηεκέλν» (well-formed)
θψδηθα XML, ρξεζηκνπνηψληαο ηελ θσδηθνπνίεζε πνπ ππνδεηθλχεηαη απφ ηελ ηδηφηεηα
(property) «inputEncoding» ηνπ αληηθεηκέλνπ ηνπ εγγξάθνπ. Δάλ ε θεθαιίδα αίηεζεο
«Content-Type» δελ έρεη πξνζηεζεί αθφκα κέζσ ηεο κεζφδνπ «setRequestHeader», ζα
πξέπεη λα πξνζηεζεί απηφκαηα απφ έλαλ ζπκκνξθσκέλν «ανηιππόζυπο σπήζηη»
σο
«application/xml;charset= charset», φπνπ «charset» είλαη ε θσδηθνπνίεζε πνπ
ρξεζηκνπνηήζεθε γηα λα θσδηθνπνηεζεί ην έγγξαθν.
2.6.4.4 Ο Αθξναηήο ΢πκβάληωλ «onreadystatechange»
Δάλ ε κέζνδνο «open» ηνπ αληηθεηκέλνπ XMLHttpRequest θιεζεί κε ηελ ηξίηε παξάκεηξν
λα έρεη νξηζηεί σο «αληθήρ» γηα κηα αζχγρξνλε αίηεζε, ηφηε ν «ακποαηήρ ζςμβάνηυν»
«onreadystatechange» ζα θιεζεί απηνκάησο γηα θάζε κία απφ ηηο αθφινπζεο ελέξγεηεο νη
νπνίεο
αιιάδνπλ
ηελ
ηδηφηεηα
(property)
«readyState»
ηνπ
αληηθεηκέλνπ
XMLHttpRequest.

Μεηά απφ ηελ επηηπρή θιήζε ηεο κεζφδνπ «open», ε ηδηφηεηα «readyState» ηνπ
αληηθεηκέλνπ XMLHttpRequest πξέπεη λα νξηζηεί κε ηελ ηηκή «1».

Μεηά απφ ηελ θιήζε ηεο κεζφδνπ «send» θαη ηελ ιήςε ησλ «θεθαιίδσλ» HTTP ηεο
απάληεζεο, ε ηδηφηεηα «readyState» ηνπ αληηθεηκέλνπ XMLHttpRequest πξέπεη λα
νξηζηεί κε ηελ ηηκή «2».

Μφιηο ην πεξηερφκελν ηεο HTTP απάληεζεο αξρίδεη λα θνξηψλεηαη, ε ηδηφηεηα
«readyState» ηνπ αληηθεηκέλνπ XMLHttpRequest πξέπεη λα νξηζηεί κε ηελ ηηκή
«3».
Σελίδα | 25

Μφιηο νινθιεξσζεί ε θφξησζε ηνπ πεξηερφκελνπ ηεο HTTP απάληεζεο, ε ηδηφηεηα
«readyState» ηνπ αληηθεηκέλνπ XMLHttpRequest πξέπεη λα νξηζηεί κε ηελ ηηκή
«4».
Οη θπξηφηεξνη «ανηιππόζυποι σπήζηη» είλαη αζπλεπείο κε ηνλ ρεηξηζκφ ηνπ «ακποαηή
ζςμβάνηυν» «onreadystatechange».
2.6.4.5 Η Απάληεζε HTTP
Μεηά απφ κία επηηπρεκέλε θαη νινθιεξσκέλε θιήζε ηεο κεζφδνπ «send» ηνπ αληηθεηκέλνπ
XMLHttpRequest, εάλ ε απάληεζε ηνπ Γηαθνκηζηή ήηαλ έγθπξνο θψδηθαο XML θαη ε
«κεθαλίδα» «Content-Type» πνπ έρεη ζηαιζεί απφ ηνλ Γηαθνκηζηή έρεη γίλεη θαηαλνεηή
απφ ηνλ «ανηιππόζυπο σπήζηη» σο έλαο XML «ηύπορ μέζυν Γιαδικηύος» (XML
Internet media type), ε ηδηφηεηα (property) «responseXML» ηνπ αληηθεηκέλνπ
XMLHttpRequest ζα πεξηέρεη έλα αληηθείκελν εγγξάθνπ DOM (DOM document object).
Μηα άιιε ηδηφηεηα, ε «responseText», ζα πεξηέρεη ηελ απάληεζε ηνπ Γηαθνκηζηή ζε «απιφ
θείκελν», απφ έλαλ ζπκκνξθσκέλν «ανηιππόζυπο σπήζηη», αλεμάξηεηα απφ ην εάλ ήηαλ ή
δελ ήηαλ θαηαλνεηή σο θψδηθαο XML.
2.7 Η βηβιηνζήθε jQuery
2.7.1 Τη είλαη ε jQuery;
Ζ jQuery είλαη κηα «ειαθξηά» βηβιηνζήθε ηεο γιψζζαο JavaScript, ε νπνία είλαη
αλεμάξηεηε πξνγξάκκαηνο πεξηήγεζεο θαη δίλεη έκθαζε ζηελ αιιειεπίδξαζε κεηαμχ ηεο
JavaScript θαη ηεο HTML. Κπθινθφξεζε απφ ηνλ John Resig ηνλ Ηαλνπάξην ηνπ 2006 ζηελ
ζπλδηάζθεςε BarCamp πνπ έιαβε ρψξα ζηε Νέα Τφξθε. Ζ jQuery είλαη ε πην δεκνθηιήο
βηβιηνζήθε ηεο JavaScript ζήκεξα, θαζψο ρξεζηκνπνηείηαη απφ ην 27% ησλ δέθα ρηιηάδσλ
πην δεκνθηιψλ ηζηνζειίδσλ παγθνζκίσο.
Ζ jQuery δηαλέκεηαη δσξεάλ θαη αλήθεη ζηελ θαηεγνξία ηνπ ινγηζκηθνχ αλνηθηνχ θψδηθα
(open source software). Κπθινθνξεί κε δχν άδεηεο ρξήζεο, ηελ «MIT License» θαη ηελ
«GNU General Public License, Version 2». Σν ζπληαθηηθφ ηεο jQuery έρεη ζρεδηαζηεί λα
θάλεη επθνιφηεξε ηελ πινήγεζε ζε έλα έγγξαθν, ηελ επηινγή ζηνηρείσλ ηνπ κνληέινπ DOM,
ηελ δεκηνπξγία εθέ θηλήζεσο (animations),
αλάπηπμεο
εθαξκνγψλ
AJAX.
Δπίζεο,
ηεο δηαρείξηζεο ησλ ζπκβάλησλ, θαη ηεο
ε
jQuery
παξέρεη
δπλαηφηεηεο
ζηνπο
πξνγξακκαηηζηέο λα δεκηνπξγήζνπλ «ζπκπιεξσκαηηθά πξνγξάκκαηα» (plug-ins) πάλσ απφ
ηελ
βηβιηνζήθε
ηεο
JavaScript.
Δθκεηαιιεπφκελνη
απηήλ
ηελ
δπλαηφηεηα,
νη
πξνγξακκαηηζηέο κπνξνχλ λα δεκηνπξγήζνπλ «αθεξεκέλεο ηδέεο» («abstractions») γηα
Σελίδα | 26
ρακεινχ επηπέδνπ αιιειεπίδξαζε θαη εθέ θίλεζεο, θαζψο θαη πξνεγκέλα εθέ θαη βνεζεηηθέο
εθαξκνγέο (widgets) πςεινχ επηπέδνπ. Με απηφ ηνλ ηξφπν ζπκβάιεη ζηελ δεκηνπξγία
ηζρπξψλ θαη δπλακηθψλ ηζηνζειίδσλ.
Οη εηαηξίεο Microsoft θαη Nokia έρνπλ αλαθνηλψζεη φηη ζρεδηάδνπλ λα ελζσκαηψζνπλ ηελ
jQuery κέζα ζηηο πιαηθφξκεο ηνπο. Ζ Microsoft ζθνπεχεη λα ηελ ελζσκαηψζεη αξρηθά ζην
«Visual Studio» γηα ρξήζε κε ην «πιαίζην» (framework) AJAX θαη ην «πιαίζην» MVC ηεο
ASP.NET. Ζ Nokia ζα ην ελζσκαηψζεη ζηελ πιαηθφξκα ηεο «Web Run-Time». Σν δσξεάλ
θαη αλνηθηνχ θψδηθα «πιαίζην» Seaside, παξέρεη πιήξε ελζσκάησζε ηεο jQuery
επηηξέπνληαο ηελ αλάπηπμε δηαδηθηπαθψλ εθαξκνγψλ θάλνληαο ρξήζε εμ νινθιήξνπ ηεο
γιψζζαο Smalltalk.
2.7.2 Φαξαθηεξηζηηθά
Ζ βηβιηνζήθε jQuery πεξηέρεη ηα αθφινπζα ραξαθηεξηζηηθά:

Δπηινγή ζηνηρείσλ ηνπ κνληέινπ DOM θάλνληαο ρξήζε ηεο αλνηθηνχ ηχπνπ
«κεραλήο επηινγέα» (selector engine) Sizzle, ε νπνία είλαη αλεμάξηεηε
πξνγξάκκαηνο πεξηήγεζεο θαη απνηειεί έλα ππνπξντφλ (spin-off) ηεο jQuery

Γηάζρηζε (traversal) θαη ηξνπνπνίεζε ηνπ κνληέινπ DOM (ζπκπεξηιακβαλνκέλεο
θαη ηεο ππνζηήξημεο γηα θχιια CSS ησλ εθδφζεσλ 1-3)

΢πκβάληα

Υεηξηζκφ ησλ θχιισλ ζηπι CSS

Απιά εθέ θαη εθέ θίλεζεο

AJAX

Δπεθηαζηκφηεηα κέζσ ησλ «ζπκπιεξσκαηηθψλ πξνγξακκάησλ» (plug-ins)

Βνεζεηηθά Δξγαιεία (Utilities) φπσο ν εληνπηζκφο ηεο έθδνζεο ηνπ πξνγξάκκαηνο
πεξηήγεζεο θαη ε ζπλάξηεζε «each».
2.7.3 Φξήζε
Ζ βηβιηνζήθε jQuery ππάξρεη ζπλήζσο σο έλα εληαίν αξρείν ηεο JavaScript, ην νπνίν
πεξηέρεη φια ηα θνηλά κνληέια DOM, ηα ΢πκβάληα, ηα Δθέ, θαη ηηο ζπλαξηήζεηο ηνπ AJAX.
Μπνξεί λα ζπκπεξηιεθζεί ζε κία ηζηνζειίδα απιά κε ηελ ρξήζε ηεο παξαθάησ γξακκήο
θψδηθα ζήκαλζεο:
<script type="text/javascript" src="jQuery.js"></script>
Ζ JQuery κπνξεί επίζεο λα πξνζπειαζεί, λα θνξησζεί θαη λα εθηειεζηεί κε ηνλ ίδην αθξηβψο
ηξφπν πνπ κπνξεί θαη ε γιψζζα JavaScript.
Σελίδα | 27
Δπηπξνζζέησο, ε jQuery κπνξεί λα θνξησζεί ρξεζηκνπνηψληαο ηηο βηβιηνζήθεο ηεο Google
γηα ην AJAX, ηηο Google AJAX Libraries API, κε ηελ ρξήζε ηνπ αθφινπζνπ θψδηθα
ζήκαλζεο:
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
Ζ jQuery έρεη δχν ζηπι αιιειεπίδξαζεο:

Μέζσ ηεο ζπλάξηεζεο «$», ε νπνία είλαη κηα «κέζνδνο εξγνζηάζην» (factory
method) γηα ην αληηθείκελν ηεο jQuery. Απηέο νη ζπλαξηήζεηο, πνπ ζπρλά
απνθαινχληαη «εληνιέο», κπνξνχλ λα ρξεζηκνπνηεζνχλ αιπζηδσηά (chainable).
Κάζε κηα απφ απηέο επηζηξέθνπλ ην αληηθείκελν ηεο jQuery (jQuery object).

Μέζσ ησλ ζπλαξηήζεσλ πνπ έρνπλ σο πξφζεκα ην «$.» («$. –prefixed functions»).
Απηέο είλαη «ζπλαξηήζεηο εξγαιεία» (utility functions) νη νπνίεο δελ δνπιεχνπλ κε
ην αληηθείκελν jQuery απηφ θαζ’ εαπηφ.
Μηα ηππηθή ξνή εξγαζίαο γηα ηνλ ρεηξηζκφ πνιιαπιψλ θφκβσλ ηνπ κνληέινπ DOM, μεθηλάεη
κε ηελ θιήζε ηεο ζπλάξηεζεο «$» κε κηα «ζπκβνινζεηξά επηινγέα» ζε γιψζζα CSS (CSS
selector string), πνπ έρεη σο απνηέιεζκα ηελ παξαπνκπή ζε θαλέλα ή πεξηζζφηεξα ζηνηρεία
ηεο ζειίδαο HTML απφ ην αληηθείκελν ηεο jQuery. Απηφ ην ζχλνιν θφκβσλ κπνξεί λα
δηαρεηξηζηεί κε ηελ εθαξκνγή κεζφδσλ «πεξίζηαζεο» (instance methods) ζην αληηθείκελν
ηεο jQuery, ή κπνξεί λα δηαρεηξηζηνχλ νη ίδηνη νη θφκβνη. Γηα παξάδεηγκα ν παξαθάησ
θψδηθαο…:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
…βξίζθεη ηελ έλσζε φισλ ησλ εηηθεηψλ (tags) «div» κε ηελ ηδηφηεηα θιάζεο (class
attribute) «test» θαη φισλ ησλ εηηθεηψλ «p» κε ηελ ηδηφηεηα θιάζεο «quote» ηνπ θχιινπ
CSS, πξνζζέηεη ηελ ηδηφηεηα θιάζεο «blue» ζε θάζε ζηνηρείν πνπ έρεη βξεζεί, θαη ζηε
ζπλέρεηα ηα «θπιάεη» πξνο ηα θάησ κε έλα εθέ θίλεζεο. Οη ζπλαξηήζεηο «$» θαη «add»
επεξεάδνπλ ην ζχλνιν πνπ έρεη βξεζεί, ελψ νη ζπλαξηήζεηο «addClass» θαη «slideDown»
επεξεάδνπλ ηνπο θφκβνπο πνπ αλαθέξνληαη.
Οη κέζνδνη κε ην πξφζεκα «$.» είλαη κέζνδνη επθνιίαο ή επεξεάδνπλ δεκφζηεο ηδηφηεηεο
(global properties) θαη ζπκπεξηθνξέο. Γηα παξάδεηγκα, ν θψδηθαο πνπ αθνινπζεί
παξνπζηάδεη κηα ζπλάξηεζε ραξηνγξάθεζεο ηεο jQuery πνπ νλνκάδεηαη «each» θαη
«γξάθεη» ηνπο αξηζκνχο 234 ζην ηξέρνλ έγγξαθν:
Σελίδα | 28
$.each([1,2,3], function() {
document.write(this + 1);
});
Με ηελ jQuery γίλεηαη πνιχ απιή ε εθηέιεζε εξσηεκάησλ (queries) AJAX ηα νπνία
εθηεινχληαη αλεμάξηεηα κε ην πξφγξακκα πεξηήγεζεο πνπ ρξεζηκνπνηείηαη. Απηφ γίλεηαη κε
ηελ ρξήζεο ηεο «$.ajax» θαη ζπλαθψλ κεζφδσλ γηα λα θνξησζνχλ θαη λα ρεηξηζηνχλ
απνκαθξπζκέλα δεδνκέλα. Σν αθφινπζν θνκκάηη θψδηθα ζα δεκηνπξγήζεη κηα αίηεζε γηα
ηελ δηεχζπλζε «some.php» ε νπνία ζα ζηαιεί ζηνλ Γηαθνκηζηή κε ηηο παξακέηξνπο
«name=John» θαη «location=Boston» θαη φηαλ ε αίηεζε νινθιεξσζεί κε επηηπρία, ε
ζπλάξηεζε «success» ζα εθηειεζηεί γηα λα εηδνπνηήζεη ηνλ ρξήζηε:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Σειεηψλνληαο, αμίδεη λα αλαθεξζεί πσο είλαη εληππσζηαθφ ην γεγνλφο φηη ε βηβιηνζήθε
jQuery ζπγθεληξψλεη ηφζεο πνιιέο ιεηηνπξγίεο θαη επθνιίεο, ελψ παξάιιεια θαηαθέξλεη λα
ηηο «καδεχεη» ζε έλα θαη κνλαδηθφ αξρείν ππξήλα ηνπ νπνίνπ ην κέγεζνο δελ μεπεξλάεη ηα 25
kilobytes.
2.8 Η γιώζζα ζήκαλζεο XML
Ζ γιψζζα XML (eXtensible Markup Language) είλαη νπζηαζηηθά έλα ζχλνιν απφ θαλφλεο
γηα ηελ ειεθηξνληθή θσδηθνπνίεζε εγγξάθσλ. Οξίδεηαη κέζα απφ ηελ πξνδηαγξαθή «XML
1.0», ε νπνία έρεη ζπληαρζεί απφ ηελ θνηλνπξαμία W3C, θαη απφ πνιιέο άιιεο ζρεηηθέο
πξνδηαγξαθέο. Όιεο νη πξνδηαγξαθέο πνπ ηελ νξίδνπλ εληάζζνληαη ζηα δσξεάλ, αλνηθηά
πξφηππα (open standards).
Ζ ΦML ζρεδηάζηεθε κε ζθνπφ λα δνζεί έκθαζε ζηελ απιφηεηα, ζηελ γεληθφηεηα, θαη ζηελ
επρξεζηία γχξσ απφ ην δηαδίθηπν. Πξφθεηηαη γηα κηα κνξθή δεδνκέλσλ ζε θείκελν, κε ηζρπξή
ππνζηήξημε γηα ηηο γιψζζεο ηνπ θφζκνπ κέζσ ηνπ πξνηχπνπ «Unicode». Παξφιν πνπ ε
ζρεδίαζε ηεο XML επηθεληξψλεηαη ζηα έγγξαθα, ε γιψζζα ρξεζηκνπνηείηαη επξέσο γηα ηελ
αλαπαξάζηαζε απζαίξεησλ δνκψλ δεδνκέλσλ, φπσο γηα παξάδεηγκα ζηηο δηαδηθηπαθέο
ππεξεζίεο (web services). Τπάξρεη κηα πνηθηιία απφ πξνγξακκαηηζηηθέο δηεπαθέο ηηο νπνίεο
νη πξνγξακκαηηζηέο πιηθνχ κπνξνχλ λα ρξεζηκνπνηήζνπλ γηα λα έρνπλ πξφζβαζε ζε
Σελίδα | 29
δεδνκέλα XML, θαζψο θαη αξθεηά «ζπζηήκαηα ζρήκαηνο» (schema systems) πνπ έρνπλ
ζρεδηαζηεί λα βνεζάλε ζηνλ θαζνξηζκφ ησλ γισζζψλ πνπ βαζίδνληαη ζηελ XML.
Μέρξη θαη ζήκεξα, έρνπλ αλαπηπρζεί εθαηνληάδεο γιψζζεο νη νπνίεο είλαη βαζηζκέλεο ζηελ
XML, ζπκπεξηιακβαλνκέλσλ ησλ RSS, ATOM, SOAP θαη XHTML. Πξφηππα πνπ είλαη
βαζηζκέλα ζηελ XML έρνπλ γίλεη ε πξνεπηινγή γηα πνιιά εξγαιεία εθαξκνγψλ γξαθείνπ,
φπσο ην Microsoft Office (Office Open XML), ην OpenOffice.org (OpenDocument), θαη
ην iWork ηεο Apple.
2.9 Τν κνξθόηππν JSON
Σν κνξθφηππν JSON (JavaScript Object Notation), είλαη έλα «ειαθξχ» πξφηππν
αληαιιαγήο δεδνκέλσλ γηα ηνλ ππνινγηζηή. Δίλαη έλα πξφηππν πνπ βαζίδεηαη ζε θείκελν
(text-based), είλαη αλαγλψζηκν απφ ηνλ άλζξσπν (human-readable), θαη ρξεζηκνπνηείηαη
γηα ηελ αλαπαξάζηαζε απιψλ δνκψλ δεδνκέλσλ θαη πξνζεηαηξηζηηθψλ ζπζηνηρηψλ
(associative arrays) πνπ νλνκάδνληαη αληηθείκελα (objects).
Σν πξφηππν JSON νξίζηεθε αξρηθά απφ ηνλ Douglas Crockford (πξφηππν RFC 4627). Ο
επίζεκνο ηχπνο δηαδηθηπαθνχ κέζνπ (Internet media type) γηα ην JSON νξίδεηαη σο
«application/json» ελψ ε θαηάιεμε ελφο αξρείνπ JSON έρεη νξηζηεί ε «.json». Σν πξφηππν
JSON ρξεζηκνπνηείηαη ζπρλά γηα ηελ ζεηξηαθή ηνπνζέηεζε (serialization) θαη ηελ κεηάδνζε
δνκεκέλσλ δεδνκέλσλ κέζσ κηαο ζχλδεζεο δηθηχνπ. Υξεζηκνπνηείηαη θπξίσο γηα ηελ
κεηάδνζε δεδνκέλσλ κεηαμχ ελφο Γηαθνκηζηή θαη κηαο δηαδηθηπαθήο εθαξκνγήο,
ρξεζηκεχνληαο σο κηα ελαιιαθηηθή επηινγή γηα ηελ XML.
2.9.1 Ιζηνξία
Παξφιν πνπ ην JSON βαζίζηεθε ζε έλα ππνζχλνιν ηεο γιψζζαο πξνγξακκαηηζκνχ
JavaScript (ζπγθεθξηκέλα ζην πξφηππν «Standard ECMA-262 Έκδοζη 3η – Γεθέκβξηνο
1999») θαη ζπλήζσο ρξεζηκνπνηείηαη ζε ζπλδπαζκφ κε απηήλ ηελ γιψζζα, ζεσξείηε έλα
πξφηππν πνπ είλαη αλεμάξηεην γιψζζαο. Ο θψδηθαο γηα ηελ αλάιπζε θαη παξαγσγή
δεδνκέλσλ ζε JSON είλαη άκεζα δηαζέζηκνο
γηα κηα κεγάιε πνηθηιία γισζζψλ
πξνγξακκαηηζκνχ. Ζ δηεχζπλζε http://json.org παξέρεη έλα πιήξε θαηάινγν απφ ππάξρνληεο
βηβιηνζήθεο JSON, νη νπνίεο είλαη νξγαλσκέλεο αλά γιψζζα. Σνλ Γεθέκβξην ηνπ 2005, ε
εηαηξία «Yahoo!» άξρηζε λα πξνζθέξεη νξηζκέλεο απφ ηηο δηαδηθηπαθέο ηηο ππεξεζίεο ζε
πξφηππν JSON. Σνλ Γεθέκβξην ηνπ 2006, ε εηαηξία Google άξρηζε λα πξνζθέξεη
«ηξνθνδνηήζεηο» (feeds) ηνπ πξνηχπνπ JSON γηα ην δηαδηθηπαθφ πξσηφθνιιφ ηεο «GData».
Σελίδα | 30
2.9.2 Τύπνη Γεδνκέλσλ θαη Σπληαθηηθό
Οη βαζηθνί ηχπνη δεδνκέλσλ ηνπ JSON είλαη νη εμήο:

Αξηζκφο (Number) (αθέξαηνο ή πξαγκαηηθφο)(integer or real)

΢πκβνινζεηξά (String) (πεξηβάιιεηαη απφ δηπιά «”», είλαη πξνηχπνπ Unicode, κε
«ραξαθηήξα δηαθπγήο» ην «\»)

Λνγηθφο (Boolean) (αιεζήο (true) ή ςεπδήο (false))

΢πζηνηρία (Array) (κηα ηαμηλνκεκέλε ζεηξά απφ ηηκέο, νη νπνίεο δηαρσξίδνληαη κε
θφκκα θαη πεξηβάιινληαη απφ ηνπο ραξαθηήξεο «[» θαη «]»)

Αληηθείκελν (Object) (κηα ζπιινγή απφ δεπγάξηα «θιεηδηνχ:ηηκήο» (key:value) ηα
νπνία δηαρσξίδνληαη κε θφκκα θαη πεξηβάιινληαη απφ ηνπο ραξαθηήξεο «{» θαη «}»)

Κελφ (null)
Σν παξάδεηγκα πνπ αθνινπζεί δείρλεη κηα αλαπαξάζηαζε ελφο αληηθεηκέλνπ ζε JSON, ην
νπνίν πεξηγξάθεη έλα άηνκν. Σν αληηθείκελν ρξεζηκνπνηεί πεδία ζπκβνινζεηξψλ (string
fields) γηα ην «φλνκα» θαη ην «επψλπκν», εκπεξηέρεη έλα άιιν αληηθείκελν ην νπνίν
αλαπαξηζηά ηελ δηεχζπλζε ηνπ αηφκνπ, θαη πεξηέρεη θαη κηα ιίζηα (array) απφ αληηθείκελα
κε αξηζκνχο ηειεθψλνπ.
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "fax", "number": "646 555-4567" }
]
}
Έλα πηζαλφ ηζνδχλακν παξάδεηγκα ζε θψδηθα XML θαη κπνξνχζε λα είλαη:
Σελίδα | 31
<Person>
<firstName>John</firstName>
<lastName>Smith</lastName>
<age>25</age>
<address>
<streetAddress>21 2nd Street</streetAddress>
<city>New York</city>
<state>NY</state>
<postalCode>10021</postalCode>
</address>
<phoneNumber type="home">212 555-1234</phoneNumber>
<phoneNumber type="fax">646 555-4567</phoneNumber>
</Person>
΢χκθσλα κε ην πξφηππν RFC, ν ηχπνο δηαδηθηπαθνχ κέζνπ (Internet media type ή MIME)
πνπ πξέπεη λα ρξεζηκνπνηείηαη φηαλ κεηαδίδεηαη έλα αξρείν JSON κέζσ ηνπ πξσηνθφιινπ
HTTP είλαη ην «application/json».
Γεδνκέλνπ φηη ην JSON είλαη έλα ππνζχλνιν ηεο JavaScript, ππάξρεη ε δπλαηφηεηα, αιιά
δελ πξνηείλεηαη, λα αλαιπζεί ην θείκελν JSON ζε έλα αληηθείκελν, κε ηελ θιήζε ηεο
ζπλάξηεζεο «eval()» ηεο JavaScript. Γηα παξάδεηγκα, αο ππνηεζεί φηη ην παξαπάλσ ηκήκα
θεηκέλνπ ζε JSON πεξηιακβάλεηαη ζε κηα κεηαβιεηή ηχπνπ ζπκβνινζεηξάο (string
variable) ηεο JavaScript
πνπ νλνκάδεηαη «contact». Ζ δεκηνπξγία ελφο αληηθεηκέλνπ
JavaScript απφ ηα δεδνκέλα JSON κε ην φλνκα «p», ζα κπνξνχζε λα γίλεη κε ηελ παξαθάησ
δήισζε:
var p = eval("(" + contact + ")");
Ζ κεηαβιεηή «contact» πξέπεη λα πεξηβάιιεηαη απφ παξελζέζεηο γηα λα απνθεπρζεί ε
αζάθεηα ζην ζπληαθηηθφ ηεο JavaScript.
Ωζηφζν, ν πξνηεηλφκελνο ηξφπνο είλαη ε ρξήζε ελφο αλαιπηή (parser) JSON. Γεληθά ζα
πξέπεη λα απνθεχγεηαη ε ρξήζε ηε ζπλάξηεζεο «eval()», εθηφο εάλ ν Πειάηεο εκπηζηεχεηαη
απφιπηα ηελ πεγή ηνπ θεηκέλνπ ή αλ πξέπεη λα αλαιχζεη θαη λα απνδερηεί θείκελν ην νπνίν
δελ είλαη απνιχησο ζπκβαηφ κε ην JSON. Έλαο αλαιπηήο JSON δέρεηαη κφλν έγθπξα
δεδνκέλα JSON, εκπνδίδνληαο έηζη ηελ εθηέιεζε ελδερφκελνπ θαθφβνπινπ θψδηθα.
Οη ζχγρξνλνη πεξηεγεηέο, φπσο ν Firefox 3.5 θαη ν Internet Explorer 8, πεξηιακβάλνπλ
εηδηθά ραξαθηεξηζηηθά γηα ηελ αλάιπζε δεδνκέλσλ JSON. Δθφζνλ ε εγγελήο ππνζηήξημε
είλαη πην απνδνηηθή θαη αζθαιήο απφ ηελ ζπλάξηεζε «eval()», αλακέλεηαη φηη ε εγγελήο
ππνζηήξημε ηνπ πξνηχπνπ JSON ζα ζπκπεξηιεθζεί ζηελ επφκελε έθδνζε ηνπ πξνηχπνπ
«ECMAScript».
Σελίδα | 32
2.9.3 Σρήκα JSON
Τπάξρνπλ πνιινί ηξφπνη γηα λα γίλεη επαιήζεπζε ηεο δνκήο θαη ησλ ηχπσλ δεδνκέλσλ κέζα
ζε έλα αληηθείκελν JSON, φπσο κε έλα ζρήκα (schema) XML. Ζ πξνδηαγξαθή «JSON
Schema» είλαη έλα πξφηππν βαζηζκέλν ζην JSON γηα ηνλ πξνζδηνξηζκφ ηεο δνκήο ησλ
JSON δεδνκέλσλ. Σν «JSON Schema» παξέρεη κηα ζχκβαζε γηα ην ηη δεδνκέλα JSON
απαηηνχληαη γηα κηα ζπγθεθξηκέλε εθαξκνγή θαη κε πνην ηξφπν κπνξνχλ απηά ηα δεδνκέλα
λα ηξνπνπνηεζνχλ, αθξηβψο φηη θαη ην «XML Schema» πξνζθέξεη γηα ηελ XML. Δπηπιένλ,
ην «JSON Schema» έρεη ζρεδηαζηεί λα παξέρεη έιεγρν εγθπξφηεηαο, ηεθκεξίσζε θαη έιεγρν
αιιειεπίδξαζεο ησλ δεδνκέλσλ JSON. Βαζίδεηαη ζηηο ίδηεο αξρέο θαη ηδέεο κε απηέο ησλ
«XML Schema», «RelaxNG», θαη «Kwalify» αιιά έρεη ζρεδηαζηεί λα έρεη σο βάζε ην
JSON.
2.9.4 Φξήζε ηνπ JSON ζην AJAX
Ο θψδηθαο ηεο JavaScript πνπ αθνινπζεί δείρλεη πσο έλαο Πειάηεο κπνξεί λα
ρξεζηκνπνηήζεη κηα αίηεζε XMLHttpRequest γηα λα δεηήζεη έλα αληηθείκελν ζε κνξθή
JSON απφ ηνλ Γηαθνκηζηή. (Ο πξνγξακκαηηζκφο ζηελ πιεπξά ηνπ Γηαθνκηζηή πξέπεη λα έρεη
ζηεζεί έηζη ψζηε λα απαληά ζηηο αηηήζεηο ηεο δηεχζπλζεο «url» κε κηα ζπκβνινζεηξά
κνξθνπνηεκέλε ζε JSON)
var the_object = {};
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 && http_request.status ==
200 ) {
the_object = JSON.parse( http_request.responseText
);
}
};
http_request.send(null);
Να ζεκεησζεί φηη ε ρξήζε ηνπ αληηθεηκέλνπ XMLHttpRequest ζε απηφ ην παξάδεηγκα δελ
είλαη ζπκβαηή κε φια ηα πξνγξάκκαηα πεξηήγεζεο. Τπάξρνπλ παξαιιαγέο ζην ζπληαθηηθφ
γηα ηνπο πεξηεγεηέο Internet Explorer, Opera, Safari, θαη ζε φζνπο βαζίδνληα ζηελ
ηερλνινγία ηεο Mozilla. Ζ ρξεζηκφηεηα ηνπ αληηθεηκέλνπ XMLHttpRequest πεξηνξίδεηαη
απφ ηελ πνιηηηθή «ίδηαο πεγήο», ε νπνία νξίδεη φηη ε δηεχζπλζε URL ηεο απάληεζεο πξνο
ηελ αίηεζε πξέπεη λα βξίζθεηαη εληφο ηνπ ίδηνπ ηνκέα DNS (DNS domain) κε ηνλ
Γηαθνκηζηή πνπ θηινμελεί ηελ ζειίδα πνπ δεκηνχξγεζε ηελ αίηεζε. Ωο ελαιιαθηηθή ιχζε, ε
πξνζέγγηζε «JSONP» ελζσκαηψλεη ηε ρξήζε κηαο θσδηθνπνηεκέλεο ζπλάξηεζεο
επαλάθιεζεο (callback function) ε νπνία θηλείηαη κεηαμχ ηνπ Πειάηε θαη ηνπ Γηαθνκηζηή
θαη επηηξέπεη ζηνλ Πειάηε λα θνξηψλεη θσδηθνπνηεκέλα δεδνκέλα JSON απφ ηνκείο
Σελίδα | 33
«ηξίησλ» (third-party domains) θαη λα γλσζηνπνηεί ηελ ζπλάξηεζε ηνπ θαινχληνο θαηά ηελ
νινθιήξσζή ηεο. Ωζηφζν, απηή ε ιχζε ζπλεπάγεηαη θάπνηνπο θηλδχλνπο αζθαιείαο θαζψο
θαη επηπξφζζεηεο απαηηήζεηο απφ ηελ πιεπξά ηνπ Γηαθνκηζηή.
Οη πεξηεγεηέο κπνξνχλ επίζεο λα θάλνπλ ρξήζε ησλ ζηνηρείσλ «<iframe>» γηα ηελ
αζχγρξνλε αίηεζε δεδνκέλσλ JSON, ηξφπνο ν νπνίνο είλαη πεξηζζφηεξν αλεμάξηεηνο
πξνγξάκκαηνο πεξηήγεζεο, ή απιψο λα θάλνπλ ρξήζε ησλ ππνβνιψλ «<form
action=”url_to_cgi_script” target=”name_of_hidden_iframe”>». Απηέο νη πξνζεγγίζεηο
ήηαλ αξθεηά δηαδεδνκέλεο πξηλ απφ ηελ έιεπζε ηεο επξείαο ππνζηήξημεο ηνπ αληηθεηκέλνπ
XMLHttpRequest.
2.9.5 Θέκαηα Αζθαιείαο
Παξφιν πνπ ην JSON πξννξίδεηαη σο έλα πξφηππν γηα ζεηξηνπνίεζε δεδνκέλσλ (data
serialization format), ε ζρεδίαζε ηνπ σο έλα ππνζχλνιν ηεο γιψζζαο πξνγξακκαηηζκνχ
JavaScript δεκηνπξγεί πνιιέο αλεζπρίεο γχξσ απφ ηελ αζθάιεηα. Οη ελ ιφγσ αλεζπρίεο
επηθεληξψλνληαλ ζηελ ρξήζε ελφο «δηεξκελέα» ηεο JavaScript (JavaScript Interpreter) γηα
ηελ δπλακηθή εθηέιεζε θεηκέλνπ ζε JSON σο θψδηθα JavaScript, εθζέηνληαο έηζη έλα
πξφγξακκα ζε θαθφβνπιν θψδηθα πνπ πεξηέρεηαη εθ ησλ έζσ ηνπ (γεγνλφο πνπ απνηειεί θαη
ην θχξην κέιεκα φηαλ πξφθεηηαη γηα αλάθηεζε δεδνκέλσλ κέζσ ηνπ δηαδηθηχνπ). Αλ θαη δελ
είλαη ε κφλε κέζνδνο γηα επεμεξγαζία ηνπ JSON, είλαη κηα απιή θα δεκνθηιήο ηερληθή, ε
νπνία απνξξέεη απφ ηελ ζπκβαηφηεηα ηνπ JSON κε ηελ ζπλάξηεζε «eval()» ηεο JavaScript,
θαη ε νπνία απεηθνλίδεηαη ζηα αθφινπζα παξαδείγκαηα θψδηθα.
2.9.5.1 Η ζπλάξηεζε «eval()» ηεο JavaScript
Δμ’ αηηίαο ηνπ φηη θάζε θείκελν πνπ έρεη δηακνξθσζεί ζε πξφηππν JSON είλαη επίζεο θαη
ζπληαθηηθά λφκηκνο θψδηθαο ηεο JavaScript, έλαο εχθνινο ηξφπνο γηα έλα πξφγξακκα ηεο
JavaScript λα αλαιχζεη δεδνκέλα δηακνξθσκέλα ζε JSON είλαη ε ρξήζε ηεο
ελζσκαησκέλεο ζπλάξηεζεο «eval()», ε νπνία έρεη ζρεδηαζηεί λα αμηνινγεί εθθξάζεηο ζε
JavaScript (JavaScript expressions). Αληί ηελ ρξήζε ελφο εηδηθνχ αλαιπηή ηνπ JSON,
ρξεζηκνπνηείηαη ν ίδηνο ν δηεξκελέαο ηεο JavaScript γηα ηελ αλάιπζε ησλ δεδνκέλσλ JSON
θαη ηελ παξαγσγή εγγελψλ αληηθεηκέλσλ JavaScript.
Ζ ηερληθή «eval» ππφθεηηαη ζε ζέκαηα εππαζνχο αζθαιείαο εάλ ηα δεδνκέλα θαη νιφθιεξν
ην πεξηβάιινλ ηεο JavaScript δελ βξίζθεηαη ππφ ηνλ έιεγρν κηαο θαη κνλαδηθήο αμηφπηζηεο
πεγήο. Γηα παξάδεηγκα, αλ ηα δεδνκέλα ηα ίδηα δελ είλαη έκπηζηα, κπνξεί λα ππφθεηληαη ζε
επηζέζεηο ελέζηκνπ θαθφβνπινπ θψδηθα JavaScript (malicious code injection attacks),
εθηφο εάλ ρξεζηκνπνηεζνχλ θάπνηα επηπιένλ κέζα γηα επηθχξσζε ησλ δεδνκέλσλ εμ’ αξρήο.
«Σαθηηθέο εθθξάζεηο» («regular expressions») ρξεζηκνπνηνχληαη ζπρλά γηα λα εθηειέζνπλ
Σελίδα | 34
απηήλ ηελ επηθχξσζε πξνηνχ λα θιεζεί ε ζπλάξηεζε «eval». Δπίζεο, ηέηνηεο παξαβηάζεηο
εκπηζηνζχλεο
κπνξεί
λα
δεκηνπξγήζνπλ
ηξσηά
ζεκεία
γηα
θινπή
δεδνκέλσλ,
πιαζηνγξάθεζε ηαπηφηεηαο, θαη άιιεο ελδερφκελεο θαθήο ρξήζεο πφξσλ ή δεδνκέλσλ. Σν
πξφηππν RFC ην νπνίν νξίδεη ην JSON πξνηείλεη ηελ ρξήζε ηνπ παξαθάησ θψδηθα γηα ηελ
επηθχξσζε ηνπ JSON πξηλ ηελ αλάιπζε ηνπ (ε κεηαβιεηή «text» είλαη ε είζνδνο JSON):
var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
eval('(' + text + ')');
Μηα λέα ζπλάξηεζε, ε «parseJSON()», έρεη πξνηαζεί σο κηα αζθαιέζηεξε ελαιιαθηηθή γηα
ηελ ζπλάξηεζε «eval», θαζψο είλαη εηδηθά θαηαζθεπαζκέλε λα επεμεξγάδεηαη δεδνκέλα
JSON θαη φρη δεδνκέλα JavaScript. Πξννξηδφηαλ λα ζπκπεξηιεθζεί ζηελ Σέηαξηε Έθδνζε
ηνπ πξνηχπνπ ECMAScript, σζηφζν είλαη ζήκεξα δηαζέζηκε σο κηα βηβιηνζήθε ηεο
JavaScript ζηελ δηεχζπλζε http://www.JSON.org/json2.js θαη ζα ελζσκαησζεί ζηελ Πέκπηε
Έθδνζε ηνπ ECMAScript.
2.9.5.2 Δγγελέο JSON
Σα ζχγρξνλα πξνγξάκκαηα πεξηήγεζεο πιένλ παξέρνπλ, ή βξίζθνληαη ζηελ θάζε ζρεδίαζεο
γηα λα κπνξέζνπλ λα παξέρνπλ, εγγελή ππνζηήξημε γηα θσδηθνπνίεζε/απνθσδηθνπνηήζε ηνπ
JSON, γεγνλφο ην νπνίν ηνπο απαιιάζζεη απφ ην πξφβιεκα αζθάιεηαο κε ηελ ρξήζε ηεο
ζπλάξηεζεο «eval» πνπ πεξηγξάθεηαη παξαπάλσ. Δπηπιένλ, ε εγγελήο ππνζηήξημε ηνπ JSON
παξέρεη γεληθφηεξα πεξηζζφηεξε ηαρχηεηα ζε ζχγθξηζε κε ηελ ρξήζε ησλ βηβιηνζεθψλ
JavaScript. Απφ ηνλ Ηνχλην ηνπ 2009, νη παξαθάησ πεξηεγεηέο παξέρνπλ, ή πξφθεηηαη ζην
άκεζν κέιινλ λα παξέρνπλ, εγγελή ππνζηήξημε γηα ην πξφηππν JSON:

Mozilla Firefox 3.5+

Microsoft Internet Explorer 8

Όζνη πεξηεγεηέο βαζίδνληαη ζηελ κεραλή Webkit (φπσο ν Safari θαη ν Google
Chrome)
Σνπιάρηζηνλ ηέζζεξηο δεκνθηιήο βηβιηνζήθεο ηεο JavaScript πξνζθέξνπλ εγγελή
ππνζηήξημε γηα ην πξφηππν JSON:

Yahoo! UI Library

jQuery

Dojo Toolkit

Mootools
Σελίδα | 35
2.9.6 Σύγθξηζε κε ηελ XML
Ζ XML ζπρλά ρξεζηκνπνηείηαη γηα λα πεξηγξάςεη δνκεκέλα δεδνκέλα θαη γηα λα
«ζεηξηνπνηήζεη» αληηθείκελα. Τπάξρνπλ δηάθνξα πξσηφθνιιά πνπ βαζίδνληαη ζηελ XML
θαη αλαπαξηζηνχλ ην ίδην είδνο δνκψλ δεδνκέλσλ κε ην πξφηππν JSON γηα ηνπο ίδηνπο
ιφγνπο αληαιιαγήο δεδνκέλσλ. Ωζηφζν, επεηδή ε XML είλαη κηα γιψζζα ζήκαλζεο γεληθνχ
ηχπνπ, ηα πξσηφθνιια απηά είλαη πην πεξίπινθα ζην ζπληαθηηθφ ηνπο θαη κεγαιχηεξα ζε
κέγεζνο αξρείνπ απφ φηη ην JSON, ην νπνίν ζε αληίζεζε κε απηά έρεη ζρεδηαζηεί εηδηθά γηα
ηελ αληαιιαγή δεδνκέλσλ.
Παξφια ηα παξαπάλσ, θαη ηα δχν πξφηππα ζηεξνχληαη ελφο ζαθνχο κεραληζκνχ γηα ηελ
αλαπαξάζηαζε δπαδηθνχ ηχπνπ δεδνκέλσλ κεγάινπ κεγέζνπο φπσο είλαη ηα δεδνκέλα
εηθφλαο (αλ θαη ηα δπαδηθά δεδνκέλα κπνξνχλ λα ζεηξηνπνηεζνχλ θαη ζηηο δπν πεξηπηψζεηο
κε ηελ εθαξκνγή ελφο γεληθνχ ηχπνπ ζρεδίνπ γηα θσδηθνπνίεζε δπαδηθνχ-ζε-θείκελν). Έλα
επηπιένλ κεηνλέθηεκα ηνπ πξνηχπνπ JSON, είλαη φηη ζηεξείηαη ηεο δπλαηφηεηαο παξαπνκπψλ
(references) (θάηη πνπ ε XML δηαζέηεη κέζσ επεθηάζεσλ φπσο ην «XLink» θαη ην
«XPointer») φπσο επίζεο θαη ελφο πξνηχπνπ γηα ηνλ ζπκβνιηζκφ δηαδξνκήο (path notation)
ζπγθξίζηκν κε ην XPath ηεο XML.
2.9.7 Απνδνηηθόηεηα
Σν πξφηππν JSON ρξεζηκνπνηείηαη θπξίσο γηα ηελ επηθνηλσλία δεδνκέλσλ κέζσ δηαδηθηχνπ,
αιιά έρεη θαη νξηζκέλα ραξαθηεξηζηηθά πνπ κπνξνχλ λα πεξηνξίζνπλ ηελ απνδνηηθφηεηά ηνπ
γηα απηφλ ηνλ ζθνπφ. Οη πεξηζζφηεξνη πεξηνξηζκνί είλαη γεληθνί πεξηνξηζκνί ησλ κνξθψλ
δεδνκέλσλ θεηκέλνπ θαη ηζρχνπλ θαη γηα ηελ XML. Γηα παξάδεηγκα, ε απνθσδηθνπνίεζε
πξέπεη λα γίλεηαη ζχκθσλα κε ηελ αξρή «ραξαθηήξαο-κε-ραξαθηήξαο», θαη ην πξφηππν δελ
δηαζέηεη θακία πξφβιεςε γηα ζπκπίεζε δεδνκέλσλ, «θπιάθηζε» («interning») ησλ
ζπκβνινζεηξψλ, ή παξαπνκπψλ ζε αληηθείκελα. Φπζηθά, ζπκπίεζε κπνξεί λα εθαξκνζηεί ζε
δεδνκέλα πνπ έρνπλ ήδε κνξθνπνηεζεί ζε πξφηππν JSON. ΢ηελ πξάμε, ε επίδνζε κπνξεί λα
είλαη ζπγθξίζηκε κε απηήλ άιισλ παξφκνησλ πξνηχπσλ δεδνκέλσλ θαη ζπρλά εμαξηάηαη
πεξηζζφηεξν απφ ηελ πνηφηεηα ηεο πινπνίεζεο παξά απφ ηνπο ζεσξεηηθνχο πεξηνξηζκνχο
ησλ πξνηχπσλ.
Σελίδα | 36
2.10 Γηαδηθηπαθέο Υπεξεζίεο (Web Services)
2.10.1 Δηζαγσγηθά
Οη δηαδηθηπαθέο ππεξεζίεο είλαη ζπλήζσο δηεπαθέο πξνγξακκαηηζκνχ εθαξκνγψλ
(Application Programming Interfaces ή APIs) ή δηαδηθηπαθέο APIs (Web APIs) ζηηο
νπνίεο παξέρεηαη πξφζβαζε κέζσ ελφο δηθηχνπ, φπσο είλαη ην δηαδίθηπν, θαη νη νπνίεο
εθηεινχληαη απφ έλα απνκαθξπζκέλν ζχζηεκα ην νπνίν θαη ηηο θηινμελεί. Κνηλψο, ν φξνο
«δηαδηθηπαθέο ππεξεζίεο» αλαθέξεηαη ζε Πειάηεο θαη Γηαθνκηζηέο πνπ επηθνηλσλνχλ κέζσ
ελφο πξσηνθφιινπ HTTP (HyperText Transfer Protocol) ην νπνίν ρξεζηκνπνηείηαη ζην
δηαδίθηπν. Σέηνηνπ είδνπο ππεξεζίεο ηείλνπλ λα εκπίπηνπλ ζε έλα απφ ηα δχν αθφινπζα
ζηξαηφπεδα:

«Big Web Services» («Μεγάιεο Γηαδηθηπαθέο Τπεξεζίεο»)

«RESTful Web Services» («RESTful Γηαδηθηπαθέο Τπεξεζίεο»)
Οη «Big Web Services» ρξεζηκνπνηνχλ κελχκαηα ζε γιψζζα XML ηα νπνία αθνινπζνχλ ην
πξφηππν «SOAP» (Simple Object Access Protocol) θαη έρνπλ γίλεη αξθεηά δεκνθηιήο ζηηο
παξαδνζηαθέο εθαξκνγέο επηρεηξήζεσλ. ΢ε ηέηνηα ζπζηήκαηα, ππάξρεη ζπρλά κηα πεξηγξαθή
ησλ ιεηηνπξγηψλ πνπ πξνζθέξεη ε ππεξεζία, ε νπνία πεξηγξαθή είλαη γξακκέλε ζε γιψζζα
WSDL (Web Services Description Language) θαη είλαη αλαγλψζηκε απφ κεραλή. Ζ ρξήζε
ηεο γιψζζαο WSDL γηα ηελ πεξηγξαθή, δελ απαηηείηαη απφ έλα «ηειηθφ ζεκείν» SOAP
(SOAP
endpoint),
απαξαίηεηε
αιιά
πξνυπφζεζε
απηνκαηνπνηεκέλε
είλαη
γηα
ηελ
παξαγσγή
ηνπ
θψδηθα κεηαμχ Πειάηε-Γηαθνκηζηή
απφ πνιιά «πιαίζηα» (frameworks)
ζε
SOAP
Java
θαη
.NET
(αμηνζεκείσηεο εμαηξέζεηο απνηεινχλ
ηα «πιαίζηα» φπσο Spring, Apache
Axis2
Apache
CXF). Οξηζκέλεο
νξγαλψζεηο ηεο βηνκεραλίαο, φπσο
είλαη
ε
WS-I,
ρξήδνπλ
σο
ππνρξεσηηθά ηφζν ην SOAP φζν θαη
ηελ WSDL φηαλ νξίδνπλ κία δηαδηθηπαθή ππεξεζία.
Πην πξφζθαηα, νη δηαδηθηπαθέο ππεξεζίεο REST (REpresentational State Transfer)
θεξδίδνπλ δεκνηηθφηεηα, ηδηαίηεξα ζηηο δηαδηθηπαθέο εηαηξίεο. Γηαδηθηπαθέο ππεξεζίεο
RESTfull είλαη νη ππεξεζίεο πνπ ζπκκνξθψλνληαη κε ηνπο πεξηνξηζκνχο ησλ REST
Σελίδα | 37
ππεξεζηψλ. Υξεζηκνπνηψληαο ηηο HTTP κεζφδνπο PUT, GET θαη DELETE παξάιιεια κε
ηελ POST, νη ππεξεζίεο απηέο ζπρλά ελζσκαηψλνληαη θαιχηεξα κε ην πξσηφθνιιν HTTP
θαη ηα πξνγξάκκαηα πεξηήγεζεο δηαδηθηχνπ, απφ ηηο ππεξεζίεο πνπ βαζίδνληαη ζην SOAP.
Απηφ ζπκβαίλεη θπξίσο επεηδή δελ απαηηνχλ κελχκαηα ζε XML ή πεξηγξαθέο ππεξεζίαο θαη
API ζε γιψζζα WSDL.
Ζ δηαδηθηπαθή δηεπαθή πξνγξακκαηηζκνχ εθαξκνγψλ (Web API) είλαη κηα εμέιημε ζηηο
δηαδηθηπαθέο ππεξεζίεο (ζε έλα θίλεκα πνπ νλνκάδεηαη «Web 2.0») φπνπ ε έκθαζε
απνκαθξχλεηαη απφ ηηο ππεξεζίεο πνπ βαζίδνληαη ζην πξσηφθνιιν SOAP θαη πεγαίλεη πξνο
ην πην άκεζν ζηπι επηθνηλσλίαο ησλ REST ππεξεζηψλ. Οη We APIs επηηξέπνπλ ησλ
ζπλδπαζκφ ησλ πνιιαπιψλ δηαδηθηπαθψλ ππεξεζηψλ ζε λέεο εθαξκνγέο νη νπνίεο είλαη
γλσζηέο σο «πξνζκίμεηο» («mashups»).
Όηαλ ρξεζηκνπνηείηαη ζην πιαίζην ηεο αλάπηπμεο ηζηνζειίδσλ, ε Web API είλαη ζπλήζσο
έλα θαζνξηζκέλν ζχλνιν απφ κελχκαηα αίηεζεο ζε πξσηφθνιιν HTTP καδί κε ηνλ νξηζκφ
ηεο δνκήο ησλ κελπκάησλ απάληεζεο, ηα νπνία ζπλήζσο εθθξάδνληαη ζε κνξθή XML ή
JSON. Καηά ηελ εθηέιεζε ζχλζεησλ ππεξεζηψλ δηαδηθηχνπ, θάζε επηκέξνπο ππεξεζία
κπνξεί λα ζεσξεζεί σο απηφλνκε. Ο ρξήζηεο δελ έρεη θαλέλα έιεγρν πάλσ ζε απηέο ηηο
ππεξεζίεο. Δπηπιένλ, νη ίδηεο νη δηαδηθηπαθέο ππεξεζίεο δελ είλαη αμηφπηζηεο. Ο πάξνρνο ηεο
ππεξεζίαο κπνξεί λα αθαηξέζεη, αιιάμεη ή αλαβαζκίζεη ηηο ππεξεζίεο ηνπ ρσξίο λα
εηδνπνηήζεη ηνπο ρξήζηεο. Ζ αμηνπηζηία θαη ε αλνρή ζε βιάβεο δελ ππνζηεξίδεηαη φζν ζα
έπξεπε, κε απνηέιεζκα λα ππάξρνπλ βιάβεο αθφκα θαη θαηά ηελ δηάξθεηα εθηέιεζεο κηαο
ππεξεζίαο. Ζ δηαρείξηζε ησλ «εμαηξέζεσλ» (exceptions) ζην πιαίζην ησλ δηαδηθηπαθψλ
ππεξεζηψλ είλαη αθφκε έλα αλνηθηφ εξεπλεηηθφ ζέκα.
Ζ θνηλνπξαμία W3C νξίδεη κηα «δηαδηθηπαθή ππεξεζία» σο «έλα ζχζηεκα ινγηζκηθνχ
ζρεδηαζκέλν λα ππνζηεξίδεη δηαιεηηνπξγηθή αιιειεπίδξαζε κεηαμχ κεραλψλ κέζσ ελφο
δηθηχνπ. Έρεη κηα δηεπαθή πνπ πεξηγξάθεηαη κέζσ ελφο πξνηχπνπ ην νπνίν είλαη
επεμεξγάζηκν απφ κεραλή (ζπγθεθξηκέλα, ζε γιψζζα WSDL). Άιια ζπζηήκαηα
αιιειεπηδξνχλ κε ηελ δηαδηθηπαθή ππεξεζία κε κηα δηαδηθαζία πνπ πξνβιέπεηαη απφ ηελ
πεξηγξαθή ηεο ρξεζηκνπνηψληαο κελχκαηα ζε πξσηφθνιια SOAP, ηα νπνία ζπλήζσο
κεηαδίδνληαη κε ηελ ρξήζε ηνπ πξσηνθφιινπ HTTP κε κηα ζεηξηνπνίεζε ζε XML ζε
ζπλδπαζκφ κε άιια πξφηππα πνπ είλαη ζρεηηθά κε ην δηαδίθηπν.»
Ζ θνηλνπξαμία W3C αλαθέξεη επίζεο φηη: «Μπνξνχκε λα δηαθξίλνπκε δπν κεγάιεο
θαηεγνξίεο ζηηο δηαδηθηπαθέο ππεξεζίεο, ηηο REST-ζπκβαηέο Γηαδηθηπαθέο Τπεξεζίεο, ζηηο
νπνίεο ν πξσηαξρηθφο ζηφρνο ηεο ππεξεζίαο είλαη ε δηαρείξηζε XML αλαπαξαζηάζεσλ ησλ
δηαδηθηπαθψλ πφξσλ κε ηελ ρξήζε ελφο νκνηφκνξθνπ ππνζπλφινπ απφ ιεηηνπξγίεο πνπ δελ
έρνπλ «θαηαζηάζεηο» (stateless operation), θαη ηηο απζαίξεηεο Γηαδηθηπαθέο Τπεξεζίεο, ζηηο
νπνίεο ε ππεξεζία κπνξεί λα δηαζέζεη έλα απζαίξεην ππνζχλνιν απφ ιεηηνπξγίεο.»
Σελίδα | 38
2.10.2 Πξνδηαγξαθέο
2.10.2.1 Πξνθίι
Γηα λα βειηηψζεη ηελ δηαιεηηνπξγηθφηεηα ησλ δηαδηθηπαθψλ εθαξκνγψλ, ε νξγάλσζε WS-I
δεκνζηεχεη δηάθνξα «πξνθίι». Έλα πξνθίι είλαη έλα ζχλνιν πξνδηαγξαθψλ ππξήλα (SOAP,
WSDL, …) ζε κηα ζπγθεθξηκέλε έθδνζε (SOAP 1.1, UDDI 2, …) κε νξηζκέλεο
επηπξφζζεηεο απαηηήζεηο γηα ηνλ πεξηνξηζκφ ηεο ρξήζεο ησλ πξνδηαγξαθψλ απηψλ. Ζ
νξγάλσζε WS-I δεκνζηεχεη επίζεο θαη «πεξηπηψζεηο ρξήζεο» (use cases) θαζψο θαη
εξγαιεία δνθηκήο (test tools) γηα λα βνεζήζεη ηελ αλάπηπμε ησλ δηαδηθηπαθψλ ππεξεζηψλ
πνπ ζπκκνξθψλνληαη κε ηα πξνθίι ηεο. Ζ «WS» είλαη ε «δηαδηθηπαθή ππεξεζία»
επεμεξγαζίαο.
2.10.2.2 Πξόζζεηεο Πξνδηαγξαθέο, WS
Κάπνηεο πξνδηαγξαθέο έρνπλ αλαπηπρζεί, ή βξίζθνληαη ππφ αλάπηπμε, γηα ηελ επέθηαζε ησλ
δπλαηνηήησλ ησλ δηαδηθηπαθψλ ππεξεζηψλ. Απηέο νη πξνδηαγξαθέο αλαθέξνληαη γεληθά σο
«WS-*». Αθνινπζεί κηα ιίζηα κε νξηζκέλεο απφ απηέο ηηο πξνδηαγξαθέο:
WS-Security
Πξνζδηνξίδεη ηνλ ηξφπν ρξήζεο «Κξππηνγξάθεζεο ζε XML» (XML Encryption) θαη
«Τπνγξαθήο XML» (XML Signature) ζην πξσηφθνιιν SOAP γηα αζθαιή αληαιιαγή
κελπκάησλ, σο κηα ελαιιαθηηθή ή επέθηαζε ηεο ρξήζεο ηνπ HTTPS γηα ηελ δηαζθάιηζε ηνπ
θαλαιηνχ κεηάδνζεο.
WS-Reliability
Έλα πξφηππν πξσηνθφιινπ ηνπ νξγαληζκνχ OASIS (Organization for the Advancement of
Structured Information Standards) γηα ηελ αμηφπηζηε αληαιιαγή κελπκάησλ κεηαμχ δχν
δηαδηθηπαθψλ ππεξεζηψλ.
WS-Transaction
Έλαο ηξφπνο δηαρείξηζεο ησλ ζπλαιιαγψλ.
Ws-Addressing
Έλαο θαζηεξσκέλνο ηξφπνο γηα ηελ εηζαγσγή δηεπζχλζεσλ ζηελ «θεθαιίδα» (header) ηνπ
πξσηνθφιινπ SOAP.
Κάπνηεο απφ απηέο ηηο πξφζζεηεο πξνδηαγξαθέο έρνπλ πξνέιζεη απφ ηελ θνηλνπξαμία W3C.
Γίλεηαη πνιιή ζπδήηεζε γχξσ απφ ηελ ζπκκεηνρή ηεο θνηλνπξαμίαο, θαζψο ηα κνληέια
«θαζνιηθνχ Ηζηνχ» (general Web) θαη «΢εκαζηνινγηθνχ Ηζηνχ» (Semantic Web) θαίλνληαη
λα βξίζθνληαη ζε αληίζεζε κε έλα κεγάιν κέξνο ηνπ νξάκαηνο γηα ηηο Γηαδηθηπαθέο
Τπεξεζίεο. Σν γεγνλφο απηφ ήξζε πην πξφζθαηα ζηελ επηθάλεηα ηνλ Φεβξνπάξην ηνπ 2007,
Σελίδα | 39
ζηα πιαίζηα ηεο εθδήισζεο «W3C Workshop on Web of Services for Enterprise
Computing», φπνπ θάπνηνη απφ ηνπο ζπκκεηέρνληεο ππνζηήξημαλ ηελ απφζπξζε ηεο
θνηλνπξαμίαο W3C απφ πεξεηαίξσ εξγαζίεο πάλσ ζηηο πξνδηαγξαθέο «WS-*» θαη ηελ
επηθέληξσζή ηεο ζηνλ ππξήλα ηνπ δηαδηθηχνπ. Αληίζεηα, ν νξγαληζκφο OASIS έρεη
ηππνπνηήζεη αξθεηέο επεθηάζεηο δηαδηθηπαθήο ππεξεζίαο, ζπκπεξηιακβαλνκέλσλ θαη ησλ
«Web Services Resource Framework» θαη «WSDM».
2.10.3 Μνξθέο ηεο ρξήζεο
Οη δηαδηθηπαθέο ππεξεζίεο είλαη έλα ζχλνιν απφ εξγαιεία ηα νπνία κπνξνχλ λα
ρξεζηκνπνηεζνχλ κε πνιινχο ηξφπνπο. Οη ηξεηο πην θνηλέο κνξθέο ρξήζεο ηνπο είλαη νη RPC,
SOA θαη REST.
2.10.3.1 Κιήζεηο Απνκαθξπζκέλεο Γηαδηθαζίαο (Remote Procedure Calls)
Οη δηαδηθηπαθέο ππεξεζίεο ηχπνπ RPC παξνπζηάδνπλ κηα θαηαλεκεκέλε ιεηηνπξγία (ή
κέζνδν) δηεπαθήο ηεο θιήζεο ε νπνία είλαη νηθεία γηα πνιινχο πξνγξακκαηηζηέο. ΢πλήζσο, ε
βαζηθή κνλάδα ησλ RPC δηαδηθηπαθψλ ππεξεζηψλ είλαη ε ιεηηνπξγία WSDL.
Σα πξψηα εξγαιεία ησλ δηαδηθηπαθψλ ππεξεζηψλ ήηαλ επηθεληξσκέλα ζε RPC, θαη σο εθ
ηνχηνπ απηή ε κνξθή έρεη αλαπηπρζεί θαη ππνζηεξηρηεί επξέσο. Ωζηφζν, έρεη δερηεί αξθεηέο
θνξέο θξηηηθή επεηδή δελ είλαη «ραιαξήο δεχμεο» (loosely coupled), δηφηη ζπρλά
πινπνηήζεθε απφ ππεξεζίεο ραξηνγξάθεζεο (mapping services) απεπζείαο ζε θιήζεηο
κεζφδσλ ή ζπλαξηήζεσλ πνπ ήηαλ ζπγθεθξηκέλεο γιψζζαο. Πνιινί πξνκεζεπηέο
αηζζάλζεθαλ φηη απηή ε πξνζέγγηζε νδεγεί ζε αδηέμνδν, θαη πίεζαλ γηα ηελ απαινηθή ησλ
RPC απφ ην Βαζικό Πποθίλ WS-I (WS-I Basic Profile).
Άιιεο πξνζεγγίζεηο κε ζρεδφλ ηελ ίδηα ιεηηνπξγηθφηεηα κε ησλ RPC είλαη ε αξρηηεθηνληθή
CORBA (Common Object Request Broker Architecture) ηνπ γθξνππ OMG (Object
Management Group), ην κνληέιν DCOM (Distributed Object Model) ηεο Microsoft θαη ε
κέζνδνο απνκαθξπζκέλε επίθιεζε ηεο Java (Java Remote Method Invocation) ηεο Sun
Microsystems.
2.10.3.2 Τπεξεζηνζηξαθήο Αξρηηεθηνληθή (Service-oriented Architecture)
Οη δηαδηθηπαθέο ππεξεζίεο κπνξνχλ επίζεο λα ρξεζηκνπνηεζνχλ γηα ηελ πινπνίεζε κηαο
αξρηηεθηνληθήο ζχκθσλα κε ην πξφηππν ηεο SOA (Service-oriented Architecture), φπνπ ε
βαζηθή κνλάδα ηεο επηθνηλσλίαο είλαη έλα κήλπκα, θαη φρη κηα ιεηηνπξγία. Απηφ ζπρλά
αλαθέξεηαη θαη σο κελπκαηνζηξαθείο ππεξεζίεο («message-oriented» services).
Οη δηαδηθηπαθέο ππεξεζίεο πνπ αθνινπζνχλ ηελ αξρηηεθηνληθή SOA ππνζηεξίδνληαη απφ
ηνπο θπξηφηεξνπο πξνκεζεπηέο ινγηζκηθνχ θαη αλαιπηέο ηνπ θιάδνπ. ΢ε αληίζεζε κε ηηο
Σελίδα | 40
ππεξεζίεο ησλ RPC, ε «ραιαξή δεχμε» είλαη πην πηζαλή, επεηδή ε επηθέληξσζε είλαη ζηελ
«ζχκβαζε» πνπ παξέρεη ε WSDL θαη φρη ζηηο ππνθείκελεο ιεπηνκέξεηεο ηηο πινπνίεζεο. Οη
αλαιπηέο ηνπ «ελδηάκεζνπ ινγηζκηθνχ» (middleware) ρξεζηκνπνηνχλ Δπηρεηξεζηαθνχο
Γηαχινπο Τπεξεζίαο (Enterprise Service Buses ή ESB) νη νπνίνη ζπλδπάδνπλ
«κελπκαηνζηξαθή» επεμεξγαζία θαη Γηαδηθηπαθέο Τπεξεζίεο γηα ηελ δεκηνπξγία κηαο
αξρηηεθηνληθήο SOA πνπ πεξηζηξέθεηαη γχξσ απφ ζπκβάληα (Event-driven SOA). Γπν
παξαδείγκαηα αξρηηεθηνληθψλ ESB αλνηθηνχ θψδηθα είλαη ηα «Mule» θαη «Open ESB».
2.10.3.3 Μεηαθνξά Αληηπξνζωπεπηηθώλ Καηαζηάζεωλ (REpresentational State
Transfer ή REST)
Ζ κεηαθνξά REST επηρεηξεί λα πεξηγξάςεη ηηο αξρηηεθηνληθέο πνπ θάλνπλ ρξήζε ηνπ
πξσηνθφιινπ HTTP ή παξφκνησλ πξσηνθφιισλ, πεξηνξίδνληαο ηελ δηεπαθή ζε έλα ζχλνιν
απφ θαιά γλσζηέο θαη θαζηεξσκέλεο ιεηηνπξγίεο (φπσο νη GET, POST, PUT, DELETE γηα
ην HTTP). Δδψ ε πξνζνρή εζηηάδεηαη ζηελ αιιειεπίδξαζε κε «stateful» πφξνπο, παξά κε
κελχκαηα ή ιεηηνπξγίεο.
Μηα αξρηηεθηνληθή πνπ βαζίδεηαη ζηελ REST (δειαδή πνπ είλαη «RESTful») κπνξεί λα
ρξεζηκνπνηήζεη ηελ γιψζζα WSDL γηα ηελ πεξηγξαθή SOAP κελπκάησλ κέζσ
πξσηνθφιινπ HTTP, κπνξεί λα πινπνηεζεί σο θαζαξά αθεξεκέλε πάλσ απφ ην SOAP (π.ρ.
ε WS-Transfer), ή κπνξεί λα πινπνηεζεί εμ’ νινθιήξνπ ρσξίο ηελ ρξήζε ηνπ SOAP.
Ζ έθδνζε 2.0 ηεο WSDL παξέρεη ππνζηήξημε γηα δέζκεπζε ζε φιεο ηηο κεζφδνπο αίηεζεο
ηνπ HTTP (φρη κφλν γηα ηελ GET θαη POST φπσο ζηελ έθδνζε 1.1) θαη έηζη επηηξέπεη κηα
θαιχηεξε πινπνίεζε ησλ Γηαδηθηπαθψλ Τπεξεζηψλ RESTful. Ωζηφζν, ε ππνζηήξημε γηα
απηήλ ηε πξνδηαγξαθή είλαη αθφκα θησρή ζηα παθέηα αλάπηπμεο ινγηζκηθνχ, ηα νπνία
ζπρλά πξνζθέξνπλ εξγαιεία κφλν γηα ηελ έθδνζε 1.1 ηεο WDSL.
2.10.4 Μεζνδνινγίεο Σρεδηαζκνύ
Οη δηαδηθηπαθέο ππεξεζίεο κπνξνχλ αλ αλαπηπρζνχλ κε δχν ηξφπνπο:

Υξεζηκνπνηψληαο ηελ κέζνδν «απφ θάησ πξνο ηα πάλσ» (bottom up method) έλαο
πξνγξακκαηηζηήο γξάθεη πξψηα ηελ θιάζε πινπνίεζεο ζε κηα πξνγξακκαηηζηηθή
γιψζζα, θαη ζηελ ζπλέρεηα ρξεζηκνπνηεί έλα εξγαιείν παξαγσγήο θψδηθα WSDL
γηα λα εθζέζεη ηηο κεζφδνπο ηεο σο κηα δηαδηθηπαθή ππεξεζία. Απηή ζπρλά είλαη θαη
ε πην εχθνιε πξνζέγγηζε.

Υξεζηκνπνηψληαο ηελ κέζνδν «απφ πάλσ πξνο ηα θάησ», έλαο πξνγξακκαηηζηήο
γξάθεη πξψηα ην έγγξαθν ηεο WSDL θαη κεηά ρξεζηκνπνηεί έλα εξγαιείν
παξαγσγήο θψδηθα γηα λα παξαγάγεη κηα θιάζε ζθειεηφ, ηελ νπνία θαη ζπκπιεξψλεη
Σελίδα | 41
ζηελ ζπλέρεηα. Απηφο ν ηξφπνο γεληθά ζεσξείηαη πην δχζθνινο αιιά κπνξεί λα
παξάγεη «θαζαξφηεξεο» ζρεδηάζεηο.
2.10.5 Κξηηηθέο
Οη επηθξηηέο ησλ κε RESTful δηαδηθηπαθψλ ππεξεζηψλ ζπρλά παξαπνληνχληαη φηη είλαη
ππεξβνιηθά πεξίπινθεο θαη βαζίδνληαη πάλσ ζε κεγάινπο πξνκεζεπηέο ινγηζκηθνχ, θαη φρη
ζε ηππηθέο πινπνηήζεηο αλνηθηνχ θψδηθα. Τπάξρνπλ φκσο πινπνηήζεηο αλνηθηνχ θψδηθα,
φπσο είλαη νη «Apache Axis» θαη «Apache CXF».
΢ηελ αληίπεξα φρζε, κηα βαζηθή αλεζπρία ησλ πξνγξακκαηηζηψλ ησλ REST δηαδηθηπαθψλ
ππεξεζηψλ είλαη ην γεγνλφο φηη ηα παθέηα εξγαιείσλ δηαδηθηπαθψλ ππεξεζηψλ SOAP θάλνπλ
ηνλ θαζνξηζκφ λέσλ δηεπαθψλ γηα απνκαθξπζκέλε αιιειεπίδξαζε πνιχ εχθνιν, γηαηί ζπρλά
ζηεξίδνληαη ζηελ «ελδνζθφπεζε» γηα λα εμαγάγνπλ ηελ WSDL θαη ηελ API ηεο ππεξεζίαο
απφ θψδηθα ζε Java, C# ή VB. Τπνζηεξίδεηαη φηη απηφ κπνξεί λα απμήζεη ηελ
επζξαπζηφηεηα ησλ ζπζηεκάησλ, εθφζνλ κηα κηθξή αιιαγή ζηνλ Γηαθνκηζηή (αθφκε θαη κηα
αλαβάζκηζε ηεο ζηνίβαο ηνπ SOAP) κπνξεί λα έρεη σο απνηέιεζκα κηα δηαθνξεηηθή WSDL
θαη κηα δηαθνξεηηθή δηεπαθή ηεο ππεξεζίαο. Οη θιάζεηο ζηελ πιεπξά ηνπ Πειάηε πνπ
κπνξνχλ λα παξαρζνχλ απφ ηηο WSDL θαη XSD πεξηγξαθέο ηεο ππεξεζίαο είλαη ζπρλά
παξφκνηα ζπλδεδεκέλεο κε κηα ζπγθεθξηκέλε έθδνζε ηνπ «ηειηθνχ ζεκείνπ» SOAP (SOAP
endpoint) θαη κπνξνχλ λα «ζπάζνπλ» εάλ ην «ηειηθφ ζεκείν» αιιάμεη ή εάλ αλαβαζκηζηεί ε
ζηνίβα ηνπ SOAP ζηελ πιεπξά ηνπ Πειάηε. Καιά ζρεδηαζκέλα «ηειηθά ζεκεία» ηνπ SOAP
(κε ρεηξφγξαθεο WSDL θαη XSD) δελ «πάζρνπλ» απφ απηφ ην πξφβιεκα, αιιά ππάξρεη
αθφκα ην πξφβιεκα θαηά ην νπνίν κηα πξνζαξκνζκέλε δηεπαθή γηα θάζε ππεξεζία απαηηεί
θαη έλαλ πξνζαξκνζκέλν Πειάηε γηα θάζε ππεξεζία.
Τπάξρνπλ επίζεο αλεζπρίεο ζρεηηθά κε ηηο επηδφζεηο πνπ νθείινληαη ζην φηη νη δηαδηθηπαθέο
ππεξεζίεο θάλνπλ ρξήζε ηεο XML σο πξφηππν ηνπ κελχκαηνο θαη ησλ SOAP/HTTP γηα ηελ
πεξίθιεηζε (enveloping) θαη ηελ κεηαθνξά. Ωζηφζν, αλαδπφκελεο ηερλνινγίεο γηα ηελ
αλάιπζε θαη δεκηνπξγία επξεηεξίσλ ηεο XML, φπσο είλαη ε VTD-XML, ππφζρνληαη λα
αληηκεησπίζνπλ ηα ζέκαηα επηδφζεσλ πνπ ζρεηίδνληαη κε ηελ XML.
2.11 Η πιαηθόξκα αλάπηπμεο εθαξκνγώλ ColdFusion
2.11.1 Τη είλαη ην ColdFusion;
Σν ColdFusion είλαη κηα εκπνξηθή πιαηθφξκα ηαρείαο αλάπηπμεο ινγηζκηθνχ (rapid
application development platform) ε νπνία εθεπξέζεθε απφ ηνλ Jeremy θαη ηνλ JJ Alleire
ην 1995. Αξρηθά είρε ζρεδηαζηεί γηα λα δηεπθνιχλεη ηελ ζχλδεζε απιψλ ζειίδσλ HTML κε
Σελίδα | 42
κηα βάζε δεδνκέλσλ, φκσο απφ ηελ έθδνζε 2 είρε γίλεη κηα πιήξεο πιαηθφξκα ε νπνία
πεξηειάκβαλε έλα Ολοκληπυμένο Πεπιβάλλον Ανάπηςξηρ (Intergraded Development
Environment ή IDE) θαη κηα πιήξεο γιψζζα πξνγξακκαηηζκνχ «ζελαξίσλ» «scripting
language». ΢ηηο ηξέρνπζεο εθδφζεηο ηνπ ColdFusion, νη νπνίεο πσινχληαη απφ ηελ Adobe
Systems, πεξηιακβάλνληαη θαη πξνεγκέλεο δπλαηφηεηεο γηα ηελ αλάπηπμε θαη ηελ
ελζσκάησζε «πινχζησλ» δηαδηθηπαθψλ εθαξκνγψλ (rich internet applications) απφ
επηρεηξήζεηο. Σν ColdFusion αληαγσλίδεηαη θαηά θχξην ιφγν ηηο γιψζζεο PHP θαη ASP.
2.11.2 Γεληθή Δπηζθόπεζε
Έλα απφ ηα ραξαθηεξηζηηθά ηνπ ColdFusion πνπ ην θάλνπλ λα μερσξίδεη, είλαη ε γιψζζα
πξνγξακκαηηζκνχ «ζελαξίσλ» πνπ ην ζπλνδεχεη, ή CFML (ColdFusion Markup
Language), ε νπνία αληαγσλίδεηαη ηα «εμαξηήκαηα ζελαξίσλ» (scripting components) ησλ
γισζζψλ ASP, JSP θαη PHP ζηνλ ζθνπφ θαη ζηα ραξαθηεξηζηηθά, κνινλφηη κνηάδεη
πεξηζζφηεξν κε ηελ γιψζζα HTML φζνλ αθνξά ην ζπληαθηηθφ. Ο φξνο «ColdFusion»
ζπρλά ρξεζηκνπνηείηαη σο ζπλψλπκνο ηνπ φξνπ «CFML», φκσο ππάξρνπλ θαη άιινη
Γηαθνκηζηέο εθαξκνγψλ πνπ ρξεζηκνπνηνχλ ηελ CFML εθηφο απφ ηνλ ColdFusion.
Δπηπιένλ, ην ColdFusion ππνζηεξίδεη θαη άιιεο γιψζζεο πξνγξακκαηηζκνχ πέξαλ ηεο
CFML, φπσο είλαη ε γιψζζα ActionScript θαζψο θαη ελζσκαησκέλα «ζελάξηα» (scripts)
γξακκέλα ζε γιψζζα CFScript (κηα γιψζζα πνπ κνηάδεη κε ηελ JavaScript).
Αξρηθά ην ColdFusion αλαπηχρζεθε απφ ηνπο αδεξθνχο Allaire θαη θπθινθφξεζε ηνλ Ηνχιην
ηνπ 1995 απφ ηελ εηαηξία ηνπο, ηελ «Allaire». Σν 2001 ε εηαηξία Allaire απνθηήζεθε απφ
ηελ εηαηξία Macromedia, ε νπνία κε ηελ ζεηξά ηεο απνθηήζεθε απφ ηελ Adobe Systems
Inc. ην 2005. Ζ πιαηθφξκα ColdFusion ρξεζηκνπνηείηαη θαηά θχξην ιφγν ζε ηζηνζειίδεο θαη
δίθηπα «intranets» πνπ βαζίδνληαη πνιχ ζε δεδνκέλα, κπνξεί φκσο λα ρξεζηκνπνηεζεί θαη
γηα ηελ παξαγσγή απνκαθξπζκέλσλ ππεξεζηψλ φπσο νη δηαδηθηπαθέο ππεξεζίεο «SOAP»
θαη ην «Flash remoting». Δπίζεο, είλαη ζρεδηαζκέλν λα ιεηηνπξγεί αξκνληθά σο ε
ηερλνινγία ζηελ πιεπξά ηνπ Γηαθνκηζηή γηα ηελ ηερλνινγία Flex ηεο πιεπξάο ηνπ Πειάηε.
2.11.2.1 Κύξηα Υαξαθηεξηζηηθά
Σν ColdFusion παξέρεη κηα ζεηξά απφ επηπξφζζεηα ραξαθηεξηζηηθά, ηα νπνία πξνζθέξνληαη
κε ηελ βαζηθή ηνπ εγθαηάζηαζε. Μεηαμχ απηψλ είλαη ηα παξαθάησ:

Απινπνηεκέλε πξφζβαζε ζε βάζεηο δεδνκέλσλ

Γηαρείξηζε πξνζσξηλήο κλήκεο «cache» κεηαμχ Πειάηε θαη Γηαθνκηζηή

Παξαγσγή ηνπ θψδηθα κεηαμχ Πειάηε - Γηαθνκηζηή, εηδηθά φζνλ αθνξά ηελ
επηθχξσζε θαη ηα «βνεζεηηθά πξνγξάκκαηα» (widgets) ησλ θνξκψλ.

Μεηαηξνπή απφ ηελ HTML ζε PDF θαη FlashPaper
Σελίδα | 43

Αλάθηεζε δεδνκέλσλ απφ θνηλά επηρεηξεκαηηθά ζπζηήκαηα φπσο ηα Active
Directory, LDAP, SMTP, POP, HTTP, FTP, Microsoft Exchange Server θαη απφ
θνηλά πξφηππα δεδνκέλσλ φπσο RSS θαη Atom

Τπεξεζία δεκηνπξγίαο επξεηεξίνπ θαη αλαδήηεζεο αξρείσλ, βαζηζκέλε ζην «Verity
K2»

Γηαρείξηζε Γξαθηθήο Γηεπαθήο Υξήζηε (GUI Administration)

Πεδία (scopes) Γηαθνκηζηή, Πειάηε, εθαξκνγήο, ζπλφδνπ θαη αίηεζεο

Αλάιπζε, δεκηνπξγία εξσηεκάησλ (XPath), επηθχξσζε θαη
κεηαζρεκαηηζκφο
(XSLT) ηνπ θψδηθα ηεο XML

΢πζηαδνπνίεζε Γηαθνκηζηή (Server clustering)

Πξνγξακκαηηζκφο εξγαζηψλ

Γεκηνπξγία αλαθνξψλ θαη γξαθηθψλ παξαζηάζεσλ

Απινπνηεκέλνο ρεηξηζκφο αξρείσλ, πνπ πεξηιακβάλεη γξαθηθά ξάζηεξ (θαη
CAPTCHA) θαη ζπκπηεζκέλα αξρεία «zip» (ζε κειινληηθή έθδνζε ζρεδηάδεηαη ε
δπλαηφηεηα ρεηξηζκνχ θαη ηνπ βίληεν)

Απινπνηεκέλε πινπνίεζε δηαδηθηπαθήο ππεξεζίαο (κε απηνκαηνπνηεκέλε παξαγσγή
θψδηθα WSDL / δηαθαλή ρεηξηζκφ ηνπ πξσηνθφιινπ SOAP γηα ηελ δεκηνπξγία θαη
θαηαζηξνθή ππεξεζηψλ)
Άιιεο πινπνηήζεηο ηεο γιψζζαο CFML πξνζθέξνπλ παξφκνηεο ή εληζρπκέλεο ιεηηνπξγίεο,
φπσο ε εθηέιεζε κέζα ζε έλα πεξηβάιινλ «.NET» ή ν ρεηξηζκφο εηθφλσλ.
Ζ κεραλή ηεο πιαηθφξκαο έρεη γξαθηεί ζε γιψζζα C θαη πεξηιακβάλεη, κεηαμχ άιισλ, κηα
ελζσκαησκέλε γιψζζα «ζελαξίσλ» (ηελ CFScript), επηπξφζζεηα ππνζπζηήκαηα (plug-in
modules) γξακκέλα ζε Java, θαη έλα ζπληαθηηθφ παξφκνην κε απηφ ηεο HTML. Μία εηηθέηα
(tag) ηνπ ColdFusion, ην ηζνδχλακν ελφο ζηνηρείνπ ηεο HTML, μεθηλάεη κε ηα γξάκκαηα
«CF» αθνινπζνχκελα απφ έλα φλνκα ην νπνίν είλαη ελδεηθηηθφ ηνπ πσο απηή ε εηηθέηα
εξκελεχεηαη ζηελ HTML. Γηα παξάδεηγκα ε εηηθέηα «<cfoutput>» ε νπνία μεθηλάεη ηελ
έμνδν κεηαβιεηψλ ή άιινπ πεξηερνκέλνπ.
Δθηφο ηεο CFScript θαη ησλ επηπξφζζεησλ πξνγξακκάησλ (plug-ins), παξέρεηαη θαη ε
ζρεδηαζηηθή πιαηθφξκα CFStudio ε νπνία αθνινπζεί ην ζχζηεκα WYSIWYG (What You
See Is What You Get). Σν CFStudio ππνζηεξίδεη ζπληαθηηθφ απφ δεκνθηιείο γιψζζεο γηα
«backend» πξνγξακκαηηζκφ, φπσο είλαη ε Perl. Γηα λα εληζρχζεη ηελ επθνιφηεξε
δεκηνπξγία ησλ «backend» ιεηηνπξγηψλ απφ κε πξνγξακκαηηζηέο, απφ ηελ έθδνζε 4.0 θαη
πέξα, ην CFStudio παξέρεη επθνιφηεξε ελζσκάησζε κε ηνπο Γηαθνκηζηέο Apache Web
Server θαη Internet Information Server.
Σελίδα | 44
2.11.2.2 Άιια Υαξαθηεξηζηηθά
Ζ πξψηε έθδνζε ηνπ ColdFusion (ηφηε νλνκαδφηαλ Cold Fusion) θπθινθφξεζε ηνλ Ηνχιην
ηνπ 1995. Οη πξψηεο εθδφζεηο ήηαλ ζρεδφλ νινθιεξσηηθά γξακκέλεο απφ έλα άηνκν, ηνλ
Joseph JJ Allaire. Πξσηφγνλέο κπξνζηά ζηα ζχγρξνλα πξφηππα, νη πξψηεο εθδφζεηο ηνπ
ColdFusion πξφζθεξαλ θάηη πεξηζζφηεξν απφ κηα απιή πξφζβαζε ζε βάζεηο δεδνκέλσλ.
Όιεο νη εθδφζεηο ηνπ ColdFusion πξηλ ηεο έθηεο ήηαλ γξακκέλεο ζηελ γιψζζα Visual C++
ηεο Microsoft. Απηφ ζήκαηλε φηη ην ColdFusion ήηαλ πεξηνξηζκέλν λα ιεηηνπξγεί ζε
πεξηβάιινλ ησλ Microsoft Windows, αλ θαη ε εηαηξία Allaire κεηέθεξε κε επηηπρία ην
ColdFusion ζην ιεηηνπξγηθφ ζχζηεκα Sun Solaris απφ ηελ έθδνζε 3.1 θαη πέξα.
Γηα ιφγνπο πνπ κάιινλ ζπλδένληαη κε πεξηνξηζκέλεο πσιήζεηο, ε εηαηξία εμαγνξάζηεθε απφ
ηελ Macromedia, θαη ζηελ ζπλέρεηα απφ ηελ Adobe Systems. Απφ ηελ έθδνζε 4.0 θαη κεηά,
ην ColdFusion έγηλε πεξηζζφηεξν δπλαηφ θαη εχξσζην. Με ηελ θπθινθνξία ηνπ ColdFusion
MX 6, ε κεραλή ηεο πιαηθφξκαο γξάθηεθε εθ λένπ ζε γιψζζα Java θαη ππνζηήξηδε ην δηθφ
ηεο πεξηβάιινλ εθηέιεζεο (runtime environment). Ζ έθδνζε 6.1 παξνπζίαζε γηα πξψηε
θνξά ηελ δπλαηφηεηα ζπγγξαθήο θαη εληνπηζκνχ ζθαικάησλ θψδηθα Shockwave Flash.
2.11.2.3 Adobe ColdFusion Builder
Σν ColdFusion Builder (κε θσδηθφ φλνκα «Bolt») είλαη ην λέν Ολοκληπυμένο Πεπιβάλλον
Ανάπηςξηρ (Intergraded Development Environment ή IDE) ηεο Adobe, ην νπνίν
βαζίδεηαη ζην πεξηβάιινλ Eclipse, θαη κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ θαηαζθεπή
εθαξκνγψλ γηα ην ColdFusion. Ζ θσδηθή νλνκαζία «Bolt» πξνέξρεηαη απφ ην αξρηθφ
εηθνλίδην αζηξαπήο πνπ είρε ην πξντφλ απφ ηνλ θαηξφ πνπ ην δηέλεηκε ε εηαηξία Allaire. Σν
ColdFusion Builder δηέλπζε κηα κεγάιε πεξίνδν δνθηκαζηηθήο ιεηηνπξγίαο θαη ηειηθά
δφζεθε ζηελ θπθινθνξία ηνλ Μάξηην ηνπ 2010 ηελ ίδηα κέξα κε ηελ θπθινθνξία ηνπ Flash
Builder 4. Μεξηθά απφ ηα ραξαθηεξηζηηθά ηνπ είλαη ηα αθφινπζα:

Απηφκαηε ξχζκηζε ηεο ΢ρεζηαθήο Απεηθφληζεο Αληηθεηκέλσλ (Object Relational
Mapping)

Παξαγσγή Κψδηθα Δθαξκνγήο (Application Code Generation)

Γηαρείξηζε ηνπ Γηαθνκηζηή

Δχθνιε επέθηαζε κέζσ ηνπ «πιαηζίνπ» (framework) Eclipse

Απφδνζε Έκθαζεο ζην ζπληαθηηθφ (syntax highlighting) ησλ CFML, HTML,
JavaScript θαη CSS

Βνήζεηα ζηελ ζπγγξαθή ηνπ θψδηθα (code assist) γηα εηηθέηεο, ζπλαξηήζεηο,
κεηαβιεηέο θαη εμαξηήκαηα (components)

Αλαδίπισζε Κψδηθα
Σελίδα | 45

Γεκηνπξγία θαη δηαρείξηζε «απνζπαζκάησλ θψδηθα» (snippets)

Πξνβνιή Πεξηγξάκκαηνο

Απνκαθξπζκέλνο εμεξεπλεηήο γηα αξρεία θαη βάζεηο δεδνκέλσλ

Απνζθαικάησζε αλά επίπεδν γξακκήο (Line-level Debugging)

Απινπνίεζε δνκήο θψδηθα (Refactoring)
2.11.3 Αλάιπζε Δπηιεγκέλσλ Φαξαθηεξηζηηθώλ
2.11.3.1 Πινύζηεο Φόξκεο (Rich Forms)
Ο Γηαθνκηζηήο ColdFusion Server πεξηιακβάλεη έλα ππνζχλνιν ηεο ηερλνινγίαο
Macromedia Flex 1.5. Γεδεισκέλνο ζηφρνο ηεο είλαη θαηαζηεί δπλαηή ε δεκηνπξγία
πινχζησλ θνξκψλ ζε ζειίδεο HTML, ρξεζηκνπνηψληαο ηελ γιψζζα CFML γηα ηελ
παξαγσγή ηαηληψλ Flash. Απηέο νη θφξκεο ζε Flash κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα ηελ
ελζσκάησζε πινχζησλ δηαδηθηπαθψλ εθαξκνγψλ, αιιά κε πεξηνξηζκέλε απνδνηηθφηεηα
ιφγσ ησλ πεξηνξηζκψλ ηνπ ActionScript πνπ έρνπλ απνδνζεί ζε θφξκεο Flash απφ ηελ
Macromedia.
Οη θφξκεο ζε Flash παξέρνπλ επηπιένλ βνεζεηηθά πξνγξάκκαηα (widgets) γηα εηζαγσγή
δεδνκέλσλ, φπσο είλαη ν «επηινγέαο εκεξνκεληψλ» θαη ηα «πιέγκαηα δεδνκέλσλ» (data
grids). ΢ε πξνεγνχκελεο εθδφζεηο ηνπ ColdFusion, ήηαλ δηαζέζηκα θάπνηα επηπξφζζεηα
«βνεζεηηθά πξνγξάκκαηα» (widgets) θαη κηα κεξηθή επηθχξσζε θνξκψλ, ρξεζηκνπνηψληαο
έλα ζπλδπαζκφ απφ βνεζεηηθέο εθαξκνγέο ζε Java (Java applets) θαη ηεο γιψζζαο
JavaScript. Απηή ε επηινγή εμαθνινπζεί λα ηζρχεη γηα φζνπο δελ επηζπκνχλ λα
ρξεζηκνπνηήζνπλ Flash, αλ θαη δελ δηαζέηεη πιήξε ππνζηήξημε ραξαθηεξηζηηθψλ.
Έλα παξάδεηγκα πινχζηαο θφξκαο κε ρξήζε Flash, είλαη ην αθφινπζν:
<cfform format="flash" method="post" width="400" height="400">
<cfinput type="text" name="username" label="Username"
required="yes" >
<cfinput type="password" name="password" label="Password"
required="yes" >
<cfinput type="submit" name="submit" value="Sign In" >
</cfform>
Σν ColdFusion πεξηιακβάλεη επίζεο θαη δπλαηφηεηα δεκηνπξγίαο «XForms» θαη ηελ
δπλαηφηεηα λα «ληχζεη» θφξκεο ρξεζηκνπνηψληαο ηελ γιψζζα κεηαζρεκαηηζκνχ XSLT.
2.11.3.2 Παξαγωγή εγγξάθωλ PDF θαη FlashPaper
Σν ColdFusion κπνξεί λα παξάμεη έγγξαθα PDF ή FlashPaper ρξεζηκνπνηψληαο ηππηθή
HTML (δειαδή, δελ ρξεηάδεηαη επηπιένλ πξνγξακκαηηζκφ γηα λα παξάμεη έγγξαθα πξνο
Σελίδα | 46
εθηχπσζε). Οη ζπληάθηεο ηεο CFML απιά ηνπνζεηνχλ ηνλ θψδηθα HTML θαη CSS κέζα ζε
έλα δεπγάξη απφ εηηθέηεο «cfdocument» θαη πξνζδηνξίδνπλ ην επηζπκεηφ πξφηππν (PDF ή
FlashPaper). Σν παξαγφκελν έγγξαθν κπνξεί λα είηε λα απνζεθεπηεί ζηνλ δίζθν είηε λα
απνζηαιεί ζηνλ πεξηεγεηή ηνπ Πειάηε. Ζ έθδνζε 8 ηνπ ColdFusion εηζήγαγε ηελ εηηθέηα
«cfpdf»
ε
νπνία
επηηξέπεη
έλαλ
πξσηνθαλή
έιεγρν
ησλ
εγγξάθσλ
PDF
ζπκπεξηιακβαλνκέλσλ ησλ PDF θνξκψλ θαη ηεο ζπγρψλεπζεο ησλ PDFs. Ωζηφζν, απηέο νη
εηηθέηεο δελ θάλνπλ ρξήζε ηεο κεραλήο PDF ηεο Adobe, αιιά κηαο δσξεάλ θαη αλνηθηνχ
θψδηθα βηβιηνζήθεο ηεο Java, ε νπνία νλνκάδεηαη «iText».
2.11.3.3 Σα εμαξηήκαηα (components) ηνπ ColdFusion
Αξρηθά ην ColdFusion δελ ήηαλ κηα αληηθεηκελνζηξαθήο πξνγξακκαηηζηηθή πιαηθφξκα, θαη
κέρξη ζήκεξα ζηεξείηαη κεξηθψλ αληηθεηκελνζηξαθψλ ραξαθηεξηζηηθψλ. Σν ColdFusion
αλήθεη ζηελ θαηεγνξία ησλ αληηθεηκελνζηξαθψλ γισζζψλ πνπ δελ ππνζηεξίδνπλ πνιιαπιή
θιεξνλνκηθφηεηα (καδί κε ηελ Java, Smalltalk, θ.α.). Με ηελ θπθινθνξία ηεο έθδνζεο MX
(6+), ην ColdFusion εηζήγαγε ηελ θαηαζθεπή «εμαξηεκάησλ» (components) ηα νπνία
παξνκνηάδνληαη κε ηηο θιάζεηο ζηηο αληηθεηκελνζηξαθείο γιψζζεο. Κάζε «εξάπηημα» κπνξεί
λα πεξηέρεη νπνηνλδήπνηε αξηζκφ απφ ηδηφηεηεο (properties) θαη κεζφδνπο. Έλα «εξάπηημα»
κπνξεί επίζεο λα επεθηείλεη (extend) θάπνην άιιν (θιεξνλνκηθφηεηα). Σα «εμαξηήκαηα»
ππνζηεξίδνπλ κφλν κνλή θιεξνλνκηθφηεηα. Με ηελ έθδνζε 8, ην ColdFusion ππνζηεξίδεη
πιένλ θαη δηεπαθέο ζην ζηπι ηεο Java. Σα «εμαξηήκαηα» ηνπ ColdFusion ρξεζηκνπνηνχλ
ηελ θαηάιεμε αξρείνπ «.cfc» γηα λα δηαθνξνπνηνχληαη απφ ηα πξφηππα (templates) ηνπ
ColdFusion πνπ ρξεζηκνπνηνχλ ηελ θαηάιεμε «.cfm».
2.11.3.4 Remoting
Οη κέζνδνη ησλ «εμαξηεκάησλ» κπνξνχλ λα γίλνπλ δηαζέζηκεο σο δηαδηθηπαθέο ππεξεζίεο
ρσξίο ηελ αλάγθε επηπιένλ πξνγξακκαηηζκνχ θαη ξπζκίζεσλ. Σν κφλν πνπ απαηηείηαη γηα ηελ
πξφζβαζε ζε κία κέζνδν είλαη ε δήισζή ηεο σο «remote» («απνκαθξπζκέλε»). Σν
ColdFusion απηφκαηα παξάγεη κηα πεξηγξαθή ζε γιψζζα WSDL (Web Services Description
Language) ζηελ δηεχζπλζε URL ηνπ «εμαξηήκαηνο» κε απηφλ ηνλ ηξφπν:
http://διαδπομή/ππορ/εξαπηήμαηα/Δξάπηημα.cfc?wsdl
Δθηφο απφ ην πξφηππν «SOAP», νη ππεξεζίεο πξνζθέξνληαη θαη ζην δπαδηθφ πξφηππν
«Flash Remoting».
Οη κέζνδνη πνπ έρνπλ δεισζεί σο «remote» κπνξνχλ επίζεο λα θιεζνχλ κέζσ κηαο αίηεζεο
«HTTP GET» ή «HTTP POST». Γηα παξάδεηγκα, δίδεηαη ε αίηεζε «GET» πνπ αθνινπζεί:
Σελίδα | 47
http://path/to/components/Component.cfc?method=search&query=your+query&mode=st
rict
Απηή ε αίηεζε ζα θαιέζεη ηελ ζπλάξηεζε αλαδήηεζεο ηνπ εμαξηήκαηνο, θαη ζα πεξάζεη σο
νξίζκαηα ηα «your query» θαη «strict». Απηνχ ηνπ είδνπο νη επηθιήζεηο είλαη θαηάιιειεο
γηα εθαξκνγέο πνπ θάλνπλ ρξήζε AJAX. Ζ έθδνζε 8 ηνπ ColdFusion εηζήγαγε ηελ
δπλαηφηεηα ηεο ζεηξηνπνίεζεο δνκψλ δεδνκέλσλ ηνπ ColdFusion ζε κνξθή JSON γηα ρξήζε
απφ ηελ πιεπξά ηνπ Πειάηε.
Ο Γηαθνκηζηήο ηνπ ColdFusion ζα παξάμεη απηφκαηα ηελ ηεθκεξίσζε (documentation) γηα
έλα «εμάξηεκα», εάλ πεξηεγεζείηε ζηελ δηεχζπλζε URL ηνπ θαη εηζάγεηε ηνλ θαηάιιειν
θψδηθα κέζα ζηηο δειψζεηο (declarations) ηνπ «εμαξηήκαηνο». Απηή είλαη κηα εθαξκνγή ηεο
«ελδνζθφπεζεο» ελφο «εμαξηήκαηνο», ε νπνία δηαηίζεηαη ζηνπο πξνγξακκαηηζηέο ησλ
«εμαξηεκάησλ» ηνπ ColdFusion. Ζ πξφζβαζε ζηελ ηεθκεξίσζε ελφο «εμαξηήκαηνο» απαηηεί
έλαλ θσδηθφ πξφζβαζεο. Έλαο πξνγξακκαηηζηήο κπνξεί λα πξνβάιεη ηελ ηεθκεξίσζε γηα
φια ηα «εμαξηήκαηα» πνπ είλαη γλσζηά ζηνλ Γηαθνκηζηή ηνπ ColdFusion κε ηελ πινήγεζε
ζηελ δηεχζπλζε URL ηνπ ColdFusion. Απηή ε δηεπαθή κνηάδεη κε απηήλ ηεο HTML
ηεθκεξίσζεο Javadoc (Javadoc HTML Documentation) γηα ηηο θιάζεηο ηεο Java.
2.11.3.5 Πξνζαξκνζκέλεο Δηηθέηεο (Custom Tags)
Σν ColdFusion παξέρεη δηάθνξνπο ηξφπνπο γηα ηελ ελζσκάησζε πξνζαξκνζκέλσλ εηηθεηψλ
ζε γιψζζα ζήκαλζεο, δειαδή εθείλσλ πνπ δελ πεξηιακβάλνληαη ζηελ γιψζζα ηνπ ππξήλα
ηνπ ColdFusion. Οη πξνζαξκνζκέλεο εηηθέηεο είλαη ηδηαίηεξα ρξήζηκεο ζην λα παξέρνπλ κία
νηθεία δηεπαθή γηα ηνπο πξνγξακκαηηζηέο δηαδηθηχνπ θαη ηνπο ζπληάθηεο πεξηερνκέλνπ πνπ
είλαη εμνηθεησκέλνη κε ηελ HTML αιιά φρη κε ηνλ «επηηαθηηθφ πξνγξακκαηηζκφ»
(imperative programming).
Ο παξαδνζηαθφο θαη πην ζπλεζηζκέλνο ηξφπνο είλαη κε ηελ ρξήζε ηεο CFML. Μηα βαζηθή
CFML ζειίδα κπνξεί λα εξκελεπηεί σο κηα εηηθέηα, κε ην φλνκα ηεο εηηθέηαο λα αληηζηνηρεί
ζην φλνκα ηνπ αξρείνπ κε ην πξφζεκα «cf_». Γηα παξάδεηγκα, ην αξρείν «IMAP.cfm» κπνξεί
λα ρξεζηκνπνηεζεί σο ε εηηθέηα «cf_imap». Οη παξάκεηξνη πνπ ρξεζηκνπνηνχληαη κέζα ζηελ
εηηθέηα είλαη δηαζέζηκνη ζην πεδίν «ATTRIBUTES» ηεο ζειίδαο πινπνίεζεο ηεο εηηθέηαο.
Οη ζειίδεο CFML είλαη πξνζβάζηκεο απφ ηνλ ίδην θαηάινγν κε απηφλ ηεο θαινχζαο ζειίδαο,
κέζσ ελφο εηδηθνχ θαηαιφγνπ ηεο δηαδηθηπαθήο εθαξκνγήο ηνπ ColdFusion, ή κέζσ κηαο
εηηθέηαο «CFIMPORT» κέζα απφ ηελ θαινχζα ζειίδα. Ζ ηειεπηαία κέζνδνο δελ απαηηεί
θαη’ αλάγθε ην πξφζεκα «cf_» γηα ην φλνκα ηεο εηηθέηαο.
Έλαο δεχηεξνο ηξφπνο είλαη ε αλάπηπμε ησλ «CFX» εηηθεηψλ ρξεζηκνπνηψληαο Java ή C++.
Οη εηηθέηεο «CFX» έρνπλ ην πξφζεκα «cfx_», γηα παξάδεηγκα «cfx_imap». Οη εηηθέηεο
Σελίδα | 48
πξνζηίζεληαη ζην πεξηβάιινλ εθηέιεζεο ηνπ ColdFusion ρξεζηκνπνηψληαο ηνλ Γηαρεηξηζηή
ColdFusion (ColdFusion Administrator), φπνπ θαηαρσξνχληαη αξρεία «JAR» ή «DLL» σο
πξνζαξκνζκέλεο εηηθέηεο. Σέινο, ην ColdFusion ππνζηεξίδεη βηβιηνζήθεο εηηθέηαο JSP απφ
ηελ πξνδηαγξαθή 2.0 ηεο γιψζζαο JSP. Οη εηηθέηεο JSP κπνξνχλ λα ζπκπεξηιεθζνχλ ζε
ζειίδεο CFML ρξεζηκνπνηψληαο ηελ εηηθέηα «CFIMPORT».
2.11.3.6 Δλαιιαθηηθά πεξηβάιινληα Γηαθνκηζηή
Σν ColdFusion μεθίλεζε σο κηα ηδηφθηεηε ηερλνινγία, πνπ ήηαλ βαζηζκέλε ζε βηνκεραληθά
πξφηππα Γηαδηθηπαθήο ηερλνινγίαο. Ωζηφζν, γίλεηαη φιν θαη ιηγφηεξν θιεηζηή ηερλνινγία
κέζσ ηεο δηαζεζηκφηεηαο απφ αληαγσληζηηθά πξντφληα. Σα πξντφληα απηά πεξηιακβάλνπλ ηηο
ηερλνινγίεο Railo, BlueDragon, IgniteFusion, SmithProject θαη Coral Web Builder.
Μπνξεί εχθνια λα ζηεξηρζεί ην επηρείξεκα πνπ θέξεη ην ColdFusion λα είλαη ιηγφηεξν
δεζκεπηηθφ πιαηθφξκαο απφ ηηο αληίπαιεο ηερλνινγίεο J2EE ή .NET, απιά επεηδή ην
ColdFusion κπνξεί λα εθηειεζηεί πάλσ απφ έλαλ Γηαθνκηζηή εθαξκνγψλ .NET, ή πάλσ απφ
νπνηνλδήπνηε θνληέηλεξ ελφο «servlet» ή Γηαθνκηζηή εθαξκνγψλ J2EE (φπσο JRun,
WebSphere, JBoss, Geronimo, Tomcat, Resin Server, Jetty web server, θ.η.ι.).
Θεσξεηηθά, κηα εθαξκνγή ColdFusion κπνξεί λα κεηαθεξζεί ρσξίο αιιαγέο απφ έλαλ
Γηαθνκηζηή εθαξκνγψλ J2EE ζε έλα Γηαθνκηζηή εθαξκνγψλ .NET.
2.11.4 Αθξσλύκηα
Σν αθξσλχκην γηα ηελ γιψζζα ζήκαλζεο ηνπ ColdFusion είλαη ην CFML. Όηαλ
απνζεθεχνληαη ζηνλ δίζθν πξφηππα ηνπ ColdFusion, ηνπο δίλεηαη ζπλήζσο ε θαηάιεμε
«.cfm» ή «.cfml». Ζ θαηάιεμε «.cfm» ρξεζηκνπνηείηαη γηα ηα «εμαξηήκαηα» ηνπ
ColdFusion. Οη αξρηθέο θαηαιήμεηο ήηαλ «DBM» ή «DBML», νη νπνίεο αληηζηνηρνχζαλ ζην
«Database Markup Language». Όηαλ κηιάλε γηα ην ColdFusion, νη πεξηζζφηεξνη ρξήζηεο
ρξεζηκνπνηνχλ ην αθξσλχκην «CF», θαη απηφ ρξεζηκνπνηείηαη γηα έλα πιήζνο πφξσλ ηνπ
ColdFusion, φπσο νη νκάδεο ρξεζηψλ (user groups) «CFUGs» θαη ηζηνζειίδεο. Σν
«CFMX» είλαη ε πην θνηλή ζπληνκνγξαθία γηα ηηο εθδφζεηο 6 θαη 7 (επίζεο γλσζηέο σο MX)
ηνπ ColdFusion.
Σελίδα | 49
2.12 Αξρηηεθηνληθή MVC (Model-View-Controller)
2.12.1 Δηζαγσγηθά
Ζ αξρηηεθηνληθή ινγηζκηθνχ MVC (Model-View-Controller ή Μονηέλο-ΠποβολήΔλεγκηήρ ζεσξείηαη ζήκεξα σο έλα αξρηηεθηνληθφ πξφηππν ην νπνίν ρξεζηκνπνηείηαη ζηελ
κεραληθή ινγηζκηθνχ (software engineering). Σν πξφηππν απνκνλψλεη ηελ «ινγηθή ηνκέα»
(domain logic) (ηελ ινγηθή ηεο εθαξκνγήο γηα ηνλ ρξήζηε) απφ ηελ είζνδν θαη ηελ
παξνπζίαζε (input and presentation) (δειαδή ηελ δηεπαθή Graphical User Interface),
επηηξέπνληαο ηελ αλεμάξηεηε αλάπηπμε, δνθηκή θαη ζπληήξεζε ηνπ θαζελφο.
Σν Μονηέλο είλαη ε ζπγθεθξηκέλνπ ηνκέα αλαπαξάζηαζε ησλ δεδνκέλσλ επί ησλ νπνίσλ
ιεηηνπξγεί ε εθαξκνγή. Ζ «ινγηθή ηνκέα» πξνζζέηεη λφεκα ζε αθαηέξγαζηα δεδνκέλα (γηα
παξάδεηγκα, ν ππνινγηζκφο εάλ ε ζεκεξηλή κέξα είλαη ε κέξα ησλ γελεζιίσλ, ή ηα ζχλνια, νη
θφξνη θαη ηα ηέιε απνζηνιήο γηα πξντφληα αγνξψλ). Όηαλ έλα Μονηέλο αιιά ηελ θαηάζηαζή
ηνπ, εηδνπνηεί ηηο ζπζρεηηζκέλεο Πποβολέρ ψζηε λα κπνξέζνπλ λα αλαλεσζνχλ.
Πνιιέο εθαξκνγέο ρξεζηκνπνηνχλ έλα κφληκν κεραληζκφ απνζήθεπζεο, φπσο είλαη κηα βάζε
δεδνκέλσλ, γηα ηελ απνζήθεπζε δεδνκέλσλ. Ζ αξρηηεθηνληθή MVC δελ αλαθέξεη
ζπγθεθξηκέλν ζηξψκα πξφζβαζεο δεδνκέλσλ (data access layer) επεηδή ππνινγίδεηαη φηη
είλαη θάησ απφ, ή ελζπιαθσκέλν εληφο, ηνπ Μονηέλος. Σα Μονηέλα δελ είλαη αληηθείκελα
πξφζβαζεο δεδνκέλσλ, σζηφζν, ζε πνιχ απιέο εθαξκνγέο πνπ έρνπλ κηθξή «ινγηθή ηνκέα»
δελ κπνξεί λα γίλεη πξαγκαηηθή δηάθξηζε. Δπίζεο, ην ActiveRecord είλαη έλα απνδεθηφ
πξφηππν ζρεδίαζεο ην νπνίν ζπγρσλεχεη ηελ «ινγηθή ηνκέα» θαη ηνλ θψδηθα πξφζβαζεο
δεδνκέλσλ.
Ζ Πποβολή αλαιχεη ην Μονηέλο ζε κηα κνξθή πνπ είλαη θαηάιιειε γηα αιιειεπίδξαζε,
δειαδή ζπλήζσο ζε έλα ζηνηρείν δηεπαθήο ρξήζηε. Πνιιαπιέο Πποβολέρ κπνξνχλ λα
ζπλππάξρνπλ γηα έλα θαη κνλαδηθφ Μονηέλο γηα δηαθνξεηηθνχο ζθνπνχο. Ο Δλεγκηήρ
ιακβάλεη ηεο είζνδν θαη μεθηλάεη ηελ δεκηνπξγία κηαο απάληεζεο κε ηελ πξαγκαηνπνίεζε
θιήζεσλ πξνο ηα αληηθείκελα ηνπ Μονηέλος.
Μηα εθαξκνγή ηεο αξρηηεθηνληθήο MVC κπνξεί λα απνηειεί κηα ζπιινγή απφ ηξηπιέηεο
Μονηέλο/Πποβολή/Δλεγκηήρ, θάζε κία ππεχζπλε γηα έλα ζηνηρείν ηεο δηεπαθήο ρξήζηε. Ζ
αξρηηεθηνληθή MVC παξαηεξείηαη ζπρλά ζε δηαδηθηπαθέο εθαξκνγέο φπνπ ε Πποβολή είλαη
ν θψδηθα ζε HTML ή XHTML πνπ παξάγεηαη απφ ηελ εθαξκνγή. Ο Δλεγκηήρ ιακβάλεη ηηο
εηζφδνπο GET ή POST θαη απνθαζίδεη ην ηη ζα θάλεη κε απηέο, θαη κε ηελ ζεηξά ηνπ
κεηαθέξεη ηελ «δνπιεηά» ζηα αληηθείκελα ηνπ ηνκέα (δειαδή ζην Μονηέλο) ην νπνία
πεξηέρνπλ ηνπο θαλφλεο επηρεηξήζεσλ θαη γλσξίδνπλ πψο λα εθηειέζνπλ ζπγθεθξηκέλα
θαζήθνληα, φπσο είλαη ε επεμεξγαζία κηα λέαο εγγξαθήο.
Σελίδα | 50
2.12.2 Γεληθή Δπηζθόπεζε
Ζ αξρηηεθηνληθή MVC πεξηγξάθηεθε γηα πξψηε θνξά ην 1979 απφ ηνλ Trygve Reenskaug,
ν νπνίν εθείλν ηνλ θαηξφ δνχιεπε πάλσ ζηελ γιψζζα Smalltalk ζην εξεπλεηηθφ θέληξν
Xerox PARC. Ζ αξρηθή πινπνίεζε πεξηγξάθεηαη ζε βάζνο ζηελ αλαθνξά ηνπ «Applications
Programming in Smalltalk-80: How to use Model-View-Controller». Έρνπλ ππάξμεη
αξθεηά παξάγσγα ηεο αξρηηεθηνληθήο MVC. Γηα παξάδεηγκα, ε αξρηηεθηνληθή Model View
Presenter ρξεζηκνπνηείηαη κε ην «πιαίζην» .NET Framework, θαη ην πξφηππν XForms
ρξεζηκνπνηεί κηα αξρηηεθηνληθή «model-view-controller-connector architecture». Ωζηφζν,
ε βαζηθή αξρηηεθηνληθή MVC εμαθνινπζεί λα είλαη δεκνθηιήο.
Παξφιν πνπ ε αξρηηεθηνληθή MVC έξρεηαη ζε δηάθνξεο εθδνρέο, ε ξνή ειέγρνπ είλαη γεληθά
σο εμήο:
1. Ο ρξήζηεο αιιειεπηδξά κε ηελ δηεπαθή ρξήζηε κε θάπνην ηξφπν (γηα παξάδεηγκα,
παηάεη έλα θνπκπί).
2. Ο Δλεγκηήρ δηαρεηξίδεηαη ην ζπκβάλ εηζφδνπ απφ ηελ δηεπαθή ρξήζηε, ζπρλά κέζσ
ελφο θαηαρσξεκέλνπ ρεηξηζηή (handler) ή επαλάθιεζεο (callback) θαη κεηαηξέπεη
ην ζπκβάλ ζε θαηάιιειε ελέξγεηα ρξήζηε, ε νπνία είλαη θαηαλνεηή απφ ην
Μονηέλο.
3. Ο Δλεγκηήρ εηδνπνηεί ην Μονηέλο γηα ηελ ελέξγεηα ηνπ ρξήζηε, πηζαλφηαηα
νδεγψληαο ζε αιιαγή ηεο θαηάζηαζεο ηνπ Μονηέλος. (Γηα παξάδεηγκα, ν Δλεγκηήρ
ελεκεξψλεη ην θαιάζη αγνξψλ ηνπ ρξήζηε.)
4. Μηα Πποβολή ππνβάιεη εξψηεκα ζην Μονηέλο πξνθεηκέλνπ λα παξάγεη κηα
θαηάιιειε δηεπαθή ρξήζηε (Γηα παξάδεηγκα, ε Πποβολή εκθαλίδεη ηελ ιίζηα κε ηα
πεξηερφκελα ηνπ θαιαζηνχ αγνξψλ). Να ζεκεησζεί φηη ε Πποβολή παίξλεη ηα δηθά
ηεο δεδνκέλα απφ ην Μονηέλο. Ο Δλεγκηήρ κπνξεί (ζε θάπνηεο πινπνηήζεηο) λα
εθδψζεη κηα γεληθή νδεγία πξνο ηελ Πποβολή γηα λα πξαγκαηνπνηήζεη αλάιπζε ηνπ
εαπηνχ ηεο. ΢ε άιιεο πινπνηήζεηο, ε Πποβολή εηδνπνηείηαη απηφκαηα απφ ην
Μονηέλο γηα αιιαγέο ζηελ θαηάζηαζε νη νπνίεο απαηηνχλ κηα αλαλέσζε ηεο νζφλεο.
5. Ζ δηεπαθή ρξήζηε πεξηκέλεη γηα πεξαηηέξσ αιιειεπηδξάζεηο ηνπ ρξήζηε, γεγνλφο ην
νπνίν μαλαξρίδεη ηνλ θχθιν ξνήο.
Κάπνηεο πινπνηήζεηο φπσο ε XForms ηεο W3C ρξεζηκνπνηνχλ επηπιένλ θαη ηελ έλλνηα ελφο
γξαθήκαηνο εμάξηεζεο (dependency graph) γηα λα απηνκαηνπνηήζνπλ ηελ αλαλέσζε ησλ
Πποβολών, φηαλ αιιάδνπλ ηα δεδνκέλα ζην Μονηέλο. Ο ζηφρνο ηεο αξρηηεθηνληθήο MVC
είλαη, κε ηελ απφδεπμε ηνπ Μονηέλος θαη ησλ Πποβολών, λα κεησζεί ε πνιππινθφηεηα ζηνλ
αξρηηεθηνληθφ ζρεδηαζκφ θαη λα απμεζεί ε επειημία θαη ε ζπληεξεζηκφηεηα ηνπ θψδηθα.
Σελίδα | 51
3
Αλάιπζε Απαηηήζεσλ Σπζηήκαηνο
΢ε απηήλ ηελ ελφηεηα ζα πεξηγξαθεί ζπλνπηηθά θαη γεληθά ε αξρηηεθηνληθή ηεο εθαξκνγήο
θαη ζα πεξηγξαθνχλ κε ιεπηνκέξεηα φιεο νη ιεηηνπξγίεο πνπ πξνζθέξεη ζηνλ ρξήζηε.
3.1 Αξρηηεθηνληθή
Ζ γεληθή ηδέα γηα ηελ δεκηνπξγία ηεο δηαδηθηπαθήο εθαξκνγήο «Έξςπνερ Δπαθέρ» πνπ είλαη
ην αληηθείκελν απηήο ηεο πηπρηαθήο εξγαζίαο, ήηαλ ε δεκηνπξγία κηαο εχξσζηεο
«μονοζέλιδηρ» εθαξκνγήο (single-page application) κέζα ζε έλα «ππθλφ» πιαίζην απφ ηελ
πιεπξά ηνπ Πειάηε. Έλα γεληθφ πεξίγξακκα ηεο αξρηηεθηνληθήο πνπ αθνινπζήζεθε γηα ηελ
δεκηνπξγία απηήο ηεο εθαξκνγήο πεξηιακβάλεη ηα παξαθάησ:

Αξρηηεθηνληθή «μονοζέλιδηρ» εθαξκνγήο (single-page application architecture)

Υξήζε ηνπ ColdFusion σο κηα Γιαδικηςακή Υπηπεζία

Αξρηηεθηνληθή MVC γηα ηελ JavaScript

Υξήζε ηνπ jQuery σο ηνπ «πιαηζίνπ» ππξήλα (core framework)
Ζ ηερλνινγία γηα ηελ πιεπξά ηνπ Γηαθνκηζηή απηήο ηεο εθαξκνγήο είλαη ην ColdFusion.
Παξφια απηά, ζηελ πξαγκαηηθφηεηα δελ έγηλε πινχζηα ελζσκάησζε ηνπ ColdFusion ζηελ
εθαξκνγή, απιψο ην ColdFusion αληηκεησπίδεηαη σο ε δηαδηθηπαθή ππεξεζία ηεο
εθαξκνγήο. Οξγαλψζεθε έλα ππθλφ «πιαίζην» κε ρξήζε ηεο JavaScript ζηελ πιεπξά ηνπ
Πειάηε, θαη εθαξκφζηεθε κηα αξρηηεθηνληθή ε νπνία αθνινπζεί ηα πξφηππα ηεο MVC
αξρηηεθηνληθήο. Σέινο, ε ππνδνκή απηήο ηηο εθαξκνγήο είλαη νπζηαζηηθά ην jQuery, ην νπνίν
Σελίδα | 52
απνηειεί θαη ην «πιαίζην» (framework) πάλσ απφ ην νπνίν έρεη ζηεζεί νιφθιεξε ν πιεπξά
ηνπ Πειάηε.
Ο ηχπνο ηεο εθαξκνγήο είλαη ζρεηηθά απιφο, είλαη κηα εθαξκνγή δηαρείξηζεο ειεθηξνληθψλ
επαθψλ, σζηφζν επηιέρηεθε έηζη ψζηε λα είλαη απιή ζηελ θαηαλφεζε, αιιά ζπλάκα λα είλαη
θαη αξθεηά πεξίπινθε ζηελ δνκή θαη ηελ αλάπηπμή ηεο γηα λα παξνπζηάζεη ηηο δπλαηφηεηεο
ηνπ AJAX πνπ επηιέρζεθαλ. Να παξνπζηάδεη ην πψο απηνχ ηνπ είδνπο ε αξρηηεθηνληθή
κπνξεί λα απινπνηήζεη ηελ αλάπηπμε αληίζηνηρσλ θαη ίζσο κεγαιχηεξεο εκβέιεηαο
εθαξκνγψλ.
3.2 Πεξηγξαθή Λεηηνπξγηώλ
Οη ιεηηνπξγίεο πνπ πεξηιακβάλεη ε εθαξκνγή φζνλ αθνξά ηελ δηαδξαζηηθφηεηα κε ηνλ
ρξήζηε είλαη νη εμήο: Αξρηθά γίλεηαη ε δεκηνπξγία θαη αλάξηεζε ηεο ιίζηα ησλ επαθψλ ζηελ
θεληξηθή ζειίδα ηεο εθαξκνγήο. ΢ηελ ζπλέρεηα απφ ηελ θεληξηθή ζειίδα πξνζθέξεηαη ε
επηινγή ηεο αλαδήηεζεο ηνπ νλφκαηνο, ηεο δηεχζπλζεο ειεθηξνληθνχ ηαρπδξνκείνπ θαη ηνπ
ηειεθψλνπ κηαο επαθήο, ε πξνβνιή ησλ ζηνηρείσλ κηαο ή πεξηζζνηέξσλ επαθψλ πνπ
εκθαλίδνληαη θάζε θνξά ζηελ ιίζηα (αλάινγα θαη κε ηα απνηειέζκαηα ηεο αλαδήηεζεο ηνπ
ρξήζηε), ε επηινγή δεκηνπξγίαο κηα λέαο επαθήο, ε επηινγή επεμεξγαζίαο κηαο ήδε
ππάξρνπζαο επαθήο, ε δηαγξαθή κηα επαθήο, θαη ε δπλαηφηεηα άκεζεο επαλαθνξάο ζηελ
θνξπθή ηεο ζειίδαο κέζσ ηνπ θνπκπηνχ πνπ εκθαλίδεηαη ζην θάησ δεμηφ κέξνο ηεο νζφλεο.
3.2.1 Αξρηθή θόξησζε ηεο εθαξκνγήο
Με ηελ θφξησζε ηεο εθαξκνγήο, παξνπζηάδεηαη ε θεληξηθή ζειίδα ηεο ε νπνία απνηειείηαη
απφ ην θχξην κέξνο, ην κέξνο ηνπ πεξηερνκέλνπ, θαη απφ ην ππφινηπν θνκκάηη πνπ
θαιχπηεηαη απφ ηελ ηαπεηζαξία ηεο ζειίδαο. ΢ην θχξην κέξνο εκθαλίδνληαη κε ηελ ζεηξά πνπ
πεξηγξάθνληαη ηα παξαθάησ. Αξρηθά ππάξρεη ην ινγφηππν ηεο ζειίδαο κε έλα εηθνλίδην ελφο
θαηαιφγνπ θαη δίπια ηελ θξάζε «Έξςπνερ Δπαθέρ». Μεηά ην ινγφηππν ππάξρεη ε κπάξα
εξγαιείσλ ηεο εθαξκνγήο, ε νπνία πεξηιακβάλεη κεηαμχ άιισλ, ην πεδίν αλαδήηεζεο θαη ηελ
ιέμε «νέαεπαθή» πνπ ζηελ πξαγκαηηθφηεηα είλαη κηα ζχλδεζε ε νπνία κεηαθέξεη ηνλ
ρξήζηε ζηελ θφξκα δεκηνπξγία επαθήο. Κάησ απφ ηελ κπάξα εξγαιείσλ εκθαλίδεηαη ε ιίζηα
κε ηηο επαθέο, ε νπνία απνηειείηαη απφ πνιιά «θνπηάθηα», έλα γηα θάζε επαθή. Να
ζεκεησζεί, φηη θαζ’ φιε ηελ εθηέιεζε ηεο εθαξκνγήο, ε εθάζηνηε ιίζηα επαθψλ πνπ
εκθαλίδεηαη (είηε είλαη νιφθιεξε ε ιίζηα, είηε κηα ιίζηα απφ θηιηξαξηζκέλεο επαθέο) είλαη κε
αιθαβεηηθή ζεηξά, κε βάζε ηα νλφκαηα ησλ επαθψλ. Οη επαθέο κε αγγιηθά νλφκαηα
εκθαλίδνληαη πξηλ απφ ηηο επαθέο κε ειιεληθά. Καζψο ν ρξήζηεο δηαηξέρεη ηελ ιίζηα κε ηηο
επαθέο θπιψληαο πξνο ηα θάησ, εκθαλίδεηαη έλα θνπκπί ζηελ θάησ δεμηά γσλία ηεο ζειίδαο,
Σελίδα | 53
ην νπνίν απεηθνλίδεη έλα βέινο πνπ δείρλεη πξνο ηα πάλσ. Παηψληαο απηφ ην θνπκπί, ν
ρξήζηεο κεηαθέξεηαη ζηελ θνξπθή ηεο ζειίδαο απηφκαηα, φρη απεπζείαο, αιιά κε έλα εθέ
θχιηζεο πξνο ηα πάλσ.
3.2.2 Πεδίν Αλαδήηεζεο
Σν πεδίν αλαδήηεζεο ιεηηνπξγεί νπζηαζηηθά σο έλα πεδίν θηιηξαξίζκαηνο ησλ επαθψλ. Σν
εθάζηνηε γξάκκα ή γξάκκαηα πνπ ζα πιεθηξνινγήζεη ν ρξήζηεο ρξεζηκνπνηείηαη σο θίιηξν
γηα λα δεκηνπξγεζεί θαη λα εκθαληζηεί δπλακηθά ε αλαλεσκέλε ιίζηα κε ηηο επαθέο πνπ
«πέξαζαλ» απφ ην θίιηξν. Ο ρξήζηεο κπνξεί λα πιεθηξνινγήζεη νηηδήπνηε επηζπκεί, κε
ειιεληθνχο, ιαηηληθνχο θαη αξηζκεηηθνχο ραξαθηήξεο, θαη ην πεξηερφκελν ηνπ πεδίνπ ζα
ρξεζηκνπνηεζεί γηα ην θηιηξάξηζκα ησλ επαθψλ. Ζ δηαδηθαζία θηιηξαξίζκαηνο μεθηλάεη απφ
ηνλ πξψην ραξαθηήξα πνπ ζα πιεθηξνινγήζεη ν ρξήζηεο θαη ζπλερίδεη λα εθαξκφδεηαη γηα
φζν ρξνληθφ δηάζηεκα ν ρξήζηεο εηζάγεη ραξαθηήξεο ζην πεδίν. Γηα παξάδεηγκα, εάλ ν
ρξήζηεο εηζάγεη ηνπο ραξαθηήξεο «bob» ζην πεδίν δηαδνρηθά, αξρηθά ζα θηιηξαξηζηνχλ θαη
ζα εκθαληζηνχλ νη επαθέο πνπ πεξηέρνπλ ζηα ζηνηρεία ηνπο ηνλ ραξαθηήξα «b», ζηελ
ζπλέρεηα ζα θηιηξαξηζηνχλ θαη ζα εκθαληζηνχλ απηέο πνπ πεξηέρνπλ ηνπο ραξαθηήξεο «bo»,
θαη ηειηθά ζα εκθαληζηνχλ νη επαθέο πνπ πεξηέρνπλ νιφθιεξε ηελ ιέμε «bob».
Δπηζεκαίλεηαη φηη ην θηιηξάξηζκα γίλεηαη ζηηο επαθέο πνπ ηα ζηνηρεία ηνπο πεπιέσοςν ηνπο
ραξαθηήξεο πνπ απνηεινχλ ην θίιηξν, θαη φρη κφλν απηφ απαξαίηεηα. Γειαδή, ζχκθσλα κε
ην παξάδεηγκα πην πάλσ, κηα επαθή πνπ ην φλνκά ηεο είλαη «Bobby Dyllan», ζα εκθαληζηεί
φηαλ ρξεζηκνπνηεζνχλ ζαλ θίιηξν νη ραξαθηήξεο «bob».
Ζ αλαδήηεζε ησλ ραξαθηήξσλ γίλεηαη ζε φια ηα ζηνηρεία ησλ επαθψλ, δειαδή θαη ζην
φλνκα κηαο επαθήο αιιά ηαπηφρξνλα θαη ζηνλ αξηζκφ ηειεθψλνπ θαη ηελ δηεχζπλζε
ειεθηξνληθνχ ηαρπδξνκείνπ. Δπνκέλσο, ζχκθσλα κε ην πξνεγνχκελν παξάδεηγκα, ζην ηέινο
ηνπ θηιηξαξίζκαηνο ζα εκθαλίδνληαη κφλν νη επαθέο πνπ κέζα ζην φλνκα ή ηελ δηεχζπλζε
ειεθηξνληθνχ ηαρπδξνκείνπ ηνπο,
πεξηέρνληαη νη ραξαθηήξεο «bob» κε ηελ ζεηξά πνπ
πιεθηξνινγήζεθαλ (δειαδή δεν ζα εκθαλίδνληαη νη επαθέο πνπ π.ρ. ην φλνκά ηνπο πεξηέρεη
ηνπο ραξαθηήξεο «obb»).
Δλψ ν ρξήζηεο βξίζθεηαη εληφο ηνπ πεδίνπ αλαδήηεζεο έρεη δχν επηινγέο-δπλαηφηεηεο, νη
νπνίεο εθηεινχληαη κε ην πάηεκα πιήθηξσλ ηνπ πιεθηξνινγίνπ. ΢πγθεθξηκέλα, ν ρξήζηεο
έρεη ηελ δπλαηφηεηα λα παηήζεη ην θνπκπί «Enter» ηνπ πιεθηξνινγίνπ, κε απνηέιεζκα νη
πξψηεο ηξεηο επαθέο ηηο ιίζηαο ζα αλαδηπισζνχλ πξνο ηα θάησ, κε έλα εθέ θίλεζεο, έηζη
ψζηε λα εκθαληζηνχλ ηα επηπιένλ ζηνηρεία ηνπο (δειαδή ν αξηζκφο ηειεθψλνπ θαη ε
δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ). Ζ αλαδίπισζε ησλ ηξηψλ πξψησλ επαθψλ, θαη φρη
πεξηζζνηέξσλ, επηιέρζεθε γηα ιφγνπο θπξίσο επηδφζεσλ, γηα λα κελ ππάξρνπλ ππεξβνιηθά
πνιιά εθέ θίλεζεο πνπ ζα εθηεινχληαη ηαπηφρξνλα, θαη γηα ιφγνπο ρξεζηηθφηεηαο, αθνχ
Σελίδα | 54
βάζε πεξηερνκέλνπ, κεηά ηελ ηξίηε επαθή πνπ αλαδηπιψλεηαη, δελ απνκέλεη ρψξνο γηα λα
εκθαληζηεί θακία επηπιένλ επαθή εληφο ηνπ νξαηνχ πεδίνπ ηεο ζειίδαο. Ζ δεχηεξε
δπλαηφηεηα πνπ έρεη ν ρξήζηεο είλαη λα παηήζεη ην ζπλδπαζκφ ησλ πιήθηξσλ «Shift+Enter»
ηνπ πιεθηξνινγίνπ ηνπ, γεγνλφο ην νπνίν ζα θέξεη σο απνηέιεζκα ηελ κεηαθνξά ηνπ ζηελ
θφξκα επεμεξγαζίαο ηεο πξψηεο επαθήο πνπ βξίζθεηαη ηελ δεδνκέλε ζηηγκή ζηελ ιίζηα
επαθψλ ηνπ (δειαδή εάλ κεηά απφ κηα αλαδήηεζε ν ρξήζηεο έρεη κπξνζηά ηνπ δχν επαθέο,
ζα κεηαθεξζεί ζηελ θφξκα επεμεξγαζίαο ηεο πξψηεο απφ ηελ ιίζηα).
Δάλ ν ρξήζηεο δελ έρεη πιεθηξνινγήζεη θάηη ζην πεδίν αλαδήηεζεο, ή εάλ απηφ πνπ έρεη
πιεθηξνινγήζεη δελ έρεη εκθαλίζεη θαλέλα απνηέιεζκα ζηελ ιίζηα ησλ επαθψλ, κε ην
πάηεκα ηνπ ζπλδπαζκνχ θνπκπηψλ «Shift+Enter» ή κε ην θιηθ ηνπ πνληηθηνχ ηνπ πάλσ ζηελ
ζχλδεζε «νέαεπαθή», ζα κεηαθεξζεί ζηελ θφξκα δεκηνπξγίαο λέαο επαθήο, ε νπνία εάλ έρεη
πιεθηξνινγεζεί πξνεγνπκέλσο θάηη ζην πεδίν αλαδήηεζεο, ζα γεκίζεη ην πεδίν ηνπ νλφκαηνο
ηεο λέαο επαθήο κε ην πεξηερφκελν πνπ είρε πιεθηξνινγεζεί. Γηα παξάδεηγκα, εάλ ν ρξήζηεο
πιεθηξνινγήζεη ηνπο ραξαθηήξεο «Οςπανία» θαη δελ ππάξρνπλ απνηειέζκαηα, παηψληαο
«Shift+Enter» ζα κεηαθεξζεί ζηελ θφξκα δεκηνπξγίαο λέαο επαθήο, φπνπ ην πεδίν ηνπ
νλφκαηνο ηεο λέαο επαθήο ζα πεξηέρεη ήδε ην φλνκα «Οςπανία» θαη επίζεο ζα είλαη ην
ηξέρνλ θεληξαξηζκέλν πεδίν γηα λα δερηεί ηελ πεξαηηέξσ είζνδν ηνπ ρξήζηε.
Δάλ ν ρξήζηεο βξίζθεηαη ζην πεδίν αλαδήηεζεο θαη παηήζεη ηνλ ζπλδπαζκφ ησλ θνπκπηψλ
«ALT+Enter» απφ ην πιεθηξνιφγηφ ηνπ, ζα μεθηλήζεη ε ιεηηνπξγία δηαγξαθήο ηεο πξψηεο
επαθήο πνπ εκθαλίδεηαη εθείλε ηελ δεδνκέλε ζηηγκή ζηελ ιίζηα. Αξρηθά ν ρξήζηεο ζα
εηδνπνηεζεί κε έλα παξάζπξν εηδνπνίεζεο απφ ηελ εθαξκνγή ην νπνίν ζα ηνπ παξέρεη ηηο δχν
επηινγέο, «ΟΚ» θαη «Ακύπυζη». ΢ηελ ζπλέρεηα, θαη εθφζνλ επηιέμεη λα επηθπξψζεη ηελ
επηινγή ηνπ γηα δηαγξαθή ηεο επαθήο, ε δηαγξαθή ζα εθηειεζηεί θαη ε ιίζηα ησλ επαθψλ ζα
ελεκεξσζεί θαη ζα αλαλεσζεί ζχκθσλα κε ηα θαηλνχξγηα δεδνκέλα.
3.2.3 Λίζηα Δπαθώλ
Ζ ιίζηα κε ηηο επαθέο δεκηνπξγείηαη, θηιηξάξεηαη θαη αλαλεψλεηαη δπλακηθά, ζχκθσλα κε ηηο
ελέξγεηεο ηνπ ρξήζηε. Δθφζνλ ππάξρνπλ επαθέο ζηελ ιίζηα, εκθαλίδνληαη νξγαλσκέλεο
αιθαβεηηθά ζε δηαδνρηθά καθξφζηελα «θνπηηά». Κάζε «θνπηί» πεξηέρεη απφ αξηζηεξά πξνο
ηα δεμηά ηα εμήο: Σν φλνκα ηεο επαθήο, θαη ηξείο ιέμεηο-ζπλδέζεηο, ηηο «πεπιζζ.», «επεξ.»
θαη «διαγπαθή». Ζ ιέμε-ζχλδεζε «πεπιζζ.» είλαη ζχληκεζε ηεο ιέμεο «πεπιζζόηεπα» θαη
εθφζνλ παηεζεί εκθαλίδνληαη, κε έλα εθέ αλαδίπισζεο πξνο ηα θάησ, ηα ζηνηρεία ηεο
εθάζηνηε επαθήο, ηα νπνία απνηεινχληαη απφ ην φλνκα ηεο επαθήο, ηνλ αξηζκφ ηειεθψλνπ
θαη ηελ δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ. Ο ρξήζηεο κπνξεί λα αλαδηπιψζεη φζα
θνπηηά επηζπκεί ηαπηφρξνλα, γηα λα εκθαλίζεη ηα ζηνηρεία φζσλ επαθψλ επηζπκεί.
Σελίδα | 55
Γίπια ζηελ ζχλδεζε «πεπιζζ.», ππάξρεη ε ζχλδεζε «επεξ.» ε νπνία πξνέξρεηαη απφ ηελ
ζχληκεζε ηεο ιέμεο «επεξεπγαζία». Παηψληαο απηήλ ηελ ζχλδεζε κηα επαθήο, ν ρξήζηεο
κεηαθέξεηαη ζηελ θφξκα επεμεξγαζίαο επαθήο, φπνπ κπνξεί λα επεμεξγαζηεί ηα ζηνηρεία ηεο
επαθήο απηήο. Σέινο, ε ηειεπηαία επηινγή πνπ εκθαλίδεηαη ζην «θνπηί» κηαο επαθήο, είλαη ε
ζχλδεζε «διαγπαθή». Όπσο δειψλεη θαη ην φλνκά ηεο, ε ζχλδεζε απηή δηαγξάθεη ηελ
αληίζηνηρε επαθή. Πξηλ ηελ νξηζηηθή δηαγξαθή, ν ρξήζηεο ελεκεξψλεηαη κε έλα παξάζπξν
επηβεβαίσζεο, ζην νπνίν εξσηάηαη εάλ είλαη ζχκθσλνο γηα ηελ ελέξγεηά πνπ πξφθεηηαη λα
εθηειεζηεί θαη ηνπ πξνζθέξνληαη νη επηινγέο «ΟΚ» θαη «Άκςπο», νη νπνίεο επηβεβαηψλνπλ ή
αθπξψλνπλ ηελ δηαγξαθή αληίζηνηρα. Με ηελ δηαγξαθή κηαο επαθήο, ε ιίζηα ελεκεξψλεηαη
θαη επαλαθνξηψλεηαη.
3.2.4 Φόξκα Δπεμεξγαζίαο θαη Γεκηνπξγία Νέαο Δπαθήο
Οη πξναλαθεξζείζεο θφξκεο, επεμεξγαζίαο θαη δεκηνπξγία λέαο επαθήο, είλαη νπζηαζηηθά ε
ίδηα θφξκα, ε νπνία ζηελ πεξίπησζε ηεο επεμεξγαζίαο κηα επαθήο εκθαλίδεηαη κε ηα πεδία
ηεο λα πεξηέρνπλ ηα ζηνηρεία ηεο επαθήο, ελψ ζηελ δεχηεξε πεξίπησζε εκθαλίδνληαη θελά
(ζηελ δεχηεξε πεξίπησζε κπνξεί λα ππάξρεη πεξηερφκελν ζην πεδίν νλφκαηνο κηαο επαθήο,
αλάινγα κε ηελ ελέξγεηα πνπ νδήγεζε ηελ εθαξκνγή ζηελ θφξκα, φπσο πεξηγξάθεηαη
παξαπάλσ). Σα πεδία ηεο θφξκαο είλαη ηα αληίζηνηρα κε ηα ζηνηρεία κηα εθαξκνγήο, δειαδή
«Όνομα», «Τηλέθυνο» θαη «Email». Απφ ηα πεδία ηεο θφξκαο, κφλν ην πεδίν «Όνομα»
είλαη ππνρξεσηηθφ, ελψ ηα άιια κπνξνχλ λα παξακείλνπλ θελά. ΢ηελ πεξίπησζε πνπ ν
ρξήζηεο πξνζπαζήζεη λα απνζεθεχζεη κηα επαθή, ρσξίο λα έρεη δψζεη φλνκα γηα απηήλ, ε
εθαξκνγή εκθαλίδεη έλα κήλπκα ελζσκαησκέλν πάλσ αθξηβψο απφ ην πεδίν ηνπ νλφκαηνο,
ην νπνίν εηδνπνηεί ηνλ ρξήζηε λα εηζάγεη έλα φλνκα. Σν κήλπκα πνπ εκθαλίδεηαη αλαγξάθεη:
«Παπακαλώ ειζάγεηε ένα όνομα».
΢ην πάλσ αξηζηεξφ κέξνο ηεο θφξκαο, ππάξρεη ε ζχλδεζε κε ην φλνκα «πίζυ», ην νπνίν
κεηαθέξεη ηνλ ρξήζηε πίζσ ζηελ θεληξηθή ζειίδα ηεο εθαξκνγήο, ηελ ζειίδα δειαδή κε ηελ
ιίζηα επαθψλ, ρσξίο λα απνζεθεχεηαη θακία αιιαγή θαη ρσξίο λα εκθαλίδεηαη θακία
εηδνπνίεζε ζηνλ ρξήζηε. Σν θνπκπί απηφ έρεη δεκηνπξγεζεί γηα γξήγνξε επηζηξνθή ζηελ
ιίζηα επαθψλ.
΢ην θάησ κέξνο ηεο θφξκαο, ππάξρνπλ ηα θνπκπηά «Αποθήκεςζη & Κλείζιμο» θαη
«Ακύπυζη» κε ηελ αλαγξαθφκελε ζεηξά. Παηψληαο ην θνπκπί «Αποθήκεςζη & Κλείζιμο»
ε εθαξκνγή απνζεθεχεη φηη αιιαγέο έρνπλ γίλεη απφ ηνλ ρξήζηε, ζπκπεξηιακβαλνκέλεο θαη
ηεο δεκηνπξγίαο κηαο λέαο επαθήο εάλ απηφ είλαη απαξαίηεην, θαη ζηελ ζπλέρεηα κεηαθέξεη
ηνλ ρξήζηε πίζσ ζηελ θεληξηθή ζειίδα. Με ην πάηεκα ηνπ θνπκπηνχ ζα γίλεη θαη ν έιεγρνο
γηα ην εάλ ην πεδίν ηνπ νλφκαηνο είλαη θελφ, θαη ζηελ ζπλέρεηα ζα εκθαληζηεί ην κήλπκα πνπ
πεξηγξάθεηαη παξαπάλσ. Σν θνπκπί «Ακύπυζη», πνπ νπζηαζηηθά είλαη θνπκπί-ζχλδεζε, κε
Σελίδα | 56
ην πνπ παηεζεί ζα εκθαλίζεη ζηνλ ρξήζηε έλα παξάζπξν επηβεβαίσζεο, ην νπνίν εηδνπνηεί
ηνλ ρξήζηε φηη πξφθεηηαη λα ράζεη ηηο αιιαγέο πνπ έρεη θάλεη, θαη εάλ ν ρξήζηεο
επηβεβαηψζεη ηελ εληνιή ηνπ, ζα αθπξψζεη ηηο αιιαγέο θαη ζα κεηαθέξεη ηνλ ρξήζηε πίζσ
ζηελ θεληξηθή ζειίδα.
3.2.5 Η ζπκπεξηθνξά ηεο δηεύζπλζεο URL ηεο εθαξκνγήο
Δάλ παξαηεξήζεη θαλείο ηελ δηεχζπλζε URL ηεο εθαξκνγήο πνπ εκθαλίδεηαη ζην
πξφγξακκα πεξηήγεζεο, ζα δηαπηζηψζεη φηη πέξαλ ηνπ θνκκαηηνχ πνπ παξακέλεη ζηαζεξφ,
ππάξρεη θαη έλα θνκκάηη, κεηά ηνλ ραξαθηήξα «#» νπνίν αιιάδεη ζχκθσλα κε ηελ δεδνκέλε
θαηάζηαζε πνπ βξίζθεηαη ε εθαξκνγή. Έηζη π.ρ. φηαλ βξηζθφκαζηε ζηελ θφξκα
επεμεξγαζίαο ηεο επαθήο κε εζσηεξηθφ αλαγλσξηζηηθφ (ID) ην λνχκεξν 67, ζηελ δηεχζπλζε
URL πέξαλ ηνπ ζηαζεξνχ κέξνπο βιέπνπκε λα αλαγξάθεηαη ην: «#/contacts/edit/67», ελψ
βξηζθφκελε ζηελ θφξκα δεκηνπξγίαο λέαο επαθήο, βιέπνπκε λα αλαγξάθεηαη ην:
«#/contacts/add». Απηέο νη αιιαγέο παξάγνληαη δπλακηθά θαη αλαλεψλνληαη ζε θάζε αιιαγή
ηεο θαηάζηαζεο ηεο εθαξκνγήο, έηζη ψζηε ην πξφγξακκα πεξηήγεζεο λα θξαηάεη ζην
ηζηνξηθφ ηνπ ηεο δηάθνξεο θαηαζηάζεηο, θαη έηζη λα ιεηηνπξγνχλ νη επηινγέο «Πίζυ» θαη
«Δμππόρ» πνπ πξνζθέξεη ζηνλ ρξήζηε. Δπίζεο κε απηφλ ηνλ ηξφπν ν ρξήζηεο κπνξεί λα
απνζεθεχζεη κηα δεδνκέλε θαηάζηαζε ηεο εθαξκνγήο ζηνπο ζειηδνδείθηεο ηνπ. Παξφια απηά
ην θχξην ηκήκα ηεο δηεχζπλζεο URL ηεο εθαξκνγήο παξακέλεη ζηαζεξφ θαη δελ αιιάδεη κε
ηέηνην ηξφπν ψζηε λα ρξεηάδεηαη επαλαθφξησζε ή αιιαγή θάπνηαο ζειίδαο.
Δδψ νινθιεξψλνληαη νη ιεηηνπξγίεο-δπλαηφηεηεο πνπ πξνζθέξεη ζηνλ ρξήζηε ε εθαξκνγή.
Σελίδα | 57
4
Σρεδίαζε Σπζηήκαηνο
΢ε απηήλ ηελ ελφηεηα ζα πεξηγξαθεί ε ζρεδίαζε ηεο εθαξκνγήο. Αλαιχεηαη ε γεληθή
αξρηηεθηνληθή ηεο εθαξκνγήο θαη ζηελ ζπλέρεηα αλαιχνληαη νη επηκέξνπο αξρηηεθηνληθέο ησλ
δπν πιεπξψλ ηεο εθαξκνγήο, ηνπ Πειάηε θαη ηνπ Γηαθνκηζηή.
4.1 Αξρηηεθηνληθή Δθαξκνγήο
Ζ αξρηηεθηνληθή ηεο εθαξκνγήο πεξηιακβάλεη ηηο δπν πιεπξέο δξάζεο ηεο εθαξκνγήο, ηελ
πιεπξά ηνπ Πειάηε θαη ηελ πιεπξά ηνπ Γηαθνκηζηή. Μηα γεληθή κνξθή ηεο αξρηηεθηνληθήο
γηα φιν ην πεδίν αλαθνξάο φιεο ηεο εθαξκνγήο, θαίλεηαη ζην Σσήμα 5.1.
Όζνλ αθνξά ηελ πιεπξά ηνπ Γηαθνκηζηή, φιεο νη αηηήζεηο πεξλάλε απφ ην αξρείν
«Application.cfc». Απηέο κπνξεί λα είλαη αηηήζεηο SOAP, αηηήζεηο HTTP, ή αηηήζεηο AMF
(Action Message Format). Σν «Application.cfc» είλαη ην θχξην «ηνχλει» πνπ νδεγεί ζηελ
εθαξκνγή ColdFusion ζηελ πιεπξά ηνπ Γηαθνκηζηή. Σν «Application.cfc», εθφζνλ δερηεί
θάπνην είδνο αίηεζεο, ζηελ ζπλέρεηα επηθνηλσλεί κε ην Μονηέλο (model) ή κε ηηο
απνκαθξπζκέλεο δηεπαθέο API (remote API), νη νπνίεο κε ηελ ζεηξά ηνπο κπνξνχλ επίζεο
λα επηθνηλσλήζνπλ κε ην Μονηέλο.
Όζνλ αθνξά ηελ πιεπξά ηνπ Πειάηε, ην θχξην «ηνχλει» γηα ηελ επηθνηλσλία απηή ηε θνξά
είλαη ην αξρείν «application.js». Δίλαη ην αληίζηνηρν ηνπ «Application.cfc» αιιά γηα ηελ
πιεπξά ηνπ Πειάηε. Σν «application.js» είλαη ην «πιαίζην» ηεο JavaScript, ην jQuery
«πιαίζην» (jQuery framework), ην νπνίν είλαη ν ππξήλαο ηεο εθαξκνγήο, φζνλ αθνξά ηελ
Σελίδα | 58
πιεπξά ηνπ Πειάηε. Αλαιακβάλεη ηελ επηθνηλσλία κε ηνλ Δλεγκηή (controller) φηαλ
αληηιακβάλεηαη αιιαγέο ζηελ δηεχζπλζε ηνπ URL, νπνίνο κε ηελ ζεηξά ηνπ απνθαζίδεη εάλ
ζα επηθνηλσλήζεη κε ην Μονηέλο (model) ή κε ηηο Πποβολέρ (Views). Οη Πποβολέρ κε ηελ
ζεηξά ηνπο, πνπ γηα θαιχηεξε θαηαλφεζε κπνξνχλ λα ζεσξεζνχλ θαη σο Δλεγκηέρ
Πποβολήρ (View Controllers), κπνξνχλ επίζεο λα επηθνηλσλήζνπλ κε ην Μονηέλο.
Απηφ πνπ αμίδεη λα αλαθεξζεί εδψ, είλαη πσο φζνλ αθνξά ηελ επηθνηλσλία κεηαμχ ησλ δπν
πιεπξψλ, ην κφλν κέξνο ηεο πιεπξάο ηνπ Πειάηε πνπ «κηιάεη» κε ηνλ Γηαθνκηζηή είλαη ην
Μονηέλο. Σν «application.js», ν Δλεγκηήρ θαη αζθαιψο νη Πποβολέρ, δελ γλσξίδνπλ
νπζηαζηηθά ηελ χπαξμε ελφο Γηαθνκηζηή, θαζψο δελ έρνπλ άκεζε επηθνηλσλία κε θάπνηνλ.
Δπνκέλσο, νπνηαδήπνηε κνξθή πιεξνθνξίαο πνπ ζα ρξεηαζηεί λα ιεθζεί απφ ηνλ
Γηαθνκηζηή, δηεμάγεηαη ζην επίπεδν ηνπ Μονηέλος.
Σσήμα 5.1 Γιάγπαμμα ηηρ απσιηεκηονικήρ ηηρ εθαπμογήρ
4.2 Πιεπξά ηνπ Πειάηε
Ο πιεπξά ηνπ Πειάηε απνηειεί ην βαζηθφ κέξνο ηεο εθαξκνγήο, θαη βαζίδεηαη θαηά θχξην
ιφγν ζηελ ηερλνινγία θαη ηηο επθνιίεο πνπ πξνζθέξεη ε βηβιηνζήθε jQuery ηεο JavaScript.
Δπεηδή ε εθαξκνγή έρεη ζρεδηαζηεί ζηα πιαίζηα κηαο «μονοζέλιδηρ» εθαξκνγήο (single-
Σελίδα | 59
application), ε αξρηθή ζειίδα (Index page) νπζηαζηηθά είναι θαη ε εθαξκνγή. Σν αξρείν
«application.js» είλαη ην «πιαίζην» (framework), δειαδή ν θχξηνο ζθειεηφο, γηα ηελ
εθαξκνγή φζνλ αθνξά ηελ πιεπξά ηνπ Πειάηε,
φπσο αληίζηνηρα, ην αξρείν
«Application.cfc» είλαη ν θχξηνο ζθειεηφο ηεο εθαξκνγήο ζηελ πιεπξά ηνπ Γηαθνκηζηή.
Ζ εθαξκνγή παξαθνινπζεί ηελ δηεχζπλζε ηνπ URL γηα αιιαγέο ζην κεηαβιεηφ κέξνο ηνπ
δειαδή ην κέξνο πνπ, φπσο αλαιχζεθε θαη ζηελ πξνεγνχκελε ελφηεηα, μεθηλάεη κεηά ην
ζχκβνιν «#» (ην ιεγφκελν θαη hash ζχκβνιν). Απηέο νη αιιαγέο ιέγνληαη θαη «αλλαγέρhash» («hash changes») απφ ην φλνκα ηνπ ζπκβφινπ ή «αλλαγέρ αποζπάζμαηορ»
(fragment changes) θαζψο απηφ πνπ αιιάδεη είλαη έλα ζπγθεθξηκέλν απφζπαζκα απφ ηελ
δηεχζπλζε URL. Όηαλ ε εθαξκνγή αληρλεχεη «αιιαγέο-hash» φπσο είλαη ε αιιαγή απφ ηελ
αξρηθή θαηάζηαζε (πνπ είλαη «#/contacts/») ζηελ θαηάζηαζε επεμεξγαζίαο ηεο επαθήο κε ην
αλαγλσξηζηηθφ 123 (πνπ είλαη «#/contacts/edit/123») γλσξίδεη πσο πξέπεη λα «κηιήζεη» κε
ηνλ Δλεγκηή θαη λα ηνλ εηδνπνηήζεη φηη έγηλε κηα «αιιαγή-hash». Ο Δλεγκηήρ κε ηελ ζεηξά
ηνπ, γλσξίδεη πψο λα αληηζηνηρίδεη απηέο ηηο «αιιαγέο-hash» ζε εζσηεξηθνχο «δηαρεηξηζηέο
ζπκβάληνο» («event handlers»), νη νπνίνη κε ηελ ζεηξά ηνπο κπνξνχλ λα αλαζέζνπλ ηνλ
έιεγρν είηε ζην Μονηέλο είηε ζηηο Πποβολέρ.
Ζ παξαπάλσ αξρηηεθηνληθή κπνξεί λα απνδνζεί θαη ζρεδηαγξακκαηηθά, φπσο θαίλεηαη ζην
Σσήμα 5.2, γηα θαιχηεξε θαηαλφεζε. Όπσο θαίλεηαη θαη ζην ζρήκα έρνπκε ην
«application.js», ην νπνίν είλαη ν ππξήλαο ηεο πιεπξάο ηνπ Πειάηε, πνπ παξαθνινπζεί ηελ
δηεχζπλζε URL γηα αιιαγέο. Όηαλ αληρλεχζεη αιιαγέο, «κηιάεη» κε ηνλ Δλεγκηή, θαη ηνλ
εηδνπνηεί γηα απηέο ηηο αιιαγέο. Με ηελ ζεηξά ηνπ ν Δλεγκηήρ δξνκνινγεί απηέο ηηο
«αιιαγέο-hash» ζηνπο εζσηεξηθνχο δηαρεηξηζηέο ζπκβάληνο, νη νπνίνη κπνξνχλ λα
«κηιήζνπλ» είηε κε ην Μονηέλο, είηε κε ηηο Πποβολέρ. Οη ίδηεο νη Πποβολέρ κπνξνχλ λα
«κηιήζνπλ» κε ην Μονηέλο απηφλνκα, γηα λα ζπιιέμνπλ πιεξνθνξίεο. Σν κφλν κέξνο ηεο
εθαξκνγήο ζηελ πιεπξά ηνπ Πειάηε πνπ πξέπεη λα επηθνηλσλήζεη κε ηνλ Γηαθνκηζηή, είλαη
ην Μονηέλο, ην νπνίν ζα επηθνηλσλεί κε ηελ ρξήζε απνκαθξπζκέλσλ θιήζεσλ API (Remote
API calls). Με απηφλ ηνλ ηξφπν, ε πιεπξά ηνπ Γηαθνκηζηή αληηκεησπίδεηαη σο κηα
δηαδηθηπαθή ππεξεζία, θαη φρη ζαλ θάηη πνπ ελζσκαηψλεηαη κε ηελ κεζνδνινγία «αίηεζεοαπάληεζεο».
Καζψο ν Δλεγκηήρ θαη νη Πποβολέρ αληαπνθξίλνληαη ζε ζπκβάληα πνπ ιακβάλνπλ ρψξα
εληφο ηνπ ζπζηήκαηνο, κπνξνχλ επίζεο λα δεηήζνπλ απφ ηελ εθαξκνγή λα αιιάμεη ζέζεηο
(δειαδή δηεπζχλζεηο). Απηφ είλαη θαηά θάπνην ηξφπν ην αληίζηνηρν θνκκάηη ζηνλ
Γηαθνκηζηή, κε ηελ θιήζε ηεο εηηθέηαο «CFLocation», φπνπ, γηα παξάδεηγκα, ν Δλεγκηήρ
ιακβάλεη κηα εληνιή δηαγξαθήο, εθηειεί ηελ δηαγξαθή θαη ζηελ ζπλέρεηα πξέπεη λα
εηδνπνηήζεη ηελ εθαξκνγή φηη εθηέιεζε ηελ εληνιή θαη φηη ζα πξέπεη λα «γπξίζεη» (ε
εθαξκνγή) ηνλ ρξήζηε πίζσ ζηε ιίζηα ησλ επαθψλ. Γπξίδνληαο πίζσ ζην ζρεδηάγξακκά καο,
Σελίδα | 60
κφιηο ζα δεηεζεί απφ ηελ εθαξκνγή λα αιιάμεη ζέζε, ζα ελεξγνπνηεζεί ε ίδηα ξνή εξγαζίαο
(Work Flow), κε ηελ δηεχζπλζε URL λα αιιάδεη ζέζε θαη λα «πεγαίλεη» ζηελ ιίζηα ησλ
επαθψλ θαη λα μεθηλάεη ε ίδηα δηαδηθαζία πάιη απφ ηελ αξρή.
Σσήμα 5.2 Γιάγπαμμα ηηρ απσιηεκηονικήρ ζηην πλεςπά ηος Πελάηη
4.3 Πιεπξά ηνπ Γηαθνκηζηή
Ζ πιεπξά ηνπ Γηαθνκηζηή απνηειεί ηελ δηαδηθηπαθή ππεξεζία ηεο εθαξκνγήο, θαη βαζίδεηαη
θαηά θχξην ιφγν ζηελ ηερλνινγία ColdFusion. Οπνηαδήπνηε επηθνηλσλία κε ηελ πιεπξά ηνπ
Γηαθνκηζηή «πεξλάεη» κέζσ ηνπ αξρείνπ «Application.cfc». Αλεμάξηεηα απφ ηνλ ηχπν ησλ
αηηήζεσλ πνπ δέρεηαη ν Γηαθνκηζηήο, είηε είλαη CFM Αιηήζειρ, είηε είλαη απνκαθξπζκέλεο
CFC Αιηήζειρ, φιεο «πεξλάλε» κέζσ ηνπ αξρείνπ «Application.cfc». Δίλαη ην εζσηεξηθφ, ην
έκθπην, «πιαίζην» ζθειεηφο ηεο εθαξκνγήο φζνλ αθνξά ην θνκκάηη ηνπ ColdFusion. Ζ
πιεξνθνξία πνπ επηζηξέθεηαη ζηνλ Πειάηε, κεηά απφ ην πέξαζκα κέζα απφ ην
«Application.cfc», κπνξεί λα είλαη πιήξσο κεηαβιεηή. Μπνξεί λα είλαη ζε κνξθή HTML,
κπνξεί λα είλαη ζε κνξθή JSON, ζε κνξθή θεηκέλνπ (text), ζε κνξθή SOAP, κπνξεί αθφκε
θαη λα είλαη ζε κνξθή AMF ή πξνζαξκνζκέλεο XML (customized XML) θαη ζε πνιιέο
Σελίδα | 61
άιιεο κνξθέο. Απηή είλαη κηα απφ ηηο πνιιέο επηινγέο-δπλαηφηεηεο πνπ πξνζθέξεη ε
ηερλνινγία ColdFusion.
Σσήμα 5.3 Γιάγπαμμα ηηρ απσιηεκηονικήρ ζηην πλεςπά ηος Γιακομιζηή
΢ην Σσήμα 5.3 θαίλεηαη έλα γεληθφ ζρεδηάγξακκα ηεο αξρηηεθηνληθήο θαη ηεο ξνήο εξγαζίαο
ηεο πιεπξάο ηνπ Γηαθνκηζηή. Όπσο θαίλεηαη ζην ζρήκα, ην αξρείν «Application.cfc» είλαη
ζηελ θνξπθή ηεο αξρηηεθηνληθήο ππξακίδαο. Δζσηεξηθά ηνπ «Application.cfc», θαιείηαη o
δηαρεηξηζηήο ζπκβάλησλ (event handler) «onRequestStart()», ν νπνίνο θαιείηαη «ζησπεξά»
(δειαδή απηφκαηα θαη ζην παξαζθήλην, implicitly) απφ ηνλ «ColdFusion Server» ρσξίο λα
ρξεηαζηεί επηπιένλ πξνγξακκαηηζκφο. Ο «onRequestStart()» επηκειείηαη ησλ απνθάζεσλ,
φζνλ αθνξά ηελ δξνκνιφγεζε ηεο εηζεξρφκελεο αίηεζεο. Δάλ είλαη απιά κηα CFM Αίηηζη,
ζα ηελ δξνκνινγήζεη ζηνλ δηαρεηξηζηή ζπκβάλησλ «onRequest()», ν νπνίνο αλαιακβάλεη
ηελ ζπκπεξίιεςε (including) ησλ CFM ζειίδσλ. Δάλ είλαη κηα μη-SOAP CFC Αίηηζη, ζα
ηελ δξνκνινγήζεη ζηνλ δηαρεηξηζηή ζπκβάλησλ «onCFCRequest()», ν νπνίνο κε ηελ ζεηξά
ηνπ ζα ηελ δξνκνινγήζεη ζηελ θαηάιιειε απνκαθξπζκέλε δηεπαθή API (Remote API). Δάλ
είλαη κηα SOAP CFC Αίηηζη, επεηδή ην ColdFusion ιεηηνπξγεί πνιχ θαιά κε ην SOAP θαη
κάιηζηα ζην παξαζθήλην, φπσο γηα παξάδεηγκα ζηελ κεηαηξνπή ησλ παθέησλ SOAP ζε
«θαηαζθεπάζκαηα» ηνπ ColdFusion, δελ ζέινπκε λα παξέκβνπκε ζην έξγν ηνπ θαζψο
Σελίδα | 62
εθηειεί έλα κεγάιν κέξνο ηνπ θφξηνπ εξγαζίαο απηφκαηα γηα καο, επνκέλσο δελ ζα κπνχκε
ζην δξφκν ηνπ θαη ζα ην αθήζνπκε λα αλαιάβεη ηηο SOAP αηηήζεηο απφ κφλν ηνπ. Με απηήλ
ηελ ινγηθή, κηα SOAP CFC Αίηηζη δελ ζα δξνκνινγεζεί ζε θάπνηνλ απφ ηνπο δπν
πξναλαθεξζέληεο δηαρεηξηζηέο ζπκβάλησλ αιιά ζα «κηιάεη» απεπζείαο ζηηο απνκαθξπζκέλεο
δηεπαθέο API, κε ηελ βνήζεηα πάληα ηνπ ColdFusion.
Αλεμάξηεηα απφ ηελ πνξεία δξνκνιφγεζεο ηεο αίηεζεο, φιε ε πιεξνθνξία πνπ παξάγεηαη
θαηά ηελ απάληεζε ζα επηζηξαθεί ζηνλ Πειάηε. Δπνκέλσο, αλεμάξηεηε απφ ηνλ ηχπν ηεο
αίηεζεο θαη θαηά ζπλέπεηα θαη ηεο απάληεζεο, είηε είλαη κηα HTML απάληεζε, είηε είλαη κία
SOAP CFC Απάνηηζη, είηε είλαη κηα απάληεζε δεδνκέλσλ ζε κνξθή φπσο JSON ή απινχ
θεηκέλνπ, φιε ε πιεξνθνξία ηεο απάληεζεο ζα «εηζξεχζεη» πξνο ηνλ Πειάηε.
Σελίδα | 63
5
Υινπνίεζε
΢ε απηήλ ηελ ελφηεηα ζα αλαιπζνχλ ιεπηνκεξψο ζέκαηα πινπνίεζεο ηνπ ζπζηήκαηνο. Σα
ζέκαηα απηά αθνξνχλ ηερληθέο πνπ αθνινπζήζεθαλ θαη αμίδνπλ πξνζνρήο θαζψο θαη
θνκκάηηα θψδηθα πνπ παξνπζηάδνπλ ελδηαθέξνλ θαη άιια ηερληθά ζέκαηα.
5.1 Πιεπξά ηνπ Πειάηε
5.1.1 Απηό-εθηεινύκελα κπινθ ζπλαξηήζεσλ
Πξηλ πξνρσξήζνπκε πεξαηηέξσ ζηα ζέκαηα πινπνίεζεο ηνπ θψδηθα ηεο εθαξκνγήο, ζα
πξέπεη λα αλαιπζνχλ θάπνηεο ηερληθέο ηεο JavaScript νη νπνίεο ρξεζηκνπνηνχληαη επξέσο ζε
φιν ηνλ πξνγξακκαηηζκφ απηήο ηεο εθαξκνγήο. ΢ην Σσήμα 6.1 ππάξρεη ζηελ θνξπθή έλα
κπινθ θψδηθα. Μέζα ηνπ πεξηέρεηαη κηα ζπλάξηεζε, ελδηάκεζα ησλ παξελζέζεσλ, θαη
αθνινπζνχλ νη επφκελεο παξελζέζεηο («( param1, param2 )») νη νπνίεο νπζηαζηηθά
απνηεινχλ ηελ θιήζε ηεο ζπλάξηεζεο. Απηή ε δπλαηφηεηα πνπ πξνζθέξεη ε JavaScript
απνηειεί κηα εθπιεθηηθή ηερληθή ε νπνία πξνζθέξεη πνιιά πιενλεθηήκαηα αιιά ίζσο είλαη
θάπσο πεξίπινθε ζηελ θαηαλφεζε. Απηφ πνπ νπζηαζηηθά γίλεηαη, είλαη ε δεκηνπξγία κηα
απηφ-εθηεινχκελεο ζπλάξηεζεο. Έηζη έρνπκε κηα αλψλπκε ζπλάξηεζε, ηελ νπνία κε ην λα
ηελ πεξηθιείνπκε ζε παξελζέζεηο θαη λα πξνζζέηνπκε ηηο αθφινπζεο παξελζέζεηο, ζα
νδεγήζεη ζηελ άκεζε εθηέιεζε ηεο ζπλάξηεζεο.
Σελίδα | 64
Σσήμα 6.1 Η ηεσνική ηηρ αςηο-εκηελούμενηρ ζςνάπηηζηρ ζηην JavaScript
Με απηφλ ηξφπν, δεκηνπξγείηε κηα «θνχζθα» εθηέιεζεο, ε νπνία εθηειείηαη εληφο ελφο λένπ,
εηδηθά αθηεξσκέλνπ ζ’ απηήλ, πεδίνπ κλήκεο, γηα φινλ ηνλ θψδηθα πνπ εθηειείηαη εζσηεξηθά
απηήο ηεο ζπλάξηεζεο. Απηφ είλαη έλα πνιχ ηζρπξφ ραξαθηεξηζηηθφ, γηαηί νπζηαζηηθά απηφ
πνπ θάλεη είλαη λα δεκηνπξγεί κηα «αζπίδα» γηα ηελ ζπλάξηεζε, ε νπνία ηελ δηαρσξίδεη απφ
ηνλ εληαίν ρψξν ησλ κεηαβιεηψλ ζηελ κλήκε (global namespace) δειαδή ην «Παπάθςπο»
ηεο εθαξκνγήο. Σν «global namespace» δελ κπνξεί λα κπεη εληφο ηνπ πεδίνπ πνπ έρεη
δεκηνπξγεζεί γηα απηήλ ηελ «θνχζθα» εθηέιεζεο. Σν πιενλέθηεκα απηήο ηεο ηερληθήο είλαη
φηη απφ ηα εζσηεξηθφ ηεο «θνχζθαο» κπνξνχκε λα επηθνηλσλήζνπκε κε ην «global
namespace» εάλ ρξεηαζηεί. Απηή ε ηερληθή καο επηηξέπεη λα έρνπκε θνκκάηηα θψδηθα πνπ
Σελίδα | 65
δελ «γεκίδνπλ» ην «global namespace» κε ηπραίν θψδηθα, αιιά πνπ έρνπλ ηελ δπλαηφηεηα
λα επεξεάδνπλ ην «global namespace» εάλ απηφ είλαη απαξαίηεην.
Καηά ηελ εθηέιεζε απηήο ηεο ζπλάξηεζεο, κπνξνχλ λα εθηειεζηνχλ νη θαλνληθέο ιεηηνπξγίεο
κηα ζπλάξηεζεο. Μπνξνχκε λα «πεξάζνπκε» πιεξνθνξία κε ηελ κνξθή νξηζκάησλ
(param1, param2) κέζα ζηελ ζπλάξηεζε, φπσο επίζεο κπνξνχκε λα «επηζηξέςνπκε»
πιεξνθνξία απφ ηελ ζπλάξηεζε. Όπσο θαίλεηαη θαη ζην ηειεπηαίν ζθέινο ηνπ Σσήμαηορ
6.1, ηα νξίζκαηα «param1» θαη «param2» πεξλάλε κέζα ζηελ ζπλάξηεζε σο «arg1» θαη
«arg2». Δπίζεο, επηζηξέθεηαη ε ηηκή «value» ε νπνία «πεξλάεη» ζηελ κεηαβιεηή «value»
πνπ βξίζθεηαη έμσ απφ απηφ ην κπινθ θψδηθα.
΢ηελ ζπλέρεηα απηήο ηεο ελφηεηαο, θαη θαζψο ζα αλαιχεηαη ζπγθεθξηκέλνο θψδηθαο ηεο
εθαξκνγήο, ζα ππάξμνπλ παξαδείγκαηα θαη αλαθνξέο ζε απηήλ ηελ ηερληθή, γηα θαιχηεξε
θαηαλφεζε ηεο.
5.1.2 Τν «application.js» Δίλαη έλα Δξγνζηάζην Αληηθείκελσλ
Σν αξρείν «application.js», ην νπνίν είλαη ν ζθειεηφο «πιαηζίνπ» (core framework) ηεο
εθαξκνγήο ζηελ πιεπξά ηνπ Πειάηε, είλαη έλα «επγοζηάζιο ανηικειμένυν» (object
factory). Δμεγψληαο ηνλ φξν απηφ, ην αξρείν «application.js», είλαη ππεχζπλν γηα ηελ
δηαηήξεζε κηαο ζπιινγήο απφ «νξηζκνχο» θιάζεσλ (class definitions) θαη «παποςζίερ»
(instances) απφ «singletons» (Σν «singleton» είλαη έλα ζρεδηαζηηθφ πξφηππν, ην νπνίν
ρξεζηκνπνηείηαη γηα ηνλ πεξηνξηζκφ ηεο «ζπγθεθξηκελνπνίεζεο» (instantiation) κηαο θιάζεο
ζε έλα αληηθείκελν). Δίλαη επίζεο ππεχζπλν γηα ηελ δπλαηφηεηα πξνζζήθεο θαη αλάθηεζεο
ησλ ζηνηρείσλ απηήο ηεο ζπιινγήο. Με ιίγα ιφγηα ην «application.js» δηαρεηξίδεηαη ηελ
«ζπγθεθξηκελνπνίεζε» ησλ θιάζεσλ θαη ηελ απνζήθεπζε ησλ «singletons».
Φπζηθά, ην «application.js» δελ κπνξεί καγηθά λα ηα θάλεη φια απηά, ζα πξέπεη ινηπφλ λα
ηνπ δειψζνπκε ηηο θιάζεηο πνπ ρξεζηκνπνηνχκε ζηελ εθαξκνγή. Ο ηξφπνο πνπ
ρξεζηκνπνηείηαη γηα ηελ δήισζε απηψλ ησλ θιάζεσλ, είλαη κε ηελ ρξήζε ησλ ηξηψλ
αθφινπζσλ κεζφδσλ:

application.addController( instance );

application.addModel( instance | class );

application.addView(instance | class);
Όπσο είλαη θαλεξφ, θαη νη ηξεηο κέζνδνη θαινχληαη απφ ην «application». Όηαλ ην
«application.js» μεθηλάεη, δεκηνπξγεί κηα λέα «παξνπζία» (instance) ηνπ δηθνχ ηνπ
«πιαηζίνπ» (framework) θαη ηελ απνζεθεχζεη ζην «window.application». Δθφζνλ ην
«window» είλαη ην «global namespace» κπνξνχκε λα αλαθεξζνχκε ζε απηήλ ηελ παξνπζία
απιψο κε ηελ ρξήζε ηνπ «application.». Όηαλ θαινχληαη απηέο νη κέζνδνη, πξέπεη λα
πεξαζηεί σο φξηζκα είηε κηα θιάζε είηε κηα «παξνπζία». Όηαλ θαιείηαη ε κέζνδνο
Σελίδα | 66
«addController», φπνπ δειψλνπκε ηα κέξε ηεο εθαξκνγήο πνπ αληηζηνηρίδνπλ ηηο «αιιαγέοhash» ζηνπο «δηαρεηξηζηέο ζπκβάλησλ» (event handlers), πξέπεη λα πεξαζηεί σο φξηζκα κηα
«παξνπζία» ελφο Δλεγκηή (Controller). Γελ ππάξρεη λφεκα λα κηιάκε γηα ηελ έλλνηα
«θιάζε» γηα έλαλ Δλεγκηή, επεηδή νη Δλεγκηέρ πξέπεη λα ππάξρνπλ θαζ’ φιε ηελ δηάξθεηα
εθηέιεζεο ηεο εθαξκνγήο θαζψο αλά πάζα ζηηγκή κπνξεί λα γίλεη κηα «αιιαγή-hash» θαη λα
πξέπεη λα εηδνπνηεζεί ν θαηάιιεινο «δηαρεηξηζηήο ζπκβάληνο». Οπφηε φηαλ αλαθεξφκαζηε
ζε Δλεγκηέρ ηεο εθαξκνγήο, ελλννχκε πάληα «παξνπζίεο» απηψλ ησλ Δλεγκηών, ή κπνξνχλ
λα ζεσξεζνχλ θαη σο «singleton» ηεο εθαξκνγήο, δειαδή «παξνπζίεο» νη νπνίεο ππάξρνπλ
γηα φιε ηελ δηάξθεηα ηεο εθαξκνγήο.
Όηαλ πξφθεηηαη γηα πξνζζήθε Μονηέλυν ή Πποβολών ζηελ εθαξκνγή, απηή κπνξεί λα
αλαθέξεηαη θαη ζε «παξνπζία» αιιά θαη ζε θιάζε. Δάλ πξνζηεζεί κηα «παξνπζία» κηαο
θιάζεο Μονηέλος ή σο Πποβολήρ, ην «application.js» ζα ην ζεσξήζεη σο έλα «singleton»
θαη ζα ην απνζεθεχζεη ζηελ κλήκε (cache) σο έλα «singleton». Δάλ φκσο πξνζηεζεί σο
νξηζκφο θιάζεο, ην «application.js» ζα «θαηαιάβεη» φηη πξφθεηηαη γηα κία «παξνδηθή
θιάζε» (transient class) θαη φηαλ αξγφηεξα δεηεζεί, ε εθαξκνγή ζα μέξεη φηη πξέπεη λα ηελ
«ζπγθεθξηκελνπνηήζεη» πξψηα θαη κεηά λα ηελ επηζηξέςεη, δηφηη πξέπεη λα δεκηνπξγεζεί κηα
«παξνπζία» ηεο θιάζεηο πξνηνχ ρξεζηκνπνηεζεί.
Γηα ηελ ζπιινγή πιεξνθνξίαο, δειαδή γηα ηελ ζπιινγή ησλ Μονηέλυν θαη ησλ Πποβολών
ηεο εθαξκνγήο, ρξεζηκνπνηνχληαη δπν κέζνδνη:

application.getModel( className [, [ arguments ] ] );

application.getView( className [, [ arguments ] ] );
Γελ ππάξρεη έλλνηα κηαο κεζφδνπ «getController», θαζψο ν Δλεγκηήρ δνπιεχεη άκεζα κε
ηελ εθαξκνγή νπφηε δελ ππάξρεη λφεκα ζην λα ζπιιέμνπκε θάηη απφ απηφλ. Όκσο ηα
Μονηέλα θαη ηηο Πποβολέρ ρξεηάδεηαη λα έρνπκε ηελ δπλαηφηεηα λα ηα/ηηο ζπιιέμνπκε.
Όηαλ θαιείηαη κηα απφ ηηο δχν παξαπάλσ κεζφδνπο, πξέπεη λα νξίδεηαη έλα φλνκα θιάζεο
(className), δειαδή κηα ζπκβνινζεηξά θεηκέλνπ κε ην φλνκα ηεο θιάζεο, θαη αλάινγα κε
ηνλ ηχπν πνπ απηέο νη Πποβολέρ/Μονηέλα έρνπλ δεισζεί, ζα καο επηζηξαθεί είηε κηα
«παξνπζία» «singleton» πνπ έρεη απνζεθεπηεί ζηελ κλήκε (cached) ή κηα λέα «παξνπζία»
κηαο «παξνδηθήο θιάζεο». Δάλ ζαλ φξηζκα ζηηο κεζφδνπο πξνζζήθεο έρεη δεισζεί κηα
θιάζε, θαη ζειήζνπκε λα ηελ ζπιιέμνπκε, ην «application.js» ζα «θαηαιάβεη» φηη πξφθεηηαη
γηα κηα «παξνδηθή παξνπζία» (transient instance) θαη ζα καο επηηξέςεη λα πεξάζνπκε έλα
δεχηεξν φξηζκα, ην νπνίν ζα είλαη κηα ζεηξά (array) απφ «νξίζκαηα θαηαζθεπαζηέο»
(constructor
arguments)
ηα νπνία ζα ρξεηαζηνχκε
γηα απηήλ
ηελ
«παξνδηθή
ζπγθεθξηκελνπνίεζε». Γηα θαιχηεξε θαηαλφεζε, ην ζέκα ζα αλαθεξζεί μαλά φηαλ
πεξάζνπκε ζην θψδηθα ηεο εθαξκνγήο.
Σελίδα | 67
5.1.3 Πξνζζήθε Διεγθηώλ
window.application.addController((function( $, application ){
function Controller(){
this.route( "/", this.index );
this.route( "/contacts/edit/:id", this.editContact );
};
Controller.prototype = new application.Controller();
Controller.prototype.init = function(){
// ...
};
Controller.prototype.editContact = function( event, id){
// ...
};
Controller.prototype.index = function( event ){
// ...
};
// ------------------------------------------------- //
// ------------------------------------------------- //
return( new Controller() );
})( jQuery, window.application ));
Όπσο αλαθέξζεθε θαη παξαπάλσ, φηαλ πξνζζέηνπκε έλα Δλεγκηή, ρξεζηκνπνηνχκε ηελ
κέζνδν «application.addController» φπσο θαίλεηαη θαη ζηνλ παξαπάλσ θψδηθα. Όιν ην
παξαπάλσ κπινθ θψδηθα, εθηειείηαη σο έλα απηφ-εθηεινχκελν κπινθ θψδηθα, φπσο
αλαθέξζεθε θαη παξαπάλσ. Όπσο θαίλεηαη θαη ζηνλ θψδηθα, έρνπκε κηα αλψλπκε ζπλάξηεζε
ε νπνία απηφ-εθηειείηαη ζην ηέινο ηνπ κπινθ φπνπ δειψλνληαη δχν νξίζκαηα, ην έλα είλαη ε
βηβιηνζήθε jQuery θαη ην άιιν είλαη ην «window.application». ΢ην επάλσ κέξνο φπνπ
νξίδεηαη ε αλψλπκε ζπλάξηεζε δειψλνληαη σο παξάκεηξνη ην «$» θαη ην «application». Με
απηφλ ηνλ ηξφπν νπζηαζηηθά θαηαθέξλνπκε δπν πξάγκαηα, ην έλα είλαη φηη φιε απηή ε
αλψλπκε ζπλάξηεζε παθεηάξεηαη ζε κηα δηθή ηεο «θνχζθα» κλήκεο, θαη ην δεχηεξν είλαη φηη
αληηζηνηρίδνπκε ην jQuery κε ην «$». Σν πξψην εμεγήζεθε παξαπάλσ γηαηί είλαη ζεκαληηθφ.
Σν δεχηεξν ζεκαίλεη φηη κε ηνλ ηξφπν πνπ ζα εθηειεζηεί απηφο ν θψδηθαο, αλεμάξηεηα κε ην
εάλ ε γεληθή εθαξκνγή έρεη ελζσκαησκέλε ππνζηήξημε γηα ην jQuery ή φρη, ν θψδηθαο κέζα
ζε απηφ ην κπινθ κπνξεί λα ρξεζηκνπνηεί ην «$» γηα λα αλαθέξεηαη ζην jQuery.
Μέζα ζην κπινθ θψδηθα ηεο ζπλάξηεζεο, νξίδνπκε ηελ θιάζε ηνπ Δλεγκηή. Ο Δλεγκηήρ
εδψ νλνκάδεηαη απιά «Controller». Πξνο ην ηέινο ηνπ θψδηθα επηζηξέθεηαη απηφ πνπ ζα
νξηζηεί σο φξηζκα γηα ηελ κέζνδν «addController» πνπ έρνπκε ζηελ αξρή. Σν φξηζκα απηφ
είλαη κηα λέα «παξνπζία» ηνπ Δλεγκηή «Controller» πνπ θαηαζθεπάζακε κε απηήλ ηελ
ζπλάξηεζε. Γειαδή κε ιίγα ιφγηα, δεκηνπξγνχκε κηα λέα θιάζε Δλεγκηή κέζα ζηελ απηφεθηεινχκελε ζπλάξηεζε θαη ηελ πξνζδίδνπκε απεπζείαο σο κηα λέα «παξνπζία» Δλεγκηή κε
ηελ ρξήζε ηεο κεζφδνπ «addController». Σν πην ζεκαληηθφ εδψ είλαη ην γεγνλφο φηη, επεηδή
φιν απηφ ην κπινθ θψδηθα εθηειείηαη εληφο ελφο δηθνχ ηνπ πεδίνπ κλήκεο, δελ ρξεηάδεηαη λα
Σελίδα | 68
αλεζπρνχκε γηα ην εάλ ην φλνκα «Controller» πνπ δψζακε ζηνλ Δλεγκηή καο ζπγθξνχεηαη
κε θάπνην άιιν ίδην φλνκα ζηελ ππφινηπε εθαξκνγή, επεηδή ην κπινθ απηφ δελ έρεη ζρέζε κε
ην πεδίν κλήκεο ηνπ «global namespace». Σν «Controller» δειαδή γίλεηαη κηα ηδησηηθή
κεηαβιεηή, κέζα ζηελ «θνχζθα» κλήκεο ηεο ζπλάξηεζήο καο. Απηφ ην γεγνλφο είλαη
ζεκαληηθφ γηα κηα γιψζζα φπσο ε JavaScript, ε νπνία εθηειείηαη ρσξίο λα
«κεηαγισηηίδεηαη» (compiled) πξνεγνπκέλσο. Ζ JavaScript εθηειείηαη θάησ απφ ην ίδην
«παπάθςπο», θαη επνκέλσλ, αθφκε θαη αλ είρακε ηα αξρεία κε ηνλ θψδηθα ηεο ζε
δηαθνξεηηθά ζεκεία, εάλ είρακε θνηλά νλφκαηα κεηαβιεηψλ κεηαμχ ησλ αξρείσλ, ζα είρακε
ζίγνπξα ζπγθξνχζεηο ησλ νλνκάησλ (name conflicts).
Οη θαηαζθεπή ησλ Δλεγκηών είλαη θάπσο εηδηθή πεξίπησζε, επεηδή πξέπεη λα «επεθηείλνπλ»
κηα έθδνζε ηνπ «application.Controller», κηαο θιάζεο ηνπ «application.js» γηα ηνπο
Δλεγκηέρ, ρξεζηκνπνηψληαο ηελ κέζνδν «prototype». Ζ επέθηαζε «prototype» εδψ είλαη
θάηη ζαλ ηελ «class» επέθηαζε, νπφηε κπνξνχκε λα ζεσξήζνπκε ηελ θιάζε
«application.Controller» θαηά θάπνην ηξφπν σο ηελ ππεξθιάζε ηεο θιάζεο ηνπ Δλεγκηή
πνπ νξίδνπκε ζε απηφ ην κπινθ. Ζ επέθηαζε απηή απαηηείηαη γηαηί καο δίλεη πξφζβαζε ζηελ
κέζνδν «this.route» πνπ ρξεζηκνπνηνχκε. Ζ κέζνδνο «this.route» είλαη απηή πνπ καο
βνεζάεη λα αληηζηνηρίδνπκε «αιιαγέο-hash» κε ηνπο θαηάιιεινπο δηαρεηξηζηέο ζπκβάλησλ,
φπσο ζηελ πεξίπησζε απηή, φπνπ αληηζηνηρίδνπκε ηελ ηηκή «/contacts/edit/:id» ηεο
«αιιαγήο-hash» κε ηνλ δηαρεηξηζηή ζπκβάληνο «this.editContact».
Όια ηα «εμαξηήκαηα» (components) εληφο ηεο εθαξκνγήο, είηε απηά είλαη Δλεγκηέρ, είηε
είλαη Πποβολέρ ή Μονηέλα, έρνπλ κηα κέζνδν «.init», θαη ε δηαθνξά κεηαμχ απηήο ηεο
κεζφδνπ θαη ηεο κεζφδνπ θαηαζθεπαζηή (constructor method) είλαη φηη ε κέζνδνο «.init»
θαιείηαη φηαλ ε εθαξκνγή μεθηλάεη. ΢χκθσλα κε ηελ αξρηηεθηνληθή πνπ έρεη θαηαζθεπαζηεί
ε εθαξκνγή, ε θιήζε ηνπ θαηαζθεπαζηή ζε απηφ ην κπινθ θψδηθα γίλεηαη ζην ηέινο, κε ηελ
«return( new Controller() );». ΢ε εθείλν ην ζεκείν φκσο, δελ γλσξίδνπκε θαη πνιιά γηα ηελ
θαηάζηαζε πνπ βξίζθεηαη ε εθαξκνγή. Δίλαη ην κνληέιν DOM έηνηκν; Έρνπλ πξνζηεζεί ηα
άιια «εμαξηήκαηα» (Πποβολέρ, Μονηέλα) ζηελ εθαξκνγή; Γελ γλσξίδνπκε αλ φια απηά
έρνπλ γίλεη, επεηδή ε εθαξκνγή βξίζθεηαη ζηελ θάζε εθθίλεζεο. Ζ κέζνδνο θαηαζθεπαζηήο
φκσο ζα εθηειεζηεί ακέζσο νπφηε ζα ππάξμεη πξφβιεκα. Απηφ ην πξφβιεκα ιχλεη ε κέζνδνο
«init» ε νπνία θαιείηαη λα εθηειεζηεί κφιηο ε εθαξκνγή έρεη ηειεηψζεη ηελ αξρηθή εθθίλεζε.
΢ε εθείλν ην ζεκείν γλσξίδνπκε φηη ην κνληέιν DOM έρεη δεκηνπξγεζεί θαη είλαη έηνηκν
πξνο αιιειεπίδξαζε, φπσο επίζεο γλσξίδνπκε φηη φια ηα «εμαξηήκαηα» (Δλεγκηέρ,
Μονηέλα, Πποβολέρ) έρνπλ πξνζηεζεί ζην ζχζηεκα. Οπφηε ε κέζνδνο «init» κπνξεί λα
ζεσξεζεί σο κηα δεχηεξε θάζε θφξησζεο ηεο εθαξκνγήο. Απηή ε κέζνδνο δελ απαηηείηαη θαη
ζα εθηειεζηεί κφλν εάλ ππάξρεη εληφο ηεο θιάζεο.
Σελίδα | 69
5.1.3.1 Πωο ιεηηνπξγεί ε δξνκνιόγεζε
Ζ κέζνδνο «this.route» δέρεηαη δχν νξίζκαηα, ην έλα είλαη ε ηηκήο ηεο «αιιαγήο-hash» θαη
ην άιιν είλαη ν εζσηεξηθφο δηαρεηξηζηήο ζπκβάληνο ν νπνίνο αληηζηνηρίδεηαη κε απηήλ ηελ
«αιιαγή-hash». Οπφηε ζην παξαπάλσ παξάδεηγκα θψδηθα, θαηά ηελ πξψηε θιήζε ηεο
κεζφδνπ «this.route», ε ηηκή «/» ηεο «αιιαγήο-hash» αληηζηνηρίδεηαη κε ηνλ δηαρεηξηζηή
ζπκβάληνο «this.index» ν νπνίνο νξίδεηαη παξαθάησ ζηελ θιάζε καο. Ο «this.index» ινηπφλ
είλαη απιά κηα κέζνδνο ηεο θιάζεο καο, ε νπνία δέρεηαη ζαλ φξηζκα ην πεξηερφκελν ηνπ
ζπκβάληνο (event). ΢ηελ δεχηεξε θιήζε ηεο κεζφδνπ «this.route», ε ηηκή ηεο «αιιαγήοhash» είλαη «/contacts/edit/:id». Σν «:id» ζε απηήλ ηελ πεξίπησζε, ην νπνίν είλαη ν αξηζκφο
αλαγλσξηζηηθφ (id number) ηεο δεδνκέλεο επαθήο, έρεη κπξνζηά ηνπ ηνλ ραξαθηήξα «:», θαη
κε απηφλ ηνλ ηξφπν γίλεηαη έλα είδνο κεηαβιεηήο ηεο δηεχζπλζεο URL, ε νπνία παίξλεη ηελ
ηηκή ηνπ αλαγλσξηζηηθνχ αξηζκνχ ηεο εθάζηνηε επαθήο. Έηζη ην «:id» κπνξεί λα είλαη «3»,
«123» ή φηη αξηζκφο έρεη αληηζηνηρηζηεί κε ηελ επαθή πνπ αιιειεπηδξά ε εθαξκνγή θάζε
δεδνκέλε ζηηγκή (εάλ θαη εθφζνλ, αιιειεπηδξά κε θάπνηα). Δπνκέλσο ην «:id» γίλεηαη απφ
κεηαβιεηή ηεο δηεχζπλζεο URL ζε κεηαβιεηή ηεο εθαξκνγήο. Όπνηα ινηπφλ «αιιαγή-hash»
ηαηξηάμεη κε ην πξφηππν «/contacts/edit/:id» (π.ρ. ε «/contacts/edit/234») ζα σζήζεη ηελ
κέζνδν «this.route» λα θαιέζεη ηνλ δηαρεηξηζηή ζπκβάλησλ «this.editContact», ν νπνίνο κε
ηελ ζεηξά ηνπ είλαη επίζεο κηα κέζνδνο ηεο θιάζεο καο θαη νξίδεηαη παξαθάησ ζηνλ θψδηθα
ηνπ κπινθ παξφκνηα κε ηελ «this.index». ΢ε απηήλ ηελ πεξίπησζε φκσο, ε κέζνδνο
«this.editContact» παίξλεη θαη έλα δεχηεξν φξηζκα, πνπ δελ είλαη άιιν απφ ηελ κεηαβιεηή
«id». Φπζηθά ε κεηαβιεηή «id» είλαη ήδε κέξνο ηνπ πεξηερνκέλνπ ηνπ ζπκβάληνο σο κέξνο
ηεο δηεχζπλζεο URL, φκσο γηα επθνιία ρξήζεο νξίδεηαη ζαλ μερσξηζηφ φξηζκα.
5.1.4 Πξνζζήθε Μνληέισλ (θαη Πξνβνιώλ)
window.application.addModel((function( $, application ){
function Controller(){
// ...
};
Controller.prototype = new application.Controller();
MyClass.prototype.init = function(){
// ...
};
// ------------------------------------------------- //
// ------------------------------------------------- //
return( new MyClass() ); // or return( MyClass );
})( jQuery, window.application ));
Ζ πξνζζήθε ελφο Μονηέλος ή κηαο Πποβολήρ είλαη πνιχ παξφκνηα κε απηή ελφο Δλεγκηή.
Αληί λα θαιείηαη ε κέζνδνο «.addController» θαινχληαη νη κέζνδνη «.addModel» ή
«.addView», αλάινγα ηελ πεξίπησζε. Γεληθά, ην κπινθ απηνχ ηνπ θψδηθα εθηειείηαη κε ηνλ
Σελίδα | 70
ίδην ηξφπν (δειαδή ηεο απηφ-εθηεινχκελεο «θνχζθαο») θαη έρεη ηα ίδηα ραξαθηεξηζηηθά κε
ηελ πεξίπησζε ηεο πξνζζήθεο ηνπ Δλεγκηή πνπ αλαιχζακε πξνεγνπκέλσο. Ζ θιάζε καο
νξίδεηαη θαη εδψ κε ηελ ίδηα κεζνδνινγία. Ζ δηαθνξά είλαη φηη ζηελ πεξίπησζε ησλ
Μονηέλυν θαη ησλ Πποβολών, ππάξρεη ε δπλαηφηεηα εθηφο απφ ηελ επηζηξνθή κηα λέαο
«παξνπζίαο» ηεο θιάζεο («return( new MyClass() );») δειαδή ελφο «singleton», θαη ε
δπλαηφηεηα επηζηξνθήο ελφο νξηζκνχ θιάζεο («class definition)(«return( MyClass );») γηα
«παξνδηθά αληηθείκελα» (transient objects).
5.1.5 Η θεληξηθή ζειίδα «index.html»
Έρνληαο αλαιχζεη ηηο ηερληθέο ζπγγξαθήο ηνπ θψδηθα θαη ηηο βαζηθέο κεζφδνπο κε ηελ ρξήζε
ηνπο, κπνξνχκε λα πεξάζνπκε ζε ελδεηθηηθά απνζπάζκαηα θψδηθα ηεο εθαξκνγήο. Ζ
θεληξηθή ζειίδα ηεο εθαξκνγήο είλαη ε «index.html» θαη θαζψο πξφθεηηαη γηα κία
«μονοζέλιδη» εθαξκνγή, ε ζειίδα «index.html» νπζηαζηηθά είναι ε εθαξκνγή. Οιφθιεξνο
ν θψδηθαο ηεο ζειίδαο θαίλεηαη ζηηο επφκελεο ζειίδεο. Αθήλνληαο ηηο δειψζεηο ησλ
«scripts», ζηηο νπνίεο ζα αλαθεξζνχκε αξγφηεξα, θαη βιέπνληαο ην θεληξηθφ ζψκα ηνπ
θψδηθα, παξαηεξνχκε φηη πξφθεηηαη γηα έλα ζρεηηθά απιφ θνκκάηη θψδηθα ην νπνίν
νπζηαζηηθά απαξηίδεηαη απφ εηηθέηεο «<div>» νη νπνίεο εζσθιείνπλ ιίζηεο, θφξκεο, πίλαθεο
θαη άιια γλσζηά ζηνηρεία ηεο HTML γιψζζαο . Τπάξρεη ζηελ αξρή ηνπ θψδηθα ην θεθάιη
ηεο ζειίδαο, κε ην ινγφηππν θαη ηελ θφθθηλε εηδνπνίεζε «Φόπηυζη…». Απηή ε εηδνπνίεζε
είλαη κηα AJAX εηδνπνίεζε, ε νπνία εκθαλίδεηαη θάζε θνξά πνπ έρνπκε κηα AJAX
επηθνηλσλία ζε εμέιημε ζην παξαζθήλην. ΢ηελ ζπλέρεηα έρνπκε ην θπξίσο ζψκα ηεο
εθαξκνγήο, ην νπνίν εζσηεξηθά είλαη κνηξαζκέλν ζε δχν «διαηάξειρ» (layouts).
Ζ κία «δηάηαμε» απνηειεί ηελ ιίζηα επαθψλ («contact-list-layout») ε νπνία απνηειείηαη απφ
ηελ θφξκα αλαδήηεζεο ζηελ θνξπθή, ηελ ζχλδεζε «λέαεπαθή» θαη θπζηθά ηελ ιίζηα κε ηηο
επαθέο («<ul id="contact-list">») ε νπνία φκσο είλαη αξρηθά άδεηα θαη πξφθεηηαη λα
«γεκίζεη» δπλακηθά κε ηελ εθθίλεζε ηεο εθαξκνγήο. Κάησ απφ ηελ ιίζηα έρνπκε έλα
«πξφηππν» γηα ηα αληηθείκελα ηεο ιίζηαο («contact-list-item-template») ην νπνίν είλαη κηα
εηηθέηα «script» πνπ κέζα ηεο πεξηέρεη ζηνηρεία ιίζηαο ηα νπνία πξφθεηηαη θαη απηά λα
δεκηνπξγεζνχλ απφ ην «πιαίζην» ηεο εθαξκνγήο, βάζε ησλ δεδνκέλσλ πνπ ζα αλαθηψληαη
απφ
ηνλ
Γηαθνκηζηή.
Βιέπνπκε
φηη
ν
ηχπνο
ηεο
εηηθέηαο
«script»
είλαη
«type="application/template"» θαη φηη ηα ζηνηρεία ηηο ιίζηαο απνηεινχληαη απφ ην «$» θαη
εληφο ησλ αγθχισλ ην φλνκα ηεο ηδηφηεηαο (δειαδή name, phone θαη email).
Σελίδα | 71
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Έξςπνερ Επαθέρ</title>
<link rel="stylesheet" type="text/css"
href="./linked/css/reset.css"></link>
<link rel="stylesheet" type="text/css"
href="./linked/css/standard.css"></link>
<script type="text/javascript" src="./linked/js/app/jquery1.4.2.min.js"></script>
<script type="text/javascript"
src="./linked/js/app/application.js"></script>
<!--- Controllers. --->
<script type="text/javascript"
src="./linked/js/controller/contacts.js"></script>
<!--- Model. --->
<script type="text/javascript"
src="./linked/js/model/contact_service.js"></script>
<script type="text/javascript"
src="./linked/js/model/contact.js"></script>
<!--- View. --->
<script type="text/javascript"
src="./linked/js/view/ajax_notification.js"></script>
<script type="text/javascript"
src="./linked/js/view/contact_list.js"></script>
<script type="text/javascript"
src="./linked/js/view/contact_form.js"></script>
<script type="text/javascript"
src="./linked/js/view/scrolltopcontrol.js"></script>
</head>
<body>
<!-- BEGIN: Site Wrapper. -->
<div id="site-wrapper">
<!-- BEGIN: Site Header. -->
<div id="site-header" href="#top">
<a id="site-logo" href="#/">Έξςπνερ Επαθέρ</a>
<div id="ajax-load-notification">Φόπηωζη...</div>
</div>
<!-- END: Site Header. -->
<!-- BEGIN: Site Body. -->
<div id="site-body">
<!-- BEGIN: Content Layouts. -->
<ul id="content-layouts">
<!-- BEGIN: Content Layout. -->
<li id="contact-list-layout" class="contentlayout" style="display: none ;">
<div id="contact-list-header" class="contentheader">
<form>
<label>αναζήηηζη:</label>
<input type="text" />
</form>
<a href="#/contacts/add/">
<span
class="contrast">νέα</span>επαθή &raquo;
</a>
</div>
Σελίδα | 72
<div id="contact-list-body" class="contentbody">
<ul id="contact-list">
<!-- To be filled dynamically. -->
</ul>
</div>
<!-- BEGIN: Templates. -->
<script id="contact-list-item-template"
type="application/template">
<li class="contact clear-fix">
<div class="summary">
<a class="name">${name}</a>
</div>
<div class="actions">
<a href="javascript:void( 0 )"
class="more">πεπιζζ.</a> &nbsp;|&nbsp;
<a href="#/contacts/edit/${id}"
class="edit">επεξ.</a> &nbsp;|&nbsp;
<a href="#/contacts/delete/${id}"
class="delete">διαγπαθή</a>
</div>
<dl class="details clear-fix">
<dt>
όνομα:
</dt>
<dd>
${name}
</dd>
<dt>
ηηλ.:
</dt>
<dd>
${phone}
</dd>
<dt>
email:
</dt>
<dd>
${email}
</dd>
</dl>
</li>
</script>
<!-- END: Template. -->
</li>
<!-- END: Content Layout. -->
<!-- BEGIN: Content Layout. -->
<li id="contact-edit-layout" class="contentlayout" style="display: none ;">
<div id="contact-edit-header" class="contentheader">
<a href="#/">&laquo; πίζω</a>
</div>
<div id="contact-edit-body" class="contentbody">
<form id="contact-form">
<input type="hidden" name="id"
value="0" />
Σελίδα | 73
<ul class="errors">
<!-- To be populated later. -->
</ul>
<div class="entry">
<label>
Όνομα:
</label>
<input type="text" name="name" />
</div>
<div class="entry">
<label>
Τηλέθωνο:
</label>
<input type="text" name="phone"
/>
</div>
<div class="entry">
<label>
Email:
</label>
<input type="text" name="email"
/>
</div>
<div class="actions">
<button type="submit">Αποθήκεςζη
&amp; Κλείζιμο</button>
( <a href="#/contacts"
class="cancel">Ακύπωζη</a> )
</div>
</form>
</div>
</li>
<!-- END: Content Layout. -->
</ul>
<!-- END: Content Layouts. -->
</div>
<!-- END: Site Body. -->
<!-- BEGIN: Site Footer. -->
<div id="site-footer">
<div id="site-copyright">
<a href="" target="_blank">Τςμπακιανάκηρ
Απόζηολορ</a> 2010
</div>
</div>
<!-- END: Site Footer. -->
</div>
<!-- END: Site Wrapper. -->
</body>
</html>
Ζ δεχηεξε δηάηαμε είλαη ε δηάηαμε ηεο θφξκαο επεμεξγαζίαο-δεκηνπξγίαο επαθψλ («contactedit-layout»). Όπσο έρεη αλαθεξζεί θαη ζε πξνεγνχκελε ελφηεηα, ε θφξκα δεκηνπξγίαο θαη ε
θφξκα επεμεξγαζίαο επαθήο είλαη νπζηαζηηθά ε ίδηα θφξκα, ε νπνία είλαη άδεηα φηαλ
πξνζζέηνπκε θαη είλαη «γεκάηε» κε ηα ζηνηρεία ηεο επαθήο φηαλ επεμεξγαδφκαζηε. Δίλαη κηα
απιή δνκή θφξκαο κε ιίζηεο θαη άιια γλσζηά ζηνηρεία ηεο HTML.
Σελίδα | 74
Οπζηαζηηθά απηή είλαη ε θεληξηθή ζειίδα, δελ πξφθεηηαη γηα κηα πεξίπινθε ζειίδα, είλαη
πνιχ απιή ε δνκή θαη ηα ζηνηρεία ηεο, θαζψο ηελ θχξηα δνπιεία ζηελ εθαξκνγή ηελ θάλεη ν
θψδηθαο ηεο JavaScript θαη θαη’ επέθηαζε ε βηβιηνζήθε jQuery. Βιέπνληαο ινηπφλ ηηο
δειψζεηο ζηελ αξρή ηνπ θψδηθα, βιέπνπκε φηη δειψλνληαη ρσξηζηά ηα «scripts» γηα ηνπο
Δλεγκηέρ (controllers) γηα ηα Μονηέλα (Models) θαη ηηο Πποβολέρ (Views). Απηφ έγηλε γηα
επθνιία θαηαλφεζεο θαη γηα επθνιία αλάπηπμεο θαη απνζθαικάησζεο ησλ επηκέξνπο κειψλ
ηεο εθαξκνγήο. ΢ε πξαγκαηηθά πεξηβάιινληα αλάπηπμεο, έλαο πξνγξακκαηηζηήο πξέπεη λα
ζπγρσλεχζεη απηά ηα «scripts» ζε φζα ιηγφηεξα γίλεηαη, έηζη ψζηε λα κεησζνχλ νη αηηήζεηο
αξρείσλ θαη επνκέλσο ν θφξηνο εξγαζίαο πξνο ηνλ Γηαθνκηζηή. Οη δειψζεηο μεθηλάλε κε ηα
αξρεία θχιισλ ζηπι «CSS» ηα νπνία αλαιακβάλνπλ ζρεδφλ εμ’ νινθιήξνπ ηελ αηζζεηηθή
εκθάληζε ηεο εθαξκνγήο γεληθφηεξα. ΢ηελ ζπλέρεηα δειψλνληαη ε βηβιηνζήθε jQuery θαζψο
θαη ην θεληξηθφ αξρείν ηεο εθαξκνγήο «application.js» ηα νπνία απνηεινχλ ηνλ ππξήλα ηεο
εθαξκνγήο. Έπεηηα δειψλνληαη νη Δλεγκηέρ, νη Πποβολέρ θαη ηα Μονηέλα ηεο εθαξκνγήο
θαη κε βάζε φζα έρνπκε δεη κέρξη ηψξα, θάζε έλα απφ απηά ηα αξρεία απνηειεί θαη κηα δηθή
ηνπ θιάζε, θαη φια έρνπλ ζπληαρηεί κε παξφκνην ηξφπν, ν νπνίνο πεξηγξάθεηαη ζηηο
πξνεγνχκελεο παξαγξάθνπο ηεο ελφηεηαο. ΢ηηο επφκελεο παξαγξάθνπο ζα πεξηγξαθηνχλ
ελδεηθηηθά θάπνηεο απφ απηέο ηηο θιάζεηο.
5.1.6 Τν Μνληέιν «contact.js»
window.application.addModel((function( $, application ){
function Contact( id, name, phone, email ){
this.id = (id || 0);
this.name = (name || "");
this.phone = (phone || "");
this.email = (email || "");
};
Contact.prototype.validate = function(){
return( [] );
};
// Return a new model class.
return( Contact );
})( jQuery, window.application ));
Ζ πεξηγξαθή ησλ θιάζεσλ μεθηλάεη απφ ην Μονηέλο, θαζψο έρεη ην κηθξφηεξν βαζκφ
αιιειεπίδξαζεο θαη έηζη είλαη πηζαλφηαηα ην πην απιφ θνκκάηη ηεο εθαξκνγήο. Αξρίδνπκε
κε ην αξρείν «contact.js» ην νπνίν είλαη θαη ην πην απιφ απφ ηα Μονηέλα. Ο θψδηθαο ηνπ
αξρείνπ θαίλεηαη παξαθάησ. Δδψ έρνπκε ηελ θιάζε «Contact» ε νπνία θαηαζθεπάδεηαη θαη
ζηελ ζπλέρεηα επηζηξέθεηαη σο φξηζκα ζηελ κέζνδν «application.addModel» κε ηνλ ηξφπν
πνπ πεξηγξάςακε ζε πξνεγνχκελε παξάγξαθν. Ζ θιάζε «Contact» είλαη κηα
αληηπξνζψπεπζε κηαο επαθήο ηνπ ζπζηήκαηνο, ε νπνία απνηειείηαη απφ ην αλαγλσξηζηηθφ
(id), ην φλνκα (name), ηνλ αξηζκφ ηειέθσλνπ (phone) θαη ηελ δηεχζπλζε ειεθηξνληθνχ
Σελίδα | 75
ηαρπδξνκείνπ (email) ηεο επαθήο. Γηα ιφγνπο απιφηεηαο δελ πεξηέρνληαη κέζνδνη γηα ηελ
πξφζβαζε θαη δηαρείξηζε απηψλ ησλ ηδηνηήησλ (properties), θαη έηζη γηα λα γίλεη απηφ ζα
πξέπεη λα θιεζεί κηα δεκφζηα ηδηφηεηα γηα ηελ επαθή. Ζ κέζνδνο «validate» ππάξρεη γηα ηελ
επηθχξσζε ηεο επαθήο, δελ ρξεζηκνπνηείηαη φκσο θαζψο ε επηθχξσζε γίλεηαη πάληα απφ ηελ
πιεπξά ηνπ Γηαθνκηζηή, θαζψο κε ηελ εμέιημε ηεο αλάπηπμεο ηεο εθαξκνγήο ν θχξηνο
θφξηνο απηψλ ησλ εξγαζηψλ κεηαθέξζεθε ζηνλ Γηαθνκηζηή. Έηζη γηα παξάδεηγκα φηαλ κηα
επαθή πξέπεη λα επηθπξσζεί γηα λα απνζεθεπηεί ζηελ ζπλέρεηα, απηή ηε ελέξγεηα
«απνζήθεπζεο» ζηέιλεηαη ζηνλ Γηαθνκηζηή, θαη απηφο αλαιακβάλεη ηελ επηθχξσζε ηεο
επαθήο θαη ζηελ ζπλέρεηα ηελ απνζήθεπζή ηεο.
Όπσο θαίλεηαη απφ ηελ επηζηξνθή ηεο ζπλάξηεζεο ζην ηέινο ηνπ θψδηθα, δελ επηζηξέθεηαη
κηα «παξνπζία» ηεο θιάζεο αιιά κία «παξνδηθή θιάζε» ηεο «Contact». Απηφ γίλεηαη επεηδή
ρξεηαδφκαζηε κηα «παξνπζία» ηεο θιάζεο γηα θάζε επαθή πνπ ππάξρεη, είηε απηέο είλαη
είθνζη ζηελ ιίζηα, είηε είλαη απιά κία ζηελ ιίζηα. Οπφηε κε ην λα «επηζηξέθεηαη» κφλν ην
φλνκα ηεο θιάζεο («return( Contact );») δειψλνπκε ζηελ εθαξκνγή πσο θάζε αθφινπζε
αίηεζε ηεο θιάζεο απηήο ζα απαηηεί «ζπγθεθξηκελνπνίεζε» κηα λέαο «παξνπζίαο» απηήο ηεο
«παξνδηθήο θιάζεο».
5.1.7 Τν Μνληέιν «contact_service.js»
Σν Μονηέλο «contact_service.js» είλαη ιίγν πην πεξίπινθν απφ ην πξνεγνχκελν Μονηέλο,
φκσο θηλείηαη ζηηο ίδηεο γεληθέο γξακκέο θαη αθνινπζεί ηηο ίδηεο ηαθηηθέο ζχληαμεο. Έρνπκε
ηελ κέζνδν «.addModel» ζηελ θνξπθή ε νπνία ζα δερηεί ζαλ φξηζκα ηελ θιάζε πνπ ζα
επηζηξέςεη ε απηφ-εθηεινχκελε ζπλάξηεζε. ΢ηελ αλάιπζε ηεο αξρηηεθηνληθήο ηεο πιεπξάο
ηνπ Πειάηε, αλαθέξζεθε φηη ην κφλν κέξνο ηεο πιεπξάο απηήο πνπ επηθνηλσλεί κε ηνλ
Γηαθνκηζηή είλαη ην Μονηέλο. Δδψ κπνξνχκε λα πνχκε θαη ζπγθεθξηκέλα, πσο ε θιάζε
«contact_service.js» είλαη ην κέξνο ηνπ Μονηέλος πνπ αλαιακβάλεη ηελ φπνηα επηθνηλσλία
απαηηείηαη κε ηελ πιεπξά ηνπ Γηαθνκηζηή.
Καηά θάπνηα έλλνηα, ην «contact_service.js» ζηελ πιεπξά ηνπ Πειάηε γίλεηαη έλα
αθεξεκέλν «ζηξψκα» δεδνκέλσλ (data abstraction layer) γηα ηελ ζπιινγή ησλ δεδνκέλσλ
ησλ επαθψλ θαη ηελ απνζήθεπζε ησλ δεδνκέλσλ απηψλ. Ωζηφζν, επεηδή δελ απνζεθεχνπκε
δεδνκέλα ζηελ πιεπξά ηνπ Πειάηε αιιά ηα απνζεθεχνπκε ζηελ πιεπξά ηνπ Γηαθνκηζηή,
απηή ε θιάζε νπζηαζηηθά ελεξγεί σο έλα «πεξηηχιηγκα» (wrapper) γηα ηεο θιήζεηο AJAX
πνπ ζα γίλνληαη πξνο ηνλ Γηαθνκηζηή γηα ηελ απνζήθεπζε θαη αλάθηεζε πιεξνθνξίαο.
Σελίδα | 76
window.application.addModel((function( $, application ){
function ContactService(){
// ...
};
ContactService.prototype.init = function(){
// ...
};
ContactService.prototype.deleteContact = function( id,
onSuccess, onError ){
var self = this;
application.ajax({
url: "api/Contacts.cfc",
data: {
method: "deleteContact",
id: id
},
normalizeJSON: true,
success: function( response ){
if (response.success){
onSuccess( id );
} else if (onError){
onError( respsonse.errors );
}
}
});
};
ContactService.prototype.getContact = function( id,
onSuccess, onError ){
var self = this;
application.ajax({
url: "api/Contacts.cfc",
data: {
method: "getContact",
id: id
},
normalizeJSON: true,
success: function( response ){
if (response.success){
onSuccess( self.populateContactsFromResponse(
response.data ) );
} else if (onError){
onError( respsonse.errors );
}
}
});
};
ContactService.prototype.getContacts = function( onSuccess,
onError ){
var self = this;
application.ajax({
url: "api/Contacts.cfc",
data: {
method: "getContacts"
},
normalizeJSON: true,
success: function( response ){
if (response.success){
onSuccess( self.populateContactsFromResponse(
response.data ) );
Σελίδα | 77
} else if (onError){
onError( respsonse.errors );
}
}
});
};
ContactService.prototype.populateContactsFromResponse =
function( responseData ){
if ($.isArray( responseData )){
var contacts = [];
$.each(
responseData,
function( index, contactData ){
contacts.push(
application.getModel( "Contact", [
contactData.id, contactData.name, contactData.phone,
contactData.email ] )
);
}
);
return( contacts );
} else {
return(
application.getModel( "Contact", [
responseData.id, responseData.name, responseData.phone,
responseData.email ] )
);
}
};
ContactService.prototype.saveContact = function( id, name,
phone, email, onSuccess, onError ){
var self = this;
application.ajax({
url: "api/Contacts.cfc",
data: {
method: "saveContact",
id: id,
name: name,
phone: phone,
email: email
},
normalizeJSON: true,
success: function( response ){
if (response.success){
onSuccess( response.data );
} else {
onError( response.errors );
}
}
});
};
return( new ContactService() );
})( jQuery, window.application ));
Όπσο θαη φιεο νη άιιεο θιάζεηο έρεη ηελ κέζνδν «init» γηα λα αξρηθνπνηείηαη φηαλ εθθηλεί ε
εθαξκνγή, αλ θαη ζε απηήλ ηελ πεξίπησζε δελ ρξεηάδεηαη λα γίλεη θάηη ηέηνην. ΢ηνλ ππφινηπν
θψδηθα ππάξρνπλ νη ηέζζεξηο κέζνδνη, «deleteContact», «getContact», «getContacts» θαη
«saveContact», νη νπνίεο πεξηιακβάλνπλ αληίζηνηρα ηέζζεξηο ζπλαξηήζεηο πνπ εθηεινχλ ηηο
Σελίδα | 78
θιήζεηο πξνο ηνλ Γηαθνκηζηή («application.ajax»). Όπσο δειψλνπλ θαη ηα νλφκαηα, νη
ηέζζεξηο απηέο κέζνδνη αλαιακβάλνπλ ηα εμήο:

deleteContact --> δηαγξαθή κηαο επαθήο

getContact

getContacts --> αλάθηεζε κηαο ιίζηαο απφ επαθέο

saveContact --> απνζήθεπζε κηαο λέαο ή ελεκέξσζε κηαο ππάξρνπζαο επαθήο
--> αλάθηεζε κηαο επαθήο
Απηέο νη κέζνδνη είλαη ν ππξήλαο ηεο επηθνηλσλίαο ηνπ Πειάηε κε ηνλ Γηαθνκηζηή, θαη φιεο
ιεηηνπξγνχλ κε παξφκνην ηξφπν. Γηα παξάδεηγκα ε κέζνδνο «deleteContact», παίξλεη αξρηθά
σο φξηζκα ην αλαγλσξηζηηθφ (id) ηεο επαθήο πνπ ηεο δεηείηαη λα δηαγξάςεη. Δπεηδή ην
αθεξεκέλν ζηξψκα δεδνκέλσλ απαηηεί ηελ επηθνηλσλία κε ηνλ Γηαθνκηζηή κέζσ AJAX,
δειαδή κε αζχγρξνλν ηξφπν, δελ κπνξνχκε απιά λα επηζηξέςνπκε πιεξνθνξία απφ απηήλ
ηελ κέζνδν γηαηί δελ έρνπκε ακέζσο απηήλ ηελ πιεξνθνξία. Δμεγψληαο, ιφγσ ηεο
αζχγρξνλεο θχζεο ηεο επηθνηλσλίαο, ε θάζε κέζνδνο πνπ ρξεζηκνπνηεί θιήζεηο AJAX κεηά
ηελ εθηέιεζή ηεο δελ ζηακαηάεη ηελ ζπλνιηθή εθηέιεζε ηεο εθαξκνγήο αιιά πεξηκέλεη ζην
παξαζθήλην ηελ απάληεζε ησλ δεδνκέλσλ πνπ αηηείηαη. Τπάξρεη ινηπφλ ε πεξίπησζε απηή ε
κέζνδνο λα ηειεηψζεη ηελ εθηέιεζή ηεο, πξηλ θαλ είλαη δηαζέζηκα ηα δεηνχκελα δεδνκέλα. Γη
απηνχο ηνπο παξαπάλσ ιφγνπο, φηαλ εθηειείηαη κηα ηέηνηνπ είδνπο κέζνδνο, δελ δέρεηαη ζαλ
νξίζκαηα κφλν ηα δεδνκέλα πνπ ρξεηάδεηαη γηα ηελ εξγαζία πνπ θαιείηαη λα εθηειέζεη
(δειαδή ζηελ πεξίπησζή απηή ην «id») αιιά δέρεηαη άιια δχν επηπιένλ νξίζκαηα,
«onSuccess» θαη «onError», δειαδή ηηο επαλαθιήζεηο (callbacks) γηα ηελ πεξίπησζε
επηηπρήο εθηέιεζεο ηεο ελέξγεηαο (π.ρ. ηελ επηηπρή δηαγξαθή ηεο επαθήο) ή ηεο κε επηηπρήο
εθηέιεζεο εμ’ αηηίαο θάπνηνπ ιάζνπο.
Πξνρσξψληαο ζηνλ θψδηθα ηεο «deleteContact» βιέπνπκε ηελ κέζνδν «application.ajax» ε
νπνία νπζηαζηηθά δίλεη εληνιή ζηελ κέζνδν «ajax» ηεο βηβιηνζήθεο ηνπ jQuery λα
εθηειεζηεί. Ζ κέζνδνο απηή θάλεη κηα θιήζε γηα ηελ απνκαθξπζκέλε δηεπαθή API («url:
"api/Contacts.cfc"») πνπ ζα εθηειέζεη ηελ επηζπκεηή ελέξγεηα, δειαδή ζε απηήλ ηελ
πεξίπησζε ηελ κέζνδν «deleteContact» ηεο δηεπαθήο απηήο («method: "deleteContact"»).
Δπίζεο ζηέιλεηαη ην αλαγλσξηζηηθφ ηεο επαθήο («id: id») πνπ ζα δηαγξαθεί, θαη δειψλνπκε
ζηελ αίηεζε λα νκαινπνηήζεη ην JSON («normalizeJSON: true»), ην νπνίν ζα αλαιπζεί
ιίγν παξαθάησ. ΢ηελ ζπλέρεηα θαη εάλ ε αίηεζε επηζηξέςεη κε επηηπρία, ειέγρεηαη ε
απάληεζε γηα ην έλα ππήξμε επηηπρήο ή φρη. Δάλ ε απάληεζε ήηαλ επηηπρείο, ζα θιεζεί ε
επαλάθιεζε «onSuccess» ε νπνία ζα επηζηξέςεη ην αλαγλσξηζηηθφ ηεο επαθήο πνπ
δηαγξάθηεθε («onSuccess( id);»). Δάλ ε απάληεζε ππήξμε αλεπηηπρήο, ζα θιεζεί ε
επαλάθιεζε «onError» θαη ζα επηζηξέςεη ηελ ζπιινγή κε ηα ιάζε πνπ νδήγεζαλ ζε απηήλ
ηελ απνηπρία («onError(respsonse.errors);»).
Σελίδα | 79
Κνηηάδνληαο θαη ηηο ππφινηπεο κεζφδνπο, εχθνια παξαηεξεί θαλείο φηη εθηεινχληαη κε ηνλ
ίδην ηξφπν. Όιεο εθηεινχλ θιήζεηο AJAX θαη φιεο δηαζέηνπλ ηνπο ίδηνπο δηαρεηξηζηέο
«onSuccess» θαη «onError». Όζνλ αθνξά ηελ εληνιή «normalizeJSON: true», επεηδή ε
εθαξκνγή απηή αλαπηχζζεηαη ζηα πιαίζηα ηνπ ColdFusion, πξέπεη λα ιεθζνχλ ππφςε
δηαθνξά ραξαθηεξηζηηθά ηνπ ColdFusion φζνλ αθνξά ηελ ζεηξηνπνίεζε (serialization) ησλ
δεδνκέλσλ. Δπεηδή ην ColdFusion δελ είλαη κηα εθαξκνγή επαίζζεηε ζηελ δηάθξηζε πεδψλ
θαη θεθαιαίσλ (case-sensitive application) αιιά ε γιψζζα JavaScript είλαη επαίζζεηε ζηελ
δηάθξηζε απηή, απηή ε δηαθνξνπνίεζε κπνξεί λα νδεγήζεη ζε δηάθνξα πξνβιήκαηα. Έηζη
φηαλ ζεηξηνπνηνχληαη δεδνκέλα ζηελ πιεπξά ηνπ Γηαθνκηζηή ζην πξφηππν JSON ζπρλά
παξαηεξείηαη κηα θεθαιαηνπνίεζε ησλ θιεηδηψλ εληφο ησλ δνκψλ, ην νπνίν είλαη πξφβιεκα.
Γηα λα αληηκεησπηζηεί απηφ ην πξφβιεκα, ρσξίο λα ρξεηάδεηαη ε εθαξκνγή λα «αλεζπρεί» γηα
ην ηη κπνξεί λα γίλεη απφ ηελ πιεπξά ηνπ Γηαθνκηζηή, πξνζηίζεηαη ε εληνιή
«normalizeJSON: true», ε νπνία απηφ πνπ θάλεη είλαη, εζσηεξηθά ηεο εθαξκνγήο, φηαλ ε
αίηεζε AJAX επηζηξαθεί θαη ην JSON ηεο απάληεζεο αλαιχεηαη ζηα δηάθνξα αληηθείκελα,
ε εθαξκνγή ζα ζαξψζεη απηά ηα αληηθείκελα θαη ζα «πεδνπνηήζεη» φια ηα θιεηδηά.
Δπνκέλσο,
θαη
εθφζνλ
δειψλνπκε
θαη
ηα
θιεηδηά
«response.success»
θαη
«respsonse.errors» ηεο απάληεζεο κε πεδνχο ραξαθηήξεο, ε εθαξκνγή ελεξγεί πάληα
ππνζέηνληαο φηη φια ηα θιεηδηά είλαη γξακκέλα κε πεδνχο ραξαθηήξεο. Απηφ ην γεγνλφο
επηηξέπεη ζηελ εθαξκνγή ηεο πιεπξάο ηνπ Πειάηε λα κελ είλαη εμαξηεκέλε απφ ηελ
ηερλνινγία πνπ ρξεζηκνπνηείηαη ζηελ πιεπξά ηνπ Γηαθνκηζηή, θαη είλαη πνιχ ζεκαληηθφ
θαζψο φπσο έρεη αλαθεξζεί θαη ζην ζεσξεηηθφ κέξνο, κηα εθαξκνγή AJAX είλαη
επηθεληξσκέλε ζηελ πιεπξά ηνπ Πειάηε θαη ζα πξέπεη λα ιεηηνπξγεί αθφκε θαη ρσξίο
αιιαγέο ζηελ ηερλνινγία ηεο πιεπξάο ηνπ Γηαθνκηζηή.
΢ηελ πεξίπησζε ηεο κεζφδνπ «getContact», ηα δεδνκέλα πνπ επηζηξέθεη ε επαλάθιεζε
«onSuccess» δελ είλαη απιά έλαο αξηζκφο φπσο ην αλαγλσξηζηηθφ, αιιά θάηη πην πεξίπινθν
(«onSuccess( self.populateContactsFromResponse( response.data ) );»). ΢ε απηήλ ηελ
πεξίπησζε
δελ
ζα
επηζηξαθνχλ
απιά
δεδνκέλα
αιιά
ζα
θιεζεί
ε
κέζνδνο
«self.populateContactsFromResponse» ηεο θιάζεο ε νπνία νξίδεηαη παξαθάησ ζηνλ
θψδηθα. Απηή ε κέζνδνο παίξλεη ηα δεδνκέλα πνπ επηζηξάθεθαλ απφ ηελ απάληεζε, ηα νπνία
κπνξεί λα είλαη έλα αληηθείκελν JSON πνπ αληηζηνηρεί ζε κία επαθή ή κηα ζεηξά (array) απφ
αληηθείκελα JSON πνπ αληηζηνηρνχλ ζε κηα ιίζηα απφ επαθέο, θαη ζπκπιεξψλεη (populate)
ηελ ιίζηα κε ηηο επαθέο πνπ εκθαλίδνληαη ζηελ εθαξκνγή. Απηφ ην θαηαθέξλεη θαιψληαο κηα
«παξνπζία»
ηεο
θιάζεο
«Contact»
ηεο
εθαξκνγήο
(κέζσ
ηεο
κεζφδνπ
«application.getModel») θαη δίλνληάο ηεο σο νξίζκαηα ηα ζηνηρεία ηεο εθάζηνηε επαθήο
(δειαδή ηα id, name, phone, email) ηα νπνία πεξηέρνληαη ζηα δεδνκέλα ηεο απάληεζεο πνπ
βξίζθνληαη εληφο ηνπ εθάζηνηε αληηθεηκέλνπ JSON. Γπξίδνληαο πίζσ ζηελ θιάζε «Contact»
Σελίδα | 80
πνπ πεξηγξάθηεθε πην πάλσ, κπνξεί λα θαηαλνεζεί ε ζχλδεζε απηψλ ησλ δχν
θιάζεσλ/κεζφδσλ.
Ζ θιάζε απηή νινθιεξψλεηαη κε ηελ επηζηξνθή κηαο λέαο «παξνπζίαο» ηεο θιάζεο
«ContactService», ε νπνία αληηκεησπίδεηαη απφ ηελ εθαξκνγή σο έλα «singleton», εθφζνλ
δελ ρξεηαδφκαζηε πεξηζζφηεξε απφ κία «παξνπζία» απηήο ηεο θιάζεο λα ππάξρεη
ηαπηφρξνλα ζηελ εθαξκνγή καο. ΢πλνςίδνληαο, κπνξεί απηή ε θιάζε λα ήηαλ πην πεξίπινθε,
αιιά εχθνια παξαηεξείηαη φηη αθνινπζεί ηηο ίδηεο γεληθέο γξακκέο θαη ηερληθέο φπσο
πεξηγξάθηεθαλ πξνεγνπκέλσο.
5.1.8 Η πξνβνιή «ajax_notification.js»
window.application.addView((function( $, application ){
function AjaxNotification(){
this.notification = null;
};
AjaxNotification.prototype.init = function(){
var self = this;
this.notification = $( "#ajax-load-notification" );
this.notification.ajaxStart(
function(){
self.showView();
}
);
this.notification.ajaxStop(
function(){
self.hideView();
}
);
this.hideView();
};
AjaxNotification.prototype.hideView = function(){
this.notification
.stop()
.fadeTo( 200, 0 )
;
};
AjaxNotification.prototype.showView = function(){
this.notification
.stop()
.fadeTo( 200, 1 )
;
};
return( new AjaxNotification() );
})( jQuery, window.application ));
Όηαλ πξφθεηηαη γηα ηηο Πποβολέρ ηεο εθαξκνγήο, ε Πποβολή πνπ ζεσξείηαη πην απιή είλαη ε
θιάζε «ajax_notification.js». Πξφθεηηαη γηα ηελ θιάζε πνπ αλαιακβάλεη ηελ πξνβνιή ηεο
θφθθηλεο εηδνπνίεζεο πνπ εκθαλίδεηαη ζηελ πάλσ δεμηά γσλία ηνπ θπξίνπ κέξνπο ηεο
ζειίδαο (φπσο θαίλεηαη ζηελ εηθφλα) θαηά ηελ δηάξθεηα ηεο εθηέιεζεο κηαο AJAX
αζχγρξνλεο επηθνηλσλίαο ζην παξαζθήλην. Ζ θιάζε απηή αθνινπζεί ηελ ίδηα δνκή κε ηηο
Σελίδα | 81
ππφινηπεο, επνκέλσο ππάξρεη ε κέζνδνο «.addView» ε νπνία εζσθιείεη κηα απηφεθηεινχκελε αλψλπκε ζπλάξηεζε ηεο νπνία ηελ απάληεζε παίξλεη σο φξηζκα. ΢ε απηήλ ηελ
πεξίπησζε έρνπκε επηζηξνθή κηα λέαο «παξνπζίαο» ηεο θιάζεο (ελφο «singleton») ε νπνία
παξακέλεη θαη ρξεζηκνπνηείηαη απφ ηελ εθαξκνγή φηαλ ρξεηαζηεί.
΢ηνλ θαηαζθεπαζηή ηεο θιάζεο, έρνπκε απιά ηνλ νξηζκφ ηεο ηδηφηεηαο «this.notification»
σο θελφ, εθφζνλ δελ γλσξίδνπκε ζε πνηα θαηάζηαζε βξίζθεηαη ε εθαξκνγή, φπσο
αλαθέξζεθε θαη παιαηφηεξα. Μφιηο ε εθαξκνγή είλαη έηνηκε γηα αιιειεπίδξαζε, ε κέζνδνο
«init» εθηειείηαη θαη αλαιακβάλεη ηελ πξαγκαηηθή δνπιεηά απηήο ηεο θιάζεο. Με ηελ
εθηέιεζε ηεο, αξρηθά δεηάεη απφ ην κνληέιν DOM ην ζηνηρείν «ajax-load-notification» ην
νπνίν βξίζθεηαη ζηελ ζειίδα «index.html» φπσο έρεη αλαθεξζεί θαη πξνεγνπκέλσο.
Δπνκέλσο κε ηελ κέζνδν «this.notification = $( "#ajax-load-notification" );» ζα παξζεί κηα
ζπιινγή αλαθνξάο ηεο βηβιηνζήθεο jQuery γηα απηφ ην ζηνηρείν, θαη ζα απνδνζνχλ ζην
ζηνηρείν απηφ νη κέζνδνη παξαθνινχζεζεο ηνπ AJAX («ajaxStart» θαη «ajaxStop»), φπσο
θαίλεηαη ζηελ ζπλέρεηα ηνπ θψδηθα. Όηαλ απηέο νη κέζνδνη θιεζνχλ γηα εθηέιεζε, ζα
θαιέζνπλ κε ηελ ζεηξά ηνπο ηηο κεζφδνπο «self.showView» θαη «self.hideView» αληίζηνηρα.
Όπσο είλαη θαλεξφ θαη απφ ηα νλφκαηα, φηαλ μεθηλήζεη κηα θιήζε AJAX, ε κέζνδνο
«ajaxStart» ζα εθηειεζηεί θαη ζα εκθαλίζεη ηελ εηδνπνίεζε ηεο ζειίδαο κε ηελ βνήζεηα ηεο
κεζφδνπ «self.showView», ελψ αληίζηνηρα φηαλ νινθιεξσζεί ε θιήζε AJAX, ε κέζνδνο
«ajaxStop» ζα θξχςεη ηελ εηδνπνίεζε ηεο ζειίδαο κε ηελ βνήζεηα ηεο κεζφδνπ
«self.hideView».
Οη δχν κέζνδνη πνπ αλαιακβάλνπλ ηελ πξνβνιή θαη ηελ απφθξπςε ηεο εηδνπνίεζεο, νη
«self.showView» θαη «self.hideView», νξίδνληαη παξαθάησ ζηνλ θψδηθα θαη απνηεινχληαη
απφ αιιαγέο ζηελ ηδηφηεηα «this.notification», πνπ νξίζηεθε ζηνλ θαηαζθεπαζηή,
ρξεζηκνπνηψληαο ην εθέ «fadeTo» ηεο βηβιηνζήθεο jQuery γηα λα εκθαλίζνπλ θαη λα
εμαθαλίζνπλ ην ζηνηρείν «ajax-load-notification» ηεο ζειίδαο. ΢ηελ ηέινο ηεο κεζφδνπ
«init» θαιείηαη ε κέζνδνο «this.hideView» γηα λα θξχςεη ηελ εηδνπνίεζε, θαζψο δελ
ζέινπκε ε εθαξκνγή λα εκθαλίδεη θάπνηα εηδνπνίεζε εάλ δελ ππάξρεη AJAX δξαζηεξηφηεηα
ζην παξαζθήλην. Απηή είλαη κηα απιή θιάζε Πποβολήρ ε νπνία ιεηηνπξγεί κε ηνλ ίδην ηξφπν
κε ηηο ππφινηπεο. ΢ην ίδην κνηίβν θηλνχληαη φιεο νη θιάζεηο πξνβνιψλ ζηελ εθαξκνγή.
Σελίδα | 82
5.1.9 Ο Διεγθηήο «contacts.js»
window.application.addController((function( $, application ){
function Controller(){
this.route( "/", this.index );
this.route( "/contacts/", this.index );
this.route( "/contacts/add/", this.addContact );
this.route( "/contacts/edit/:id", this.editContact );
this.route( "/contacts/delete/:id", this.deleteContact );
this.currentView = null;
this.contactListView = null;
this.contactFormView = null;
};
Controller.prototype = new application.Controller();
Controller.prototype.init = function(){
this.contactListView = application.getView( "ContactList"
);
this.contactFormView = application.getView( "ContactForm"
);
};
Controller.prototype.addContact = function( event ){
this.showView( this.contactFormView, event );
};
Controller.prototype.editContact = function( event, id ){
this.showView( this.contactFormView, event );
};
Controller.prototype.deleteContact = function( event, id ){
application.getModel( "ContactService" ).deleteContact(
id,
function(){
application.relocateTo( "contacts" );
}
);
};
Controller.prototype.index = function( event ){
this.showView( this.contactListView, event );
};
Controller.prototype.showView = function( view, event ){
if (this.currentView && this.currentView.hideView){
this.currentView.hideView();
}
view.showView( event.parameters );
this.currentView = view;
};
return( new Controller() );
})( jQuery, window.application ));
΢ε απηήλ ηελ εθαξκνγή ρξεζηκνπνηείηαη κφλν έλαο Δλεγκηήρ, ε θιάζε «contacts.js», φκσο
θπζηθά ζα κπνξνχζαλ λα ήηαλ πεξηζζφηεξνη αλάινγα κε ηνλ ηχπν θαη ηηο απαηηήζεηο ηεο
εθάζηνηε εθαξκνγήο πνπ αλαπηχζζεηαη. Ζ θιάζε απηή αθνινπζεί ηελ ίδηα ηερληθή
αλάπηπμεο κε ηηο πξνεγνχκελεο κε ηελ κέζνδν «addController» λα πξνζζέηεη ζηελ
εθαξκνγή ηεο επηζηξνθή ηεο απηφ-εθηεινχκελεο ζπλάξηεζεο πνπ εκπεξηέρεηαη κέζα ηεο.
Μέζα ζηνλ θαηαζθεπαζηή ηεο θιάζεο («Controller()») γίλεηαη ε αληηζηνίρηζε ησλ ηηκψλ
ησλ «αιιαγψλ-hash» κε ηνπο δηαρεηξηζηέο ζπκβάλησλ, πνπ έρνπλ νξηζηεί παξαθάησ ζηνλ
Σελίδα | 83
θψδηθα, νη νπνίνη είλαη ππεχζπλνη γηα ηηο πεξαηηέξσ ελέξγεηεο ηεο εθαξκνγήο. Παξαηεξείηαη
φηη κπνξνχκε λα έρνπκε ηνλ ίδην δηαρεηξηζηή γηα πνιιαπιέο ηηκέο «αιιαγψλ-hash», φπσο
ζηελ πεξίπησζε ηνπ «this.index» ν νπνίνο αληηζηνηρίδεηαη κε ηηο ηηκέο «/» θαη «/contacts/».
Απηφ κπνξεί λα ζπκβεί θαη αληίζηξνθα, θαζψο ε ζρέζε κεηαμχ ησλ ηηκψλ θαη ησλ
δηαρεηξηζηψλ είλαη «πνιιά πξνο πνιιά».
Μεηά ηελ δξνκνιφγεζε ησλ ηηκψλ κε ηνπο αληίζηνηρνχο δηαρεηξηζηέο κε ηελ βνήζεηα ηεο
κεζφδνπ «this.route», νξίδνπκε ηηο ηδηφηεηεο καο ζηνλ θαηαζθεπαζηή, νη νπνίεο γηα άιιε κηα
θνξά νξίδνληαη σο θελέο, εθφζνλ δελ γλσξίδνπκε εάλ ε εθαξκνγή είλαη έηνηκε πξνο
αιιειεπίδξαζε. Μφιηο γίλεη ην ηειεπηαίν θαιείηαη ε κέζνδνο «init», ε νπνία αξρηθά ζπιιέγεη
απφ ηελ εθαξκνγήο δχν Πποβολέρ, ηελ «ContactList» θαη ηελ «ContactForm», νη νπνίεο
αληηπξνζσπεχνπλ ηηο δχν δηαηάμεηο (layouts) ηεο θεληξηθήο ζειίδαο ηεο εθαξκνγήο, φπσο
πεξηγξάθηεθαλ ζε πξνεγνχκελε παξάγξαθν. Ζ «ContactList» αληηζηνηρεί ζηελ ιίζηα
επαθψλ κε ην πεδίν αλαδήηεζεο θαη ε «ContactForm» αληηζηνηρεί ζηελ θφξκα
επεμεξγαζίαο-δεκηνπξγίαο κηα επαθήο. Ο ιφγνο πνπ ζπιιέγνληαη απηέο νη επαθέο εδψ είλαη
φηη ν ζπγθεθξηκέλνο Δλεγκηήρ αλαιακβάλεη ηεο ελαιιαγή απηψλ ησλ δχν δηαηάμεσλ
αλάινγα κε ηα ζπκβάληα ζηελ δηεχζπλζε URL.
΢χκθσλα κε ηελ κεζνδνινγία πνπ πεξηγξάθηεθε ζε ζηελ αξρή απηήο ηεο ελφηεηαο, κε ηνλ
θψδηθα «Controller.prototype = new application.Controller();» απηή ε θιάζε-Δλεγκηήρ
επεθηείλεη ηελ ππεξθιάζε «application.Controller» γηα λα κπνξέζεη λα έρεη πξφζβαζε ζηελ
κέζνδν δξνκνιφγεζεο «this.route». Παξαθάησ ζηνλ θψδηθα νξίδνληαη φινη νη δηαρεηξηζηέο
ζπκβάλησλ, κε ηνπο «editContact» θαη «deleteContact» λα έρνπλ σο έμηξα φξηζκα ηελ
κεηαβιεηή «id» ηεο δηεχζπλζεο URL. Όινη νη δηαρεηξηζηέο ζπκβάλησλ αλαιακβάλνπλ ηελ
αλάζεζε θαζεθφλησλ ζε Πποβολέρ θαη Μονηέλα, αλάινγα κε ηελ πεξίπησζε.
5.1.10 Σηαηηθή Έθδνζε ηεο πιεπξάο ηνπ Πειάηε
΢ε απηφ ην ζεκείν έρνπλ αλαθεξζεί θαη πεξηγξαθηεί φιεο νη θχξηεο θιάζεο ηεο πιεπξάο ηνπ
Πειάηε. Αμίδεη λα αλαθεξζεί ην γεγνλφο φηη ππάξρεη δπλαηφηεηα ιεηηνπξγίαο ηεο πιεπξάο
ηνπ Πειάηε απηφλνκα, ρσξίο ηελ αλάγθε γηα χπαξμε κηαο δηαδηθηπαθήο ππεξεζίαο θαη
πιεπξάο ηνπ Γηαθνκηζηή. Απηή ε δπλαηφηεηα δεκηνπξγήζεθε θπξίσο γηα λα κπνξέζεη
θάπνηνο λα θνξηψζεη θαη λα δνπιέςεη ηελ εθαξκνγή, λα δεη ηηο ιεηηνπξγίεο πνπ πξνζθέξεη,
ρσξίο λα ρξεηαζηεί λα κπεη ζηελ δηαδηθαζία εγθαηάζηαζεο ελφο ColdFusion Server ζηνλ
ππνινγηζηή ηνπ. Δίλαη ζαλ κηα «εθηφο-ζχλδεζεο» έθδνζε ηεο εθαξκνγήο. Γηα λα επηηεπρζνχλ
φια ηα παξαπάλσ, αξθεί λα αιιαρηεί κία ιέμε απφ ηνλ θψδηθα ζην θεληξηθφ αξρείν
«index.html». Ζ αιιαγή απηή γίλεηαη ζηηο δειψζεηο ζηελ αξρή ηνπ θψδηθα, θαη
πεξηιακβάλεη ηελ αιιαγή ηεο δήισζεο γηα ην αξρείν ηνπ Μονηέλος «contact_service.js» ζε
«contact_service_static.js». Σν αξρείν «contact_service_static.js» είλαη κηα ζηαηηθή έθδνζε
Σελίδα | 84
ηνπ Μονηέλος «contact_service.js». Δπεηδή φπσο αλαθέξζεθε θαη παξαπάλσ, ην κφλν κέξνο
ηεο πιεπξάο ηνπ Πειάηε πνπ κηιάεη κε ηνλ Γηαθνκηζηή είλαη απηφ ην Μονηέλο, αιιάδνληαο
απηφ ην αξρείν κε ηελ ζηαηηθή έθδνζε νπζηαζηηθά κεηαηξέπνπκε ηελ εθαξκνγή ζε κηα
«εθηφο-ζχλδεζεο» εθαξκνγή (offline application). Ζ θιάζε «contact_service_static.js», δελ
έρεη θακία θιήζε AJAX κέζα ηεο, δελ ρξεζηκνπνηείηαη δειαδή απνκαθξπζκέλε βάζε κε
επαθέο ζε κνξθή JSON φπσο ζηελ δπλακηθή ηεο έθδνζε, αιιά αληίζεηα νη επαθέο
απνζεθεχνληαη ηνπηθά θαη πξνζσξηλά κε ρξήζε ζπζηνηρηψλ (arrays). Με απηφλ ηνλ ηξφπν,
κπνξεί ν ρξήζηεο λα κελ αληηιακβάλεηαη δηαθνξά θαζψο φιε ε ιεηηνπξγηθφηεηα ηηο
εθαξκνγήο είλαη παξνχζα, φκσο δελ ππάξρεη βάζε κε επαθέο θαη δελ ππάξρνπλ θιήζεηο
AJAX ζην παξαζθήλην. Δίλαη απιά κηα έθδνζε γηα φπνηνλ ζέιεη λα δνθηκάζεη ηηο
δπλαηφηεηεο ηηο εθαξκνγήο εχθνια θαη γξήγνξα.
5.2 Πιεπξά ηνπ Γηαθνκηζηή – ColdFusion
Ζ πιεπξά ηνπ Γηαθνκηζηή ζε απηήλ ηελ εθαξκνγή αλαιακβάλεη ηελ πιεπξά ηεο δηαδηθηπαθήο
ππεξεζίαο πνπ ρξεηάδεηαη ε πιεπξά ηνπ Πειάηε γηα λα ιεηηνπξγήζεη. ΢ηελ πιεπξά ηνπ
Γηαθνκηζηή επίζεο βξίζθνληαη απνζεθεπκέλα θαη φια ηα αξρεία ηεο εθαξκνγήο, θαζψο εθεί
θηινμελείηαη ε εθαξκνγή, θαη ν ρξήζηεο ζα πξέπεη λα πιεθηξνινγήζεη ηελ δηεχζπλζε URL
ηεο εθαξκνγήο, πνπ ηεο έρεη απνδψζεη ν Γηαθνκηζηήο, γηα λα θνξηψζεη θαη λα
αιιειεπηδξάζεη κε ηελ εθαξκνγή. Θα αθνινπζήζεη αλάιπζε κεξηθψλ ελδεηθηηθψλ ηερληθψλ
ζεκάησλ ηεο πιεπξάο ηνπ Γηαθνκηζηή, ε νπνία απνηειείηαη εμ’ νινθιήξνπ απφ ηερλνινγία
ColdFusion.
5.2.1 Η ρξήζε ηνπ δηαρεηξηζηή ζπκβάλησλ «OnCFCRequest()»
Όπσο έρεη αλαθεξζεί θαη ζηελ ζρεδίαζε ηεο εθαξκνγήο ζηελ πιεπξά ηνπ Γηαθνκηζηή, ην
αξρείν «Application.cfc» είλαη ν ππξήλαο ηεο εθαξκνγήο ζε απηήλ ηελ πιεπξά. ΢ην αξρείν
«Application.cfc» ρξεζηκνπνηείηαη ν δηαρεηξηζηήο ζπκβάλησλ «OnCFCRequest()» γηα ηελ
δηαρείξηζε ησλ CFC αηηήζεσλ. Με ηελ ρξήζε απηνχ ηνπ δηαρεηξηζηή έρνπκε δηάθνξα νθέιε.
Καηαξρήλ, έρνπκε ηελ δπλαηφηεηα λα απνζεθεχνπκε πξνζσξηλά ζηελ κλήκε (cache) ηηο
απνκαθξπζκέλεο αηηήζεηο γηα «εμαξηήκαηα» (components) ηνπ ColdFusion. ΢ε αληίζεηε
πεξίπησζε ην ColdFusion ζα έπξεπε λα «ζπγθεθξηκελνπνηήζεη» (instantiate) θάζε
«εμάξηεκα» πνπ ζα δεηνχληαλ, ελψ ηψξα κπνξεί λα ρξεζηκνπνηήζεη κία ήδε έηνηκε
«παξνπζία» ηνπ απφ ηελ πξνζσξηλή κλήκε. Έλα επηπιένλ φθεινο είλαη ε δπλαηφηεηα
θαηάιιειεο δηαρείξηζεο ησλ ζθαικάησλ ησλ δηεπαθψλ APIs (APIs Errors), ελψ έλα πνιχ
ζεκαληηθφ φθεινο είλαη ε δπλαηφηεηα ηα δεδνκέλα ηεο απάληεζεο λα κπνξνχλ λα ζηαινχλ ζε
κία πνηθηιία απφ κνξθέο, φπσο JSON, JSONP, πξνζαξκνζκέλε XML θαη άιια.
Σελίδα | 85
5.2.2 Γεληθή Δπηζθόπεζε ησλ θιάζεσλ
΢ηελ πιεπξά ηνπ Γηαθνκηζηή, φζνλ αθνξά ηα Μονηέλα, ε θιάζε «Contact.cfc» είλαη ε
θχξηα θιάζε, αλαιακβάλεη ηεο θχξηεο εξγαζίεο ηνπ Μονηέλος θαη ιεηηνπξγεί σο ε
Ππυηαπσική Ονηόηηηα Τομέα (Primary Domain Entity) . Ζ θιάζε «ContactService.cfc»
δηαζέηεη ηηο βαζηθέο κεζφδνπο πνπ «κηινχλ» κε ηελ θιάζε «ContactDAO.cfc» (DAO: Data
Access Object, αληηθείκελν πξφζβαζεο ησλ δεδνκέλσλ) ε νπνία βνεζάεη ζηελ δηαηήξεζε ηεο
«δηάξθεηαο» ησλ δεδνκέλσλ. Ζ θιάζε «ContactDAO.cfc» αλαιακβάλεη ηεο «ζεηξηνπνίεζε»
ησλ πιεξνθνξηψλ (ησλ δεδνκέλσλ ησλ επαθψλ δειαδή) θαη ηελ απνζήθεπζή ηνπο ζην αξρείν
«contacts.json» ην νπνίν νπζηαζηηθά απνηειεί θαη ηελ κίλη βάζε δεδνκέλσλ ηνπ ζπζηήκαηνο.
Ζ νπζηαζηηθή κεξηά ηνπ Γηαθνκηζηή πνπ θνηηάδνπκε απφ ηελ νπηηθή γσλία ηνπ Πειάηε, είλαη
νη δηεπαθέο API. Οη δηεπαθέο API απνηεινχληαη απφ ηα εμαξηήκαηα «Base.cfc» θαη
«Contacts.cfc». Σν «εμάξηεκα» «Contacts.cfc» είλαη ην εμάξηεκα πνπ θαιεί ν Πειάηεο γηα
λα θάλεη ηηο απνκαθξπζκέλεο αηηήζεηο. Απηφ ην εμάξηεκα «επεθηείλεη» (extends) ην
«εμάξηεκα» «Base.cfc», ην νπνίν είλαη «εμάξηεκα» ππξήλαο γηα φια ηα απνκαθξπζκέλα
«εμαξηήκαηα» API πνπ πξφθεηηαη λα δεκηνπξγεζνχλ.
5.2.3 Τν «εμάξηεκα» ππξήλαο «Base.cfc»
<cfcomponent
output="false"
hint="I provide the base functionality for remote API
components.">
<cffunction
name="getFactory"
access="public"
returntype="any"
output="false"
hint="I return the application factory.">
<cfreturn application.factory />
</cffunction>
<cffunction
name="getNewResponse"
access="public"
returntype="struct"
output="false"
hint="I return a new API response object.">
<cfreturn this.getFactory().newAPIResponse() />
</cffunction>
</cfcomponent>
Σν «εμάξηεκα» «Base.cfc» νπζηαζηηθά απνηειείηαη απφ δχν κεζφδνπο. Ζ κία κέζνδνο είλαη ε
«getFactory», ε νπνία ζπιιέγεη ηελ «παξνπζία» «factory» («εξγνζηάζην») απφ ηελ
εθαξκνγή θαη ηελ επηζηξέθεη («<cfreturn application.factory />»). Ζ «factory», φπσο θαη
ζηελ εθαξκνγή ηεο πιεπξάο ηνπ Πειάηε, είλαη ην «εμάξηεκα» ζηνλ Γηαθνκηζηή ην νπνίν
αλαιακβάλεη ηελ δεκηνπξγία ησλ θιάζεσλ, αλαιακβάλεη επίζεο ηηο εγρχζεηο εμαξηήζεσλ,
Σελίδα | 86
ηελ αλαζηξνθή ηνπ ειέγρνπ, φπσο επίζεο αλαιακβάλεη θαη ηελ πξνζσξηλή απνζήθεπζε ζηελ
κλήκε ησλ «singletons». Οπφηε νπζηαζηηθά κπνξνχκε λα απνζεθεχζνπκε θαη λα
αλαθηήζνπκε «εμαξηήκαηα» φηαλ απηφ ρξεηάδεηαη, ρξεζηκνπνηψληαο απηήλ ηελ «παξνπζία»
«factory».
Ζ άιιε κέζνδνο ηνπ εμαξηήκαηνο, είλαη ε «getNewResponse». Ζ κέζνδνο απηή δεκηνπξγεί
κηα λέα παξνπζία ηεο απάληεζεο ηεο δηεπαθήο API. Όιεο νη απαληήζεηο ηεο δηεπαθήο API,
έρνπλ ηελ ίδηα δνκή. Ζ δνκή απηή πεξηιακβάλεη ηξία θιεηδηά:

Success (ηχπνπ «boolean»)

Data (νηηδήπνηε ηχπνπ)

Errors (ηχπνπ ζπζηνηρίαο ή array)
Σν θιεηδί «Success» είλαη νπζηαζηηθά κηα «ινγηθή» ηηκή γηα ην εάλ ε αίηεζε ήηαλ επηηπρήο ή
φρη. Σν θιεηδί «Data» πεξηέρεη ηελ πιεξνθνξία πνπ ζηέιλεηαη κε ηελ απάληεζε, νπνηαδήπνηε
κνξθήο θαη αλ είλαη απηή (φπσο π.ρ. κηα ζπκβνινζεηξά, έλαο αξηζκφο, κηα δνκή, κηα ζεηξά
απφ δνκέο). Σν ηειεπηαίν θιεηδί «Errors» είλαη κηα ζπιινγή απφ ζθάικαηα, θαη
ζπγθεθξηκέλα κηα ζεηξά απφ ζθάικαηα ζε κηα πξνηππνπνηεκέλε δνκή.
5.2.4 Τν «εμάξηεκα» «Contacts.cfc»
Σν «εμάξηεκα» «Contacts.cfc», ηνπ νπνίνπ ν θψδηθαο δίλεηαη παξαθάησ, απνηειείηαη απφ
κηα ζεηξά απφ ζπλαξηήζεηο πνπ εθηεινχλ ηηο δηάθνξεο ιεηηνπξγίεο πνπ αηηείηαη ν Πειάηεο. Ζ
πξψηε ζπλάξηεζε, ε «deleteContact», ε νπνία αλαιακβάλεη ηελ δηαγξαθή κηαο επαθήο,
δεκηνπξγεί κηα λέα «παξνπζία» ηεο απάληεζεο ηεο δηεπαθήο API («<cfset local.response =
this.getNewResponse() />») θαη ζηελ ζπλέρεηα θαιεί ην «εμάξηεκα» «factory» θαη ηνπ
δεηάεη ην Μνληέιν «ContactService» απφ ην νπνίν ζα θαιέζεη ηελ κέζνδν «deleteContact»
θαη ζα ηεο πεξάζεη σο φξηζκα ην αλαγλσξηζηηθφ (id) ηεο επαθήο πνπ πξφθεηηαη λα δηαγξαθεί
θαη
ην
νπνίν
γλσξίδεη
απφ
ηα
δεδνκέλα
ηεο
αίηεζεο
(«
this.getFactory().getContactService().deleteContact( arguments.id ).getAll()»). Απηφ ζα
έρεη σο απνηέιεζκα ηελ θιήζε ηνπ ζηξψκαηνο ππεξεζίαο (service layer) θαη ηελ δηαγξαθή
ηεο επαθήο. Σν ζηξψκα ππεξεζίαο κε ηελ ζεηξά ηνπ, επηζηξέθεη κηα «παξνπζία» ηεο επαθήο
πνπ δηέγξαςε, ηελ νπνία ε κέζνδνο ρξεζηκνπνηεί γηα λα ζπιιέμεη φιεο ηηο ηδηφηεηεο απηήο ηεο
επαθήο (δειαδή ηα id, name, phone, email) θαη δεκηνπξγεί κηα δνκή απφ απηέο, ε νπνία
νξίδεηαη σο ε ηηκή ηνπ θιεηδηνχ «Data» ηεο απάληεζεο. ΢ηελ ζπλέρεηα ε κέζνδνο ζα
επηζηξέςεη φιεο ηηο ηδηφηεηεο ηεο απάληεζεο ηνπ Γηαθνκηζηή ζηνλ Πειάηε, νη νπνίεο είλαη ηα
ηξία θιεηδηά πνπ αλαθέξζεθαλ θαη παξαπάλσ, ηα «Success», «Data» θαη «Errors»
(«<cfreturn local.response.getAll() />»).
Σελίδα | 87
<cfcomponent
extends="Base"
output="false"
hint="I provide remote API calls for contacts.">
<cffunction
name="deleteContact"
access="remote"
returntype="struct"
returnformat="json"
output="false"
hint="I delete the contact at the given ID.">
<cfargument
name="id"
type="numeric"
required="true"
hint="I am the ID of the contact being deleted."
/>
<cfset var local = {} />
<cfset local.response = this.getNewResponse() />
<cfset local.response.setData(
this.getFactory().getContactService().deleteContact(
arguments.id ).getAll()
) />
<cfreturn local.response.getAll() />
</cffunction>
<cffunction
name="getContact"
access="remote"
returntype="struct"
returnformat="json"
output="false"
hint="I return the contact at the given ID.">
<cfargument
name="id"
type="numeric"
required="true"
hint="I am the ID of the contact being gotten."
/>
<cfset var local = {} />
<cfset local.response = this.getNewResponse() />
<cfset local.response.setData(
this.getFactory().getContactService().getContact(
arguments.id ).getAll()
) />
<cfreturn local.response.getAll() />
</cffunction>
<cffunction
name="getContacts"
access="remote"
returntype="struct"
returnformat="json"
output="false"
hint="I return the contacts.">
<cfset var local = {} />
<cfset local.response = this.getNewResponse() />
<cfset local.contacts = [] />
<cfloop
Σελίδα | 88
index="local.contact"
array="#this.getFactory().getContactService().getContacts()#">
<cfset arrayAppend(
local.contacts,
local.contact.getAll()
) />
</cfloop>
<cfset local.response.setData( local.contacts ) />
<cfreturn local.response.getAll() />
</cffunction>
<cffunction
name="saveContact"
access="remote"
returntype="struct"
returnformat="json"
output="false"
hint="I save the given contact data. If there are any
valiation errors, they will be returned in the response.">
<cfargument
name="id"
type="numeric"
required="true"
hint="I am the ID of the contact."
/>
<cfargument
name="name"
type="string"
required="true"
hint="I am the name of the contact."
/>
<cfargument
name="phone"
type="string"
required="true"
hint="I am the phone number of the contact."
/>
<cfargument
name="email"
type="string"
required="true"
hint="I am the email address of the contact."
/>
<cfset var local = {} />
<cfset local.response = this.getNewResponse() />
<cfset local.contact =
this.getFactory().getContactService().getContact( val(
arguments.id ) ) />
<cfset local.contact.setAll(
name = arguments.name,
phone = arguments.phone,
email = arguments.email
) />
<cfset local.errors = local.contact.validate() />
<cfif arrayLen( local.errors )>
<cfset local.response.applyValidationErrors(
local.errors ) />
<cfelse>
Σελίδα | 89
<cfset this.getFactory().getContactService().saveContact(
local.contact ) />
<cfset local.response.setData( local.contact.getId() )
/>
</cfif>
<cfreturn local.response.getAll() />
</cffunction>
</cfcomponent>
Ο ππφινηπνο θψδηθαο ιεηηνπξγεί αθξηβψο κε ηνλ ίδην ηξφπν, φιεο νη ζπλαξηήζεηο
δεκηνπξγνχλ κηα λέα «παξνπζία» ηεο απάληεζεο, ζηελ ζπλέρεηα θαινχλ κέζσ ηεο κεζφδνπ
«getFactory» ηελ θαηάιιειε κέζνδν γηα ηελ ελέξγεηα πνπ έρεη δεηεζεί απφ ηνλ Πειάηε, ε
ελέξγεηα εθηειείηαη απφ ην ζηξψκα ππεξεζίαο ην νπνίν γπξίδεη ηηο ηδηφηεηεο νη νπνίεο
ρξεζηκνπνηνχληαη γηα ηελ επηζηξνθή ηεο απάληεζεο ζηνλ Πειάηε.
Όιεο νη κέζνδνη έρνπλ ηχπν πξφζβαζεο «remote» («access="remote"») δειαδή
«απνκαθξπζκέλνπ» θαζψο ζα εθηεινχληαη απνκαθξπζκέλα απφ ηελ εθαξκνγή θαη φιεο
έρνπλ ηχπν επηζηξνθήο «struct» («returntype="struct"») θαζψο φιεο επηζηξέθνπλ απηέο
ηηο δνκέο απάληεζεο πνπ είδακε πξνεγνπκέλσο. Δπηπιένλ, ε κνξθή ησλ δεδνκέλσλ πνπ
επηζηξέθνληαη είλαη θπζηθά ην JSON («returnformat="json"»), ην νπνίν είλαη ε
πξνεπηινγή, φκσο δελ είλαη απαξαίηεην λα ρξεζηκνπνηεζεί θαζψο ε εθαξκνγή καο επηηξέπεη
λα επηιέμνπκε θαη άιιε κνξθή δεδνκέλσλ, φπσο π.ρ. απιφ θείκελν, θαη αιιάδνληαο ηνλ ηχπν
ηεο κνξθήο ην ColdFusion ζα κεηαηξέςεη απηφκαηα ηα δεδνκέλα ζηελ κνξθή πνπ δεηήζεθε
θαη ζα ηα επηζηξέςεη κε ηελ απάληεζε. Παξφια απηά, ην ColdFusion ζα επηζηξέςεη ηα
δεδνκέλα κε ηα θιεηδηά ηεο δνκήο γξακκέλα ζηα θεθαιαία, θαη απηφο είλαη ν ιφγνο πνπ απφ
ηελ πιεπξά ηνπ Πειάηε έρεη ξπζκηζηεί ε εθαξκνγή λα «νκαινπνηεί» (δειαδή λα κεηαηξέπεη
ζε πεδά γξάκκαηα) ηα δεδνκέλα ηεο απάληεζεο πνπ δέρεηαη.
Απηή ήηαλ ε αλάιπζε ελφο ελδεηθηηθνχ κέξνπο ηνπ θψδηθα ζηνλ Γηαθνκηζηή. ΢ε απηφ ην
ζεκείν ζα πξέπεη λα επηζεκαλζεί φηη φινο ν θψδηθαο ηεο εθαξκνγήο (θαη ησλ δπν πιεπξψλ)
έρεη ζπληαρζεί πεξηέρνληαο αλαιπηηθά ζρφιηα γηα ηα κέξε πνπ ρσξίδεηαη θαη ην ηη ελέξγεηεο
εθηεινχλ απηά. Ο αλαγλψζηεο ζα κπνξέζεη δηαβάδνληαο ηα ζρφιηα λα θαηαλνήζεη πιήξσο ηηο
πεξηγξαθφκελεο ιεηηνπξγίεο ηνπ θψδηθα.
5.3 Πιαηθόξκεο θαη πξνγξακκαηηζηηθά εξγαιεία
Γηα ηελ αλάπηπμε ηεο εθαξκνγήο «Έξςπνερ Δπαθέρ» ηεο πηπρηαθήο εξγαζίαο
ρξεζηκνπνηήζεθαλ ηα παξαθάησ πξνγξακκαηηζηηθά εξγαιεία θαη πιαηθφξκεο. Γηα ηελ
πιεπξά ηνπ Γηαθνκηζηή ρξεζηκνπνηήζεθε ε πιαηθφξκα ColdFusion 9 ηεο εηαηξίαο Adobe
Systems, ε νπνία πξνζθέξεη νινθιεξσκέλε ηερλνινγία γηα ηελ πιεπξά απηή, δειαδή θαη
Σελίδα | 90
ηερλνινγία γηα ηελ εγθαηάζηαζε ηνπ Γηαθνκηζηή απηνχ θαζεαπηνχ αιιά θαη γηα ηελ
αλάπηπμε ηεο ηερλνινγίαο ηεο δηαδηθηπαθήο ππεξεζίαο-εθαξκνγήο πνπ ζα εθηειείηαη. Ζ
πιαηθφξκα ColdFusion είλαη έλα εκπνξηθφ πξντφλ φκσο ππάξρεη ε δπλαηφηεηα
«θαηεβάζκαηνο» θαη εγθαηάζηαζεο ηεο έθδνζεο «Developer Edition», ε νπνία δηαηίζεηαη
δσξεάλ κε έλαλ πεξηνξηζκφ. Ζ έθδνζε απηή είλαη κηα πιήξεο έθδνζε, εθάκηιιε ηεο
εκπνξηθήο, πνπ πξννξίδεηαη γηα ηελ αλάπηπμε εθαξκνγψλ ηνπηθά απφ ηνπο πξνγξακκαηηζηέο.
Ο κφλνο πεξηνξηζκφο ζε ζρέζε κε ηελ βαζηθή εκπνξηθή έθδνζε είλαη φηη ε πξφζβαζε ζηηο
εθαξκνγέο πνπ ηξέρνπλ ζε Γηαθνκηζηή ηεο «Developer Edition» έρεη πεξηνξηζηεί ζε δχν
κεραλήκαηα
Πειάηεο.
Ζ
έθδνζε
πξνζθέξεηαη
γηα
θαηέβαζκα
ζηελ
δηεχζπλζε:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=coldfusion .
Γηα ηελ ζπγγξαθή ηνπ θψδηθα ζηελ πιεπξά ηνπ Γηαθνκηζηή, δειαδή ησλ αξρείσλ «.cfc» θαη
«.cfm», ρξεζηκνπνηήζεθε ην πξφγξακκα Adobe ColdFusion Builder, θπξίσο γηα ηελ
δπλαηφηεηα ηνπ ρξσκαηηζκνχ (syntax highlighting) ζηελ ζχληαμε ηνπ θψδηθα ηεο γιψζζαο
CFML. Σελ πεξίνδν αλάπηπμεο ηεο πηπρηαθήο εξγαζίαο θαη θαηά ζπλέπεηα θαη ηεο
εθαξκνγήο, ην ColdFusion Builder πξνζθεξφηαλ δσξεάλ θαζψο ήηαλ ζε δνθηκαζηηθή θάζε
αλάπηπμεο (beta). Με ηνλ εξρνκφ ηεο ηειηθήο έθδνζεο ην πξφγξακκα πέξαζε ζε εκπνξηθή
δηάζεζε, θαη πξνζθέξεηαη ζε δνθηκαζηηθή πιήξε έθδνζε εμήληα εκεξψλ ζηελ δηεχζπλζε:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=coldfusion_builder . Να ζεκεησζεί
φηη ην πξφγξακκα δελ απαηηείηαη γηα ηελ ιεηηνπξγία ή ηελ επεμεξγαζία ηνπ θψδηθα ηεο
εθαξκνγήο. Γηα ηελ επεμεξγαζία ηνπ θψδηθα ησλ πξναλαθεξζέλησλ αξρείσλ κπνξεί λα
ρξεζηκνπνηεζεί νπνηνδήπνηε πξφγξακκα αλάγλσζεο θψδηθα, φπσο ην παξαθάησ.
Γηα ηελ ζπγγξαθή ηνπ θψδηθα ησλ ηερλνινγηψλ ζηελ πιεπξά ηνπ πειάηε (JavaScript, CSS,
HTML) θαζψο θαη ηελ επεμεξγαζία ηνπ αξρείνπ «contacts.json» ρξεζηκνπνηήζεθε ην
δσξεάλ πξφγξακκα NotePad++. Σν ζπγθεθξηκέλν πξφγξακκα αλήθεη ζηελ θαηεγνξία ηνπ
ινγηζκηθνχ αλνηθηνχ θψδηθα (open source) κε κηα πνιχ ελεξγή θνηλφηεηα θαη πινχζηα
ραξαθηεξηζηηθά. Πξφθεηηαη γηα έλαλ επεμεξγαζηή θεηκέλνπ κε δπλαηφηεηεο ρξσκαηηζκνχ ηεο
ζχληαμεο ηνπ θψδηθα πνιιψλ γισζζψλ πξνγξακκαηηζκνχ, θαη ηελ δπλαηφηεηα ελζσκάησζεο
δσξεάλ επηπξφζζεησλ πξνγξακκάησλ (plug-ins) γηα έμηξα ιεηηνπξγίεο. Δπηιέρηεθε θπξίσο
γηα ηελ απιφηεηα θαη ηηο πνιχ κηθξέο απαηηήζεηο ηνπ ζε ππνινγηζηηθή ηζρχ.
Σέινο, γηα ηελ θαηαζθεπή ησλ εηθφλσλ θαη ζρεκάησλ ηνπ θεηκέλνπ απηνχ, θαζψο θαη γηα ηελ
θαηαζθεπή ηνπ ινγφηππνπ ηεο εθαξκνγήο, ρξεζηκνπνηήζεθε ην πξφγξακκα Fireworks CS4
ηεο
Adobe
Systems,
ην
νπνίν
πξνζθέξεηαη
ζηελ
δηεχζπλζε:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks ζε δνθηκαζηηθή πιήξε
έθδνζε ηξηάληα εκεξψλ. Σν πξφγξακκα επηιέρηεθε θπξίσο γηα ηελ επθνιία πνπ πξνζθέξεη
ζηελ παξαγσγή γξαθηθψλ γηα ρξήζε ζην δηαδίθηπν. Γηα ηελ θαηαζθεπή ηνπ θφληνπ ηεο
Σελίδα | 91
εθαξκνγήο, ρξεζηκνπνηήζεθε ε δηαδηθηπαθή εθαξκνγή Stripe Generator 2.0, ε νπνία
πξνζθέξεηαη δσξεάλ θαη θηινμελείηαη ζηελ δηεχζπλζε: http://www.stripegenerator.com .
Καηά ηελ δηάξθεηα δνθηκψλ θαη απνζθαικάησζεο ηεο εθαξκνγή, ρξεζηκνπνηήζεθε ην
πξφγξακκα πεξηήγεζεο Firefox 3.5 (θαη αξγφηεξα 3.6) κε εγθαηεζηεκέλα ηα πξφζζεηα
πξνγξάκκαηα (Add-ons) Web Developer θαη Firebug. Σα παξαπάλσ ρξεζηκνπνηήζεθαλ γηα
ηηο πξνεγκέλεο δπλαηφηεηεο πνπ πξνζέθεξαλ ζηελ παξαθνινχζεζε ηνπ θψδηθα ηεο
JavaScript θαη ηελ πιήξε θαηαγξαθή θαη εκθάληζε ησλ ζθαικάησλ θαη ησλ
πξνεηδνπνηεηηθψλ κελπκάησλ πνπ δεκηνπξγνχληαη θαηά ηελ εθηέιεζε ηεο εθαξκνγήο.
5.3.1 Γηαδηθαζία εγθαηάζηαζεο ηεο πηπρηαθήο εξγαζίαο ζε ππνινγηζηή
Γηα ηελ εγθαηάζηαζε θαη ηελ ιεηηνπξγία ηελ εθαξκνγήο «Έξςπνερ Δπαθέρ» ηεο πηπρηαθήο
εξγαζίαο, ρξεηάδνληαη δπν βαζηθά βήκαηα, ην πξψην αθνξά ηελ εγθαηάζηαζε ηεο
πιαηθφξκαο ColdFusion θαη ηε ξχζκηζε ηνπ Γηαθνκηζηή ηεο, ελψ ην δεχηεξν αθνξά ηελ
αληηγξαθή ηνπ θάθεινπ «application» απφ ην CD ηεο πηπρηαθήο ζηνλ θάθειν «wwwroot»
ηνπ Γηαθνκηζηή. Αλαιπηηθά ηα βήκαηα παξνπζηάδνληαη παξαθάησ. Να ζεκεησζεί φηη ε
νδεγίεο απηέο αθνξνχλ ηελ εγθαηάζηαζε ζε ιεηηνπξγηθφ πεξηβάιινλ Windows ηεο
Microsoft.
5.3.1.1 Δγθαηάζηαζε ηνπ ColdFusion
Γηα ηελ εγθαηάζηαζε ηνπ Γηαθνκηζηή ζα ρξεζηκνπνηεζεί ε έθδνζε «Developer Edition» ηνπ
ColdFusion ε νπνία κπνξεί λα θαηεβαζηεί απφ ηελ δηεχζπλζε πνπ αλαθέξεηαη παξαπάλσ
αιιά πεξηέρεηαη θαη ζηνλ θάθειν «coldfusion» ζην CD ηεο πηπρηαθήο.
Γηα ηελ εγθαηάζηαζε απφ ην CD ηεο πηπρηαθήο, απιά ρξεηάδεηαη ε εθηέιεζε ηνπ αξρείνπ
«ColdFusion_9_WWE_win.exe» πνπ βξίζθνληαη εληφο ηνπ πξναλαθεξζέληα θάθεινπ.
Καηά ηελ δηάξθεηα ηεο εγθαηάζηαζεο ζα ρξεηαζηεί λα επηιεγνχλ δηάθνξεο ξπζκίζεηο. Αξρηθά
ζηελ νζφλε «Install Type» ζα πξέπεη λα επηιεγεί ε επηινγή «Developer Edition» θαζψο
είλαη ε έθδνζε πνπ πξφθεηηαη λα ρξεζηκνπνηεζεί. ΢ηελ επφκελε νζφλε κε ηίηιν «Installer
Configuration» πξέπεη λα επηιεγεί ε ξχζκηζε «Server configuration». ΢ηελ ζπλέρεηα, ζηελ
νζφλε «Subcomponent Installation» αθήλνπκε φιεο ηηο πξνεπηιεγκέλεο επηινγέο, ελψ ζηελ
επφκελε νζφλε κε ηίηιν «Select Installation Directory» δίλεηαη ε δπλαηφηεηα επηινγήο ηνπ
θαθέινπ εγθαηάζηαζεο ηεο πιαηθφξκαο ηνπ Γηαθνκηζηή. Ζ επηινγή είλαη ειεχζεξε, αιιά γηα
ιφγνπο επθνιίαο ε πξνεπηιεγκέλε ξχζκηζε «C:\ColdFusion9» ζα ρξεζηκνπνηεζεί γηα απηέο
ηηο νδεγίεο. ΢ηελ επφκελε νζφλε κε ηίηιν «Configure Web Servers/Websites» επηιέγνπκε
ηελ επηινγή «Build-in web server», ελψ ζηελ επφκελε νζφλε κε ηίηιν «Administrator
Password» ζα πξέπεη λα πιεθηξνινγεζεί έλαο θσδηθφο δηαρεηξηζηή δπν θνξέο. ΢ηελ
Σελίδα | 92
ηειεπηαία νζφλε πξηλ απφ ηελ εγθαηάζηαζε, κε ηίηιν «Enable RDS» αθήλνπκε ηηο
πξνεπηιεγκέλεο ξπζκίζεηο θαη ζηελ ζπλέρεηα πξαγκαηνπνηείηαη ε εγθαηάζηαζε.
5.3.1.2 Ρύζκηζε ηνπ ColdFusion Server
Μεηά ηελ νινθιήξσζε ηεο εγθαηάζηαζεο, ζα ρξεηαζηεί λα γίλνπλ θάπνηεο ξπζκίζεηο ζηνλ
Γηαθνκηζηή. ΢ην ηέινο ηεο εγθαηάζηαζεο, ζα πξνζθεξζεί ε επηινγή «Launch the
Configuration Wizard in the default browser» ηελ νπνία αθήλνπκε επηιεγκέλε θαη παηάκε
ην θνπκπί «Done». Με απηήλ ηελ επηινγή, ε εγθαηάζηαζε ζα ηεξκαηηζηεί θαη ζα εθθηλήζεη
ην πξνεπηιεγκέλν πξφγξακκα πεξηήγεζεο ηνπ ζπζηήκαηνο ζην νπνίν ζα έρεη θνξησζεί έλαο
νδεγφο ξπζκίζεσλ γηα ηνλ Γηαθνκηζηή ColdFusion.΢ε πεξίπησζε πνπ δελ πξαγκαηνπνηεζεί
ην παξαπάλσ βήκα γηα θάπνην ιφγν, ε δηεχζπλζε απηνχ ηνπ νδεγνχ είλαη ε:
http://127.0.0.1:8500/CFIDE/administrator/index.cfm. ΢ηελ πξψηε νζφλε πνπ εκθαλίδεηαη
πιεθηξνινγνχκε ην θσδηθφ δηαρεηξηζηή πνπ έρνπκε δειψζεη ζηελ εγθαηάζηαζε θαη παηάκε
ην θνπκπί «Login». ΢ηελ ζπλέρεηα γίλεηαη κηα ζεηξά απφ απηφκαηεο αξρηθέο ξπζκίζεηο ζηνλ
Γηαθνκηζηή θαηά ηεο νπνίεο ζα ρξεηαζηεί λα πεξηκέλνπκε. Μεηά απφ απηέο ηηο ξπζκίζεηο, ζα
εκθαληζηεί κηα ζειίδα πνπ ζα αλαγξάθεη «Setup Complete» δειαδή φηη ε εγθαηάζηαζε ηνπ
Γηαθνκηζηή έρεη πιένλ νινθιεξσζεί. Παηψληαο ην θνπκπί «ΟΚ» ζα πξέπεη λα κεηαθεξζνχκε
ζηελ ζειίδα «Adobe ColdFusion Administrator» πνπ είλαη ε ζειίδα ηνπ δηαρεηξηζηή ηνπ
Γηαθνκηζηή, θαη εθφζνλ γίλεη απηφ, ζεκαίλεη φηη ν Γηαθνκηζηήο έρεη εγθαηαζηαζεί ζσζηά θαη
έρεη εθθηλήζεη κε επηηπρία.
5.3.1.3 Αληηγξαθή ηωλ αξρείωλ ηεο εθαξκνγήο θαη εθηέιεζε ηεο εθαξκνγήο
΢ηελ ζπλέρεηα ζα πξέπεη λα γίλεη αληηγξαθή νιφθιεξνπ ηνπ θαθέινπ «application» ν νπνίνο
πεξηέρεη ηα αξρεία ηεο εθαξκνγήο, θαη επηθφιιεζή ηνπ κέζα ζηνλ θάθειν «wwwroot» ηνπ
Γηαθνκηζηή, ν νπνίνο βξίζθεηαη ζηνλ θαηάινγν εγθαηάζηαζεο ηνπ ColdFusion. Δάλ
αθνινπζήζεθαλ νη νδεγίεο πνπ δφζεθαλ παξαπάλσ, ν θάθεινο απηφο ζα βξίζθεηαη ζηελ
δηαδξνκή: «C:\ColdFusion9\wwwroot\». Σέινο γηα λα εθηειεζηεί ε εθαξκνγή, αξθεί λα
εθθηλήζνπκε ην πξφγξακκα πεξηήγεζεο ηνπ ζπζηήκαηφο καο θαη λα πιεθηξνινγήζνπκε ηελ
δηεχζπλζε: «http://localhost:8500/application/». Απηφ αθνξά ηελ πεξίπησζε ηνπηθήο
εθηέιεζεο ηεο εθαξκνγήο, ελψ ζε πεξίπησζε πνπ ε εθαξκνγή εγθαηαζηαζεί ζε ππνινγηζηήΓηαθνκηζηή θαη ε πξφζβαζε γίλεηαη απνκαθξπζκέλα, ε δηεχζπλζε παξακέλεη ε ίδηα κε ηελ
δηαθνξά φηη ζα πξέπεη αληί ηνπ «localhost» λα πιεθηξνινγεζεί ε δηεχζπλζε ηνπ Γηαθνκηζηή
ζην δηαδίθηπν (π.ρ. www.myserver.gr). ΢ε απηήλ ηελ πεξίπησζε ε δηεχζπλζε είλαη ηεο
κνξθήο: «http://www.myserver.gr:8500/application/».
Σελίδα | 93
6
Έιεγρνο
΢ε απηήλ ηελ ελφηεηα ζα γίλεη ε αμηνιφγεζε ηνπ ζπζηήκαηνο. Θα ειεγρηεί φηη ε εθαξκνγή
δνπιεχεη ζσζηά θαη φηη φιεο νη ιεηηνπξγίεο πνπ ζεσξεηηθά πξνζθέξεη ιεηηνπξγνχλ φπσο
νξίδνληαη.
6.1 Μεζνδνινγία ειέγρνπ
Ζ αμηνιφγεζε ζα γίλεη κε ηελ βνήζεηα ελφο ζελαξίνπ ιεηηνπξγίαο. Αθνινπζψληαο ην ζελάξην
ν αλαγλψζηεο ζα κπνξέζεη λα γλσξίζεη θαη πσο κπνξεί λα ρξεζηκνπνηήζεη ηηο ιεηηνπξγίεο ηεο
εθαξκνγήο. Σν ζελάξην πεξηιακβάλεη ηα εμήο: Ο ρξήζηεο αξρηθά πεγαίλεη ζηελ δηεχζπλζε
ηεο εθαξκνγήο θαη θνξηψλεηαη ε θεληξηθή ζειίδα ηεο. Ο ρξήζηεο δηαηξέρεη ηελ ιίζηα κε ηηο
επαθέο ηνπ θαη κεηαθέξεηαη ζηελ θνξπθή ηεο ζειίδαο κε ηελ ρξήζε ηνπ θαηάιιεινπ
θνπκπηνχ. ΢ηελ ζπλέρεηα θάλεη κηα αλαδήηεζε ζηηο επαθέο ηνπ γηα λα βξεη θαη λα εκθαλίζεη
κεξηθέο πνπ ηνλ ελδηαθέξνπλ θαη επεμεξγάδεηαη ηα ζηνηρεία κίαο εμ’ απηψλ. ΢ηελ ζπλέρεηα
αλαδεηεί κηα επαθή πνπ δελ ππάξρεη θαη ηελ νπνία έπεηηα δεκηνπξγεί. Ο ρξήζηεο αλαδεηεί
θαη βξίζθεη ηελ επαθή πνπ δεκηνχξγεζε πξνεγνπκέλσο, ηελ νπνία θαη δηαγξάθεη ελψ ζηελ
ζπλέρεηα ηελ αλαδεηεί μαλά γηα λα ειέγμεη φηη δελ ππάξρεη πηα. Σέινο, ν ρξήζηεο πξνζπαζεί
λα δεκηνπξγήζεη κηα λέα επαθή ρσξίο λα δψζεη φλνκα θαη ε εθαξκνγή ηνλ εηδνπνηεί
αληίζηνηρα.
Σελίδα | 94
6.2 Αλαιπηηθή παξνπζίαζε ειέγρνπ
Σν ζελάξην μεθηλάεη κε ηνλ ρξήζηε λα πιεθηξνινγεί ηελ δηεχζπλζε ηεο εθαξκνγήο θαη ζηελ
ζπλέρεηα ε εθαξκνγή λα θνξηψλεηαη θαη λα εκθαλίδεη ηα πεξηερφκελα ηεο θεληξηθήο ηεο
ζειίδαο.
΢ηελ
πεξίπησζή
καο
ε
δηεχζπλζε
ηεο
εθαξκνγήο
είλαη
ε
http://localhost:8500/application/ εθφζνλ απνθαζίζνπκε λα δνθηκάζνπκε ηελ εθαξκνγή
ηνπηθά, απφ ηνλ Γηαθνκηζηή πνπ έρνπκε εγθαηαζηήζεη ζχκθσλα κε ηεο νδεγίεο πνπ δφζεθαλ
ζε πξνεγνχκελε ελφηεηα.
6.2.1 Φόξησζε θαη Αξρηθή Σειίδα
Ζ θεληξηθή ζειίδα ηεο εθαξκνγή θνξηψλεη θαη εκθαλίδεηαη κε ηελ κνξθή πνπ θαίλεηαη ζηελ
εηθφλα πνπ αθνινπζεί:
΢ηελ θεληξηθή ζειίδα θαίλνληαη, θάησ απφ ην ινγφηππν ηεο εθαξκνγήο, ην πεδίν αλαδήηεζεο
φπνπ ν ρξήζηεο πιεθηξνινγεί ην αληηθείκελν ηεο αλαδήηεζήο ηνπ. Ο ρξήζηεο κπνξεί λα
αλαδεηήζεη κηα επαθή, πιεθηξνινγψληαο νπνηνδήπνηε απφ ηα ζηνηρεία ηεο πνπ πηζαλφ λα
γλσξίδεη, δειαδή ην φλνκα ηεο επαθήο, ηνλ αξηζκφ ηειεθψλνπ θαη ηελ δηεχζπλζε
ειεθηξνληθνχ ηαρπδξνκείνπ. Αξρηθά ν ρξήζηεο εθηειεί κηα απιή επηζθφπεζε ηεο ιίζηαο ησλ
επαθψλ ηνπ, θπιψληαο ηα πεξηερφκελα ηηο ζειίδαο πξνο ηα θάησ, ελψ φηαλ ζειήζεη λα
Σελίδα | 95
μαλαέξζεη ζηελ θνξπθή ηεο ζειίδαο κπνξεί λα ην θάλεη παηψληαο ην θνπκπί πνπ εκθαλίδεηαη
ζηελ θάησ δεμηά γσλία ηεο ζειίδαο, ην νπνίν ηνλ κεηαθέξεη απηφκαηα ζηελ θνξπθή κε ηελ
βνήζεηα ελφο εθέ θχιηζεο πξνο ηα πάλσ. Σν θνπκπί απηφ θαίλεηαη ζηελ παξαθάησ εηθφλα:
6.2.2 Αλαδήηεζε επαθήο
΢χκθσλα κε ην ζελάξην, ν ρξήζηεο απνθαζίδεη λα αλαδεηήζεη κηα επαθή κε ην φλνκα
«maria», θαη επνκέλσο πιεθηξνινγεί ηα αληίζηνηρα γξάκκαηα. Απφ ηελ πιεθηξνιφγεζε ηνπ
πξψηνπ γξάκκαηνο, ν ρξήζηεο παίξλεη κηα πξψηε αληαπφθξηζε απφ ηελ εθαξκνγή, θαζψο
ήδε αξρίδεη λα θηιηξάξεηαη ε ιίζηα κε ηηο επαθέο πνπ εκθαλίδνληαη, ζηελ νπνία απνκέλνπλ
κφλν νη επαθέο πνπ πεξηέρνπλ ηα πιεθηξνινγεκέλα γξάκκαηα θάζε δεδνκέλε ζηηγκή. Με ηελ
νινθιήξσζε ηεο πιεθηξνιφγεζεο ηνπ νλφκαηνο «maria» ν ρξήζηεο βιέπεη κπξνζηά ηνπ ηελ
αθφινπζε νζφλε:
Ο ρξήζηεο δηαπηζηψλεη φηη έρεη θαηαρσξήζεη 3 επαθέο πνπ ην φλνκά ηνπο πεξηέρεη ην
«maria», θαη κπνξεί πιένλ λα επηθεληξσζεί ζηελ ζπγθεθξηκέλε επαθή πνπ έςαρλε. Έρεη ηελ
δπλαηφηεηα λα δεη πεξηζζφηεξεο πιεξνθνξίεο γηα ηελ επαθή πνπ ηνλ ελδηαθέξεη, παηψληαο
πάλσ ζηα ζηελ ιέμε «πεπιζζ.» πνπ ππάξρεη δίπια απφ ην φλνκα ηεο επαθήο. Δλαιιαθηηθά,
θαη εθφζνλ ε ρξήζηεο επηζπκεί λα δεη επηπιένλ ζηνηρεία θαη γηα ηηο ηξεηο επαθέο πνπ
εκθαλίζηεθαλ, κπνξεί λα παηήζεη ην θνπκπί «Enter» ηνπ πιεθηξνινγίνπ ηνπ θαη κε έλα εθέ
αλαδίπισζεο πξνο ηα θάησ, ζα εκθαληζηνχλ ηα ζηνηρεία ησλ ηξηψλ πξψησλ επαθψλ ηεο
ιίζηαο. Απηή ε δπλαηφηεηα παξέρεηαη αλά πάζα ζηηγκή ζηνλ ρξήζηε, αθφκε θαη ακέζσο κεηά
Σελίδα | 96
ηελ αξρηθή θφξησζε ηεο εθαξκνγήο. ΢ηελ εηθφλα πνπ αθνινπζεί θαίλνληαη νη επαθέο φπσο
είλαη κεηά ηελ εκθάληζε ησλ πιήξσλ ζηνηρείσλ ηνπο:
6.2.3 Δπεμεξγαζία Δπαθήο
Σελίδα | 97
΢ηελ ζπλέρεηα ν ρξήζηεο απνθαζίδεη φηη ε επαθή πνπ έςαρλε, κε ην φλνκα «Maria
Goldburg», έρεη θάπνην ιάζνο ζηνηρείν θαη ζέιεη λα ην δηνξζψζεη. Παηψληαο ινηπφλ ζην
θνπκπί «επεξ.» δίπια ζην φλνκα απηήο ηεο επαθήο, κεηαθέξεηαη ζηελ θφξκα επεμεξγαζίαο
επαθήο, ε νπνία θαίλεηαη παξαπάλσ.
Απφ ηελ νζφλε απηή, θαη αιιάδνληαο ηα δεδνκέλα πνπ επηζπκεί ζην θαηάιιειν πεδίν, κπνξεί
λα θάλεη κεηαηξνπέο ζηα ζηνηρεία ηεο επαθήο. Παηψληαο ην θνπκπί «Αποθήκεςζη &
Κλείζιμο» νη φπνηεο αιιαγέο πνπ έρεη θάλεη απνζεθεχνληαη, ελψ παηψληαο ζην θνπκπί
«Ακύπυζη» δελ απνζεθεχεηαη θακία αιιαγή θαη ν ρξήζηεο ιακβάλεη έλα κήλπκα
επηβεβαίσζεο γηα ηελ ελδερφκελε αθχξσζε. Καη ζηηο δπν πεξηπηψζεηο φκσο, φπνην θνπκπί
θαη αλ παηήζεη, ν ρξήζηεο ηειηθά κεηαθέξεηαη πίζσ ζηελ θεληξηθή ζειίδα, κε ηηο ελδερφκελεο
αιιαγέο πνπ έρεη θάλεη λα έρνπλ (ή λα κελ έρνπλ, αληίζηνηρα) ελζσκαησζεί ζηελ ιίζηα.
Δπίζεο, ν ρξήζηεο κπνξεί λα παηήζεη θαη πάλσ ζηελ ιέμε «πίζυ» πνπ θαίλεηαη ζηελ θνξπθή
ηεο θφξκαο θαη λα γπξίζεη πίζσ ζηελ θεληξηθή ζειίδα, ρσξίο λα απνζεθεπηεί θακία αιιαγή,
αιιά θαη ρσξίο θαλέλα κήλπκα επηβεβαίσζεο.
6.2.4 Γεκηνπξγία λέαο επαθήο
΢χκθσλα κε ην ζελάξην, ν ρξήζηεο ελψ βξίζθεηαη ζηελ θεληξηθή ζειίδα απνθαζίδεη λα
αλαδεηήζεη ηελ επαθή κε ην φλνκα «Πεπικλήρ». Όηαλ πιεθηξνινγεί ην φλνκα απηφ, δελ
εκθαλίδεηαη θαλέλα απνηέιεζκα, θαη ν ρξήζηεο απνθαζίδεη λα δεκηνπξγήζεη απηήλ ηελ
επαθή. Απηφ κπνξεί λα ην θάλεη κε δπν ηξφπνπο, πξψηνλ, παηψληαο απιά ην θνπκπί «Enter»
ηνπ πιεθηξνινγίνπ ηνπ ελψ βξίζθεηαη ζην πεδίν αλαδήηεζεο, θαη δεχηεξνλ παηψληαο κε ην
πνληίθη ηνπ ζηηο ιέμεηο «νέαεπαθή» πνπ βξίζθνληαη δίπια απφ ην πεδίν αλαδήηεζεο. Καη ζηηο
δχν πεξηπηψζεηο ν ρξήζηεο ζα κεηαθεξζεί ζηελ θφξκα δεκηνπξγίαο επαθήο, ε νπνία
εκθαλίδεηαη έρνληαο ήδε «γεκίζεη» ην πεδίν ηνπ νλφκαηνο κε ηα πεξηερφκελα ηνπ πεδίνπ
αλαδήηεζεο (εθφζνλ ππάξρνπλ), δειαδή ηελ ιέμε «Πεπικλήρ», φπσο θαίλεηαη θαη ζηελ
παξαθάησ εηθφλα.
Σν «εθφζνλ ππάξρνπλ» αλαθέξεηαη, θαζψο ππάξρεη θαη ε δπλαηφηεηα ν ρξήζηεο λα
κεηαθεξζεί ζηελ θφξκα λέα επαθήο αλά πάζα ζηηγκή, παηψληαο απιά ηηο ιέμεηο «νέαεπαθή»
απφ ηελ θεληξηθή ζειίδα, ρσξίο λα έρεη πιεθηξνινγήζεη θάηη ζην πεδίν αλαδήηεζεο, θαη
επνκέλσο ην πεδίν ηνπ νλφκαηνο ηεο θφξκαο ζα εκθαληζηεί θελφ.
Σελίδα | 98
΢ηελ ζπλέρεηα ν ρξήζηεο πιεθηξνινγεί ηα ζηνηρεία ηεο επαθήο, θαη θαζψο απηή ε νζφλε ηνπ
είλαη γλψξηκε απφ ηελ θφξκα επεμεξγαζίαο επαθήο, κπνξεί λα παηήζεη πάλσ ζηηο 3 επηινγέο
(«πίζυ», «Αποθήκεςζη & Κλείζιμο» θαη «Ακύπυζη») νη νπνίεο εθηεινχλ ηηο ίδηεο
ιεηηνπξγίεο κε απηέο ηεο θφξκαο επεμεξγαζίαο. Ο ρξήζηεο γεκίδεη ηα πεδία κε ηα ζηνηρεία ηηο
επαθήο θαη απνζεθεχεη ηηο αιιαγέο παηψληαο ην θνπκπί «Αποθήκεςζη & Κλείζιμο»,
γπξλψληαο ζηελ ζπλέρεηα απηφκαηα ζηελ θεληξηθή ζειίδα.
6.2.5 Γηαγξαθή Δπαθήο
Βξηζθφκελνο ζηελ θεληξηθή ζειίδα, ν ρξήζηεο κεηαληψλεη γηα ηελ δεκηνπξγία ηεο
πξνεγνχκελεο επαθήο θαη απνθαζίδεη λα ηελ εληνπίζεη θαη λα ηελ δηαγξάςεη. Απνθαζίδεη λα
ηελ αλαδεηήζεη ρξεζηκνπνηψληαο ηελ δηεχζπλζε ειεθηξνληθνχ ηαρπδξνκείνπ ηηο επαθήο
Σελίδα | 99
([email protected]), θαζψο ήηαλ ε ηειεπηαία πνπ έγξαςε θαη ηελ ζπκάηαη πην έληνλα. ΢ην
πεδίν αλαδήηεζεο πιεθηξνινγεί ηα γξάκκαηα «perikl», θαη βιέπεη φηη ε ιίζηα πιένλ πεξηέρεη
κφλν ηελ επαθή πνπ ζέιεη λα δηαγξάςεη. Παηψληαο ην θνπκπί «Enter» ηνπ πιεθηξνινγίνπ
ηνπ, εκθαλίδεη ηα ζηνηρεία ηηο επαθήο γηα λα βεβαησζεί φηη είλαη ε ζπγθεθξηκέλε πνπ ζέιεη λα
δηαγξάςεη, θαη ζηελ ζπλέρεηα παηάεη κε ην πνληίθη ηνπ πάλσ ζηελ ιέμε «διαγπαθή» πνπ
βξίζθεηαη δίπια ζην φλνκα ηεο επαθήο θαη ζην ηέινο ηεο ζεηξάο. Ζ εθαξκνγή εκθαλίδεη έλα
«παξάζπξν επηβεβαίσζεο» (alert box) γηα ηελ επηβεβαίσζε ηεο δηαγξαθήο, θαη παηψληαο ην
θνπκπί «ΟΚ» ν ρξήζηεο δηαγξάθεη ηελ επαθή θαη ε εθαξκνγή ηνλ γπξίδεη πίζσ ζηελ αξρηθή
ζειίδα, κε ηελ αλαλεσκέλε πιένλ ιίζηα επαθψλ ηνπ.
Ο ρξήζηεο γηα λα ειέγμεη φηη δηαγξάθηεθε ε επαθή, πιεθηξνινγεί ην φλνκα «Πεπικλήρ» ζην
πεδίν αλαδήηεζεο θαη δηαπηζηψλεη φηη θακία επαθή δελ εκθαλίδεηαη ζαλ απνηέιεζκα ζηελ
ιίζηα.
6.2.6 Με ζπκπιήξσζε ηνπ πεδίνπ ηνπ νλόκαηνο
Καηά ηελ ηειεπηαία πξάμε ηνπ ζελαξίνπ ιεηηνπξγίαο, ν ρξήζηεο θάλεη θιηθ κε ην πνληίθη ηνπ
ζηελ ζχλδεζε «νέαεπαθή» θαη θαηά ηελ δηάξθεηα ηεο δεκηνπξγίαο ηεο λέαο επαθήο, δελ
ζπκπιεξψλεη ηίπνηα ζην πεδίν ηεο θφξκαο πνπ αληηζηνηρεί ζην φλνκα ηεο επαθήο. Παηψληαο
ην θνπκπί «Αποθήκεςζη & Κλείζιμο», ν ρξήζηεο εηδνπνηείηαη απφ ηελ εθαξκνγή φηη πξέπεη
λα ζπκπιεξψζεη ην πεδίν νλφκαηνο κε ην αληίζηνηρν κήλπκα πνπ θαίλεηαη ζηελ παξαπάλσ
εηθφλα.
Σελίδα | 100
΢ηελ ζπλέρεηα ν ρξήζηεο πιεθηξνινγεί ζην πεδίν ηνπ νλφκαηνο ην επηζπκεηφ φλνκα ηεο λέαο
επαθήο θαη απνζεθεχεη κε επηηπρία ηελ επαθή. Σέινο, ν ρξήζηεο αλαδεηά ηελ επαθή,
πιεθηξνινγψληαο ην φλνκα ηεο ζην πεδίν αλαδήηεζεο ψζπνπ ζηελ ιίζηα επαθψλ
εκθαλίδεηαη κφλν ε επαθή πνπ δεκηνχξγεζε ηειεπηαία. Παηψληαο ηφηε ηνλ ζπλδπαζκφ ησλ
θνπκπηψλ «ALT+Enter» ηνπ πιεθηξνινγίνπ ηνπ, εκθαλίδεηαη ην παξάζπξν επηβεβαίσζεο
δηαγξαθήο, φπνπ ν ρξήζηεο επηιέγεη ηειηθά λα ηελ δηαγξάςεη. Δδψ ηειεηψλεη θαη ην ζελάξην
ιεηηνπξγίαο γηα ηνλ έιεγρν ηεο εθαξκνγήο.
Σελίδα | 101
7
Δπίινγνο
7.1 Σύλνςε θαη ζπκπεξάζκαηα
Δίλαη ζεκαληηθφ λα ηνληζηεί φηη ε εθαξκνγή απηήο ηεο πηπρηαθήο εξγαζίαο, δελ
θαηαζθεπάζηεθε κε ην ζθεπηηθφ λα γίλεη κηα πιήξεο πνιπηειή εθαξκνγή, ε νπνία ζα
δνπιεχεη απξφζθνπηα θαη ζα παξέρεη απίζηεπηεο δπλαηφηεηεο. Ο ζθνπφο ήηαλ λα γίλεη κηα
παξνπζίαζε θαη κηα ρεηξνπηαζηή εθαξκνγή ηεο ηερλνινγίαο AJAX θαη φισλ ησλ
αιιειέλδεησλ ηερλνινγηψλ πνπ ηελ απαξηίδνπλ, έηζη ψζηε λα θαηαλνεζνχλ θαη λα
παξνπζηαζηνχλ ζηελ πξάμε φζα πιενλεθηήκαηα πξνζθέξεη γηα ηηο δηαδηθηπαθέο εθαξκνγέο
θαη ηηο κειινληηθέο πινπνηήζεηο ηνπο. Ο απψηεξνο ζηφρνο ηεο πηπρηαθήο δελ ήηαλ λα δνζεί
κηα κφληκε θαη παλάθεηα ιχζε γηα φια ηα πξνβιήκαηα ησλ δηαδηθηπαθψλ ππεξεζηψλ θαη
εθαξκνγψλ αιιά λα δνζνχλ θάπνηεο λέεο ηδέεο γηα ηνλ εκπινπηηζκφ ηεο ιεηηνπξγηθφηεηάο
ηνπο θαη ηεο επρξεζηίαο πνπ πξνζθέξνπλ ζηνλ ρξήζηε. Δπίζεο έλαο άιινο ζηφρνο απηήο ηεο
εξγαζίαο ήηαλ ε απνκπζνπνίεζε ηεο πνιππινθφηεηαο ζηελ πιεπξά ηνπ Πειάηε. Ζ αλάπηπμε
εθαξκνγψλ πνπ πξνζαλαηνιίδνληαη ζηελ πιεπξά ηνπ πειάηε ζεσξείηαη αξθεηά πνιχπινθε
θάηη πνπ ζηελ πξάμε απνδεηθλχεηαη ιάζνο. Δάλ δερηνχκε ηελ θηινζνθία πνπ αλαπηχζζεηαη
γηα πινπζηφηεξεο θαη ρξεζηηθφηεξεο εθαξκνγέο, ζα πξέπεη λα αξρίζνπκε λα πηνζεηνχκε θαη
ηελ ηάζε πνπ πξνηείλεη ηελ κεηαθνξά ηνπ θφξηνπ θαη ησλ ιεηηνπξγηψλ κηαο εθαξκνγήο ζηελ
πιεπξά ηνπ Πειάηε. Με ηα ζεκεξηλά επίπεδα πνηφηεηαο θαη ηαρχηεηαο ζηελ ηερλνινγία, ν
Πειάηεο είλαη πιένλ κηα αξθεηά ζηηβαξή επέλδπζε γηα ην κέιινλ ζηελ αλάπηπμε πινχζησλ
δηαδηθηπαθψλ εθαξκνγψλ.
Σελίδα | 102
7.2 Μειινληηθέο επεθηάζεηο
Όζνλ αθνξά ηελ κειινληηθή επέθηαζε ηεο εθαξκνγήο, ζα κπνξνχζαλ λα ελζσκαησζνχλ
αξθεηέο ηδέεο έηζη ψζηε ε εθαξκνγή λα γίλεη κηα πην πιήξεο δηαδηθηπαθή εθαξκνγή. Μηα απφ
απηέο είλαη ε δπλαηφηεηα δηαηήξεζεο βάζεο δεδνκέλσλ γηα ηα δεδνκέλα ησλ επαθψλ, νη
νπνίεο ζα είλαη νξγαλσκέλεο θαη αλά ρξήζηεο, θαζψο ην ζχζηεκα ζα πεξηιακβάλεη ζχζηεκα
θξππηνγξαθεκέλεο πξφζβαζεο, θαη νη ρξήζηεο ζα ρξεζηκνπνηνχλ έλα «φλνκα ρξήζηε» θαη
έλαλ «θσδηθφ πξφζβαζεο» πνπ ζα ηνπο έρεη δνζεί γηα λα έρνπλ πξφζβαζε ζε κηα δηαδηθηπαθή
βάζε κε ηηο επαθέο ηνπο. Έηζη νη ρξήζηεο ζα κπνξνχλ λα δηαηεξνχλ έλα δηαδηθηπαθφ
θαηάινγν κε ηηο επαθέο ηνπο θαη λα έρνπλ πξφζβαζε ζε απηφλ ρξεζηκνπνηψληαο ηνλ
ινγαξηαζκφ ηνπο απφ νπνηνδήπνηε ζεκείν επηζπκνχλ.
Δπίζεο, ε εθαξκνγή ζα κπνξνχζε λα εκπινπηηζηεί κε ηελ πξνζζήθε επηπιένλ ζηνηρείσλ γηα
θάζε επαθή, φπσο δεπηεξεχνληα ηειέθσλα, δηεπζχλζεηο θαηνηθίαο θαη γξαθείνπ, εκεξνκελίεο
γελεζιίσλ, πεδίν γηα ζεκεηψζεηο θαη άιια. Με απηά ηα ζηνηρεία ε εθαξκνγή ζα κπνξνχζε λα
ελζσκαηψζεη θαη άιιεο ιεηηνπξγίεο φπσο ε εηδνπνηήζεηο γηα φζεο εκεξνκελίεο γελεζιίσλ
ησλ επαθψλ πιεζηάδνπλ, πξνζζήθε θαη δηαρείξηζε ιίζηαο κε εξγαζίεο (task-list) ηηο νπνίεο ν
ρξήζηεο ζα δηαηεξεί θαη ζα ιακβάλεη ελεκεξψζεηο, θηι. Απφ αηζζεηηθήο άπνςεο, ζα
κπνξνχζε λα ελζσκαησζεί θαη κηα επηινγή ε νπνία ζα επέηξεπε ζηνλ ρξήζηε λα επηιέγεη πην
θχιιν ζηπι (CSS) ηαηξηάδεη κε ηα γνχζηα ηνπ θαη αλαιφγσο ε εκθάληζε ηεο εθαξκνγήο ζα
πξνζαξκνδφηαλ, αιιάδνληαο ρξψκαηα, θφλην, γξακκαηνζεηξέο θαη άιια.
Σελίδα | 103
8
Παξάξηεκα: Σρεηηθέο εθαξκνγέο κε ρξήζε AJAX
΢ήκεξα, ζρεδφλ πέληε ρξφληα κεηά ηελ πξψηε εθαξκνγή ηεο ηερλνινγίαο AJAX, ππάξρνπλ
πνιιά θαη πεηπρεκέλα παξαδείγκαηα, ζηα νπνία ε εθαξκνγή ηεο ηερλνινγίαο βνήζεζε ζηελ
ιεηηνπξγηθφηεηα θαη απνδνηηθφηεηα ησλ δηαδηθηπαθψλ εθαξκνγψλ. Ζ πξψηε εηαηξία πνπ
αζρνιήζεθε ζνβαξά κε ην AJAX, ε Google, είλαη θαη απηή πνπ κέρξη ζήκεξα θάλεη ηελ πην
εθηελή ρξήζε ηνπ ζε πνιιέο εθαξκνγέο ηεο. Έλα πνιχ απιφ παξάδεηγκα είλαη ην Google
Suggest ην νπνίν εκθαλίδεηαη θάζε θνξά πνπ πιεθηξνινγνχκε θάηη γηα αλαδήηεζε ζηελ
κεραλή αλαδήηεζεο ηεο Google. Πην πνιχπινθε θαη εθηελήο ρξήζε ηνπ AJAX ζπλαληάκε
ζηελ πιαηθφξκα γηα αληαιιαγή ειεθηξνληθψλ κελπκάησλ ηεο Google, ην Gmail, ελψ κηα
απφ ηηο πξψηεο εθαξκνγέο πνπ έθαλε γλσζηή ηελ ηερλνινγία ζην θνηλφ θαη παξνπζίαδε κε
επηηπρία ηηο δπλαηφηεηέο ηεο ήηαλ ην Google Maps.
Μηα απφ ηεο πξψηεο νινθιεξσκέλεο εθαξκνγέο πνπ έθαλε πιήξε ρξήζε θαη εθκεηάιιεπζε
ηνπ AJAX ήηαλ ην AJAX Windows απφ ηελ Ajax13. Ήηαλ έλα διαδικηςακό Λειηοςπγικό
Σύζηημα (WebOS) θαηαζθεπαζκέλν πιήξσο κε AJAX ηερληθέο. Έλα πην ζχγρξνλν
παξάδεηγκα είλαη ν ηζηφηνπνο eBuddy απφ ηελ νκψλπκε εηαηξία, φπνπ είλαη
θαηαζθεπαζκέλε κηα πιήξεο εθαξκνγή ελφο δηαδηθηπαθνχ πξνγξάκκαηνο αληαιιαγήο
κελπκάησλ (web messenger). Σέινο, έλα παξάδεηγκα ρξήζεο ηνπ AJAX ζε δηαδηθηπαθή
εθαξκνγή είλαη ην Stripe Generator 2.0 απφ ηελ PopMinds, φπνπ νη ρξήζηεο κπνξνχλ λα
δεκηνπξγήζνπλ δπλακηθά, κηα ξηγέ ηαπεηζαξία γηα ηελ ηζηνζειίδα ηνπο. Παξαθάησ ζα
παξνπζηαζηνχλ ζπλνπηηθά νη πξναλαθεξζείζεο εθαξκνγέο.
Σελίδα | 104
8.1 Google Suggest
Σν Google Suggest είλαη έλα πνιχ απιφ παξάδεηγκα, ηνπ πφζν ε εθαξκνγή ηνπ AJAX ζηηο
ππάξρνπζεο εθαξκνγέο, βνήζεζε ζηνλ εκπινπηηζκφ ηεο ιεηηνπξγηθφηεηαο θαη ηεο
ακεζφηεηάο ηνπο. Βξίζθεηαη ελζσκαησκέλν ζηελ κεραλή αλαδήηεζεο ηεο Google
(http://www.google.com ). Σν Suggest δνπιεχεη ζην παξαζθήλην θαη, φηαλ ν ρξήζηεο αξρίδεη
λα πιεθηξνινγεί ηελ ιέμε-θιεηδί (keyword) πνπ ζέιεη λα αλαδεηήζεη, κε αζχγρξνλεο
αηηήζεηο πξνο ηνπο Γηαθνκηζηέο ηεο Google θάλεη κηα «πξφρεηξε» αλαδήηεζε θαη ηνπ
επηζηξέθεη σο απάληεζε ηηο ιέμεηο-θιεηδηά ησλ δέθα πην ζπρλψλ αλαδεηήζεσλ πνπ πεξηέρνπλ
απηφ πνπ έρεη πιεθηξνινγεζεί. Ζ δηαδηθαζία απηή εθηειείηαη δπλακηθά, θαζψο ν ρξήζηεο
πιεθηξνινγεί, θαη ε εθηέιεζή ηεο αξρίδεη απφ ην πξψην γξάκκα.
Έηζη ν ρξήζηεο, πξηλ αθφκα πιεθηξνινγήζεη νιφθιεξε ηελ ιέμε-θιεηδί πνπ έρεη ζην κπαιφ
ηνπ, ππάξρεη κεγάιε πηζαλφηεηα λα ηνπ έρεη πξνηαζεί ήδε νιφθιεξε θξάζε πνπ πεξηγξάθεη
αθξηβψο απηφ πνπ ςάρλεη. Όια απηά, κε βάζε πάληα ηα ζηαηηζηηθά πνπ ζπγθεληξψλεη ε
Google ζπλερψο απφ ηηο θαζεκεξηλέο αλαδεηήζεηο ησλ ρξεζηψλ ηεο κεραλήο αλαδήηεζήο
ηεο.
Με απηήλ ηελ έμππλε εθαξκνγή, ε Google θαηάθεξε λα απαιιάμεη ηνπο ρξήζηεο απφ
ρξνλνβφξεο πνιιαπιέο αλαδεηήζεηο ςάρλνληαο ηελ ζσζηή ιέμη-θιεηδί πνπ ζα ηνπο εκθαλίζεη
ηα επηζπκεηά απνηειέζκαηα, αθνχ εμ’ αξρήο πξνηείλεηαη ζηνλ ρξήζηε κηα πην πιήξεο θξάζεθιεηδί κε απηφ πνπ ςάρλεη, κε ζπλέπεηα ζε κία κφλν αλαδήηεζε λα έρεη κπξνζηά ηνπ ηα
απνηειέζκαηα πνπ αλαδεηά. Με απηφλ ηνλ ηξφπν γιηηψλεη ρξφλν ν ίδηνο ν ρξήζηεο, θαη ε
εηαηξία απαιιάζζεηαη απφ ηνλ θφξην ησλ επηπιένλ αλαδεηήζεσλ.
Σελίδα | 105
Όια απηά γίλνληαη κε κηα εθαξκνγή ε νπνία νπζηαζηηθά εθηειείηαη θαη ελζσκαηψλεηαη ζην
θνπηί αλαδήηεζεο (search box) ηεο κεραλήο, αληηθείκελν νηθείν γηα ηνλ ρξήζηε, ζηελ ίδηα
γλψξηκε ζειίδα πνπ ρξεζηκνπνηνχζε θαη πξηλ, ρσξίο λα ηνπ παξνπζηάδεηαη θάηη «μέλν», θαη
πξνπαληφο ρσξίο λα ρξεηαζηεί θάπνηα επηπιένλ ελέξγεηα, φπσο επαλαθφξησζε ηεο ζειίδαο ή
ην πάηεκα ελφο θνπκπηνχ.
8.2 Google Gmail
Σν Google Gmail (http://mail.google.com ) ήηαλ ε πξψηε πιήξεο εθαξκνγή ηεο εηαηξίαο πνπ
εθκεηαιιεπφηαλ πιήξσο ηελ ηερλνινγία AJAX γηα λα πξνζθέξεη ζηνλ ρξήζηε κηα πιήξεο
εθαξκνγή δηαρείξηζεο ησλ ειεθηξνληθψλ κελπκάησλ ηνπ ρσξίο ηα κεηνλεθηήκαηα ησλ άιισλ
παξαδνζηαθψλ εθαξκνγψλ. Με ην Gmail ν ρξήζηεο «άλνηγε» ηα εηζεξρφκελα κελχκαηα ηνπ,
έζηειλε απαληήζεηο ή ηα πξνσζνχζε ζε θίινπο ηνπ, ηα έζβελε ή ηα αξρεηνζεηνχζε, θαη φια
απηά ρσξίο λα αιιάδεη ζειίδα, ρσξίο επαλαθνξηψζεηο θαη θαζπζηεξήζεηο.
Ζ Google εκπινχηηζε ην Gmail κε πνιινχο ηξφπνπο απφ ηφηε πνπ μεθίλεζε, έρνληαο γίλεη
πιένλ κηα πιήξεο πιαηθφξκα γξαθείνπ κε ελζσκαησκέλεο εθαξκνγέο γηα ειεθηξνληθφ
εκεξνιφγην, ιίζηα εξγαζηψλ (task-list) θαη δηαρείξηζε βηβιίνπ επαθψλ. Δπίζεο ππάξρεη θαη
εξγαιείν πνπ ελζσκαηψλεη ην Google Docs γηα δηαρείξηζε θαη πξνβνιή εγγξάθσλ, θαζψο θαη
κηα πιήξε εθαξκνγή αληαιιαγήο ειεθηξνληθψλ κελπκάησλ (chat) κεηαμχ ησλ ρξεζηψλ πνπ
έρνπλ ινγαξηαζκφ ζην Gmail. Πξνρσξψληαο έλα βήκα παξαπέξα, ε Google έρεη εκπινπηίζεη
ηελ πιαηθφξκα κε θσλεηηθή ζπλνκηιία θαη πξφζθαηα θαη βίληεν-ζπλνκηιία κεηαμχ ησλ
ρξεζηψλ ηεο.
Σελίδα | 106
Απηφ πνπ είλαη ζεκαληηθφ φκσο είλαη φηη φιεο απηέο νη ιεηηνπξγίεο-εθαξκνγέο πνπ
ελζσκαηψλνληαη ζε απηήλ ηελ πιαηθφξκα ιεηηνπξγνχλ κέζα ζε κία ζειίδα, κε ρξήζε ηεο
ηερλνινγία AJAX γηα αζχγρξνλε επηθνηλσλία κε ηνλ Γηαθνκηζηή, ρσξίο λα απαηηείηαη απφ
ηνλ ρξήζηε λα πεξηκέλεη γηα επαλαθνξηψζεηο ή αιιαγέο ζειίδαο.
8.3 Google Maps
Σν Google Maps (http://maps.google.com ) ήηαλ ε εθαξκνγή πνπ έθαλε γλσζηά ζην επξχ
θνηλφ ηα πιενλεθηήκαηα θαη ηηο δπλαηφηεηεο ηεο ρξήζεο ηνπ AJAX. Ζ Google θαηαζθεχαζε
ην 2005 κηα εθαξκνγή εμεξεχλεζεο ραξηψλ δηαθνξεηηθή απφ ηηο κέρξη ηφηε πινπνηήζεηο.
Έδηλε ηελ δπλαηφηεηα ζηνλ ρξήζηε λα πεξηεγείηαη ζηνπο ράξηεο κε ηξφπν δπλακηθφ, δίλνληάο
ηνπ ηελ ςεπδαίζζεζε κηαο ζπκβαηηθήο εθαξκνγήο γηα ζηαζεξφ ππνινγηζηή. Ο ρξήζηεο
κπνξνχζε λα θηλεζεί πξνο φιεο ηηο θαηεπζχλζεηο κε ην πνληίθη ηνπ, εμεξεπλψληαο ηνλ ράξηε
θαη πεγαίλνληαο απφ ζεκείν ζε ζεκείν κε ηελ επθνιία ελφο θιηθ. Μπνξνχζε λα κεγεζχλεη ηνλ
ράξηε θαη λα δεη πεξηζζφηεξεο ιεπηνκέξεηεο, ζε βαζκφ πνπ έθηαλε κέρξη θαη ηελ εκθάληζε
ησλ παξάδξνκσλ κηα πφιεο. Παξάιιεια εκθαλίδνληαλ πιεξνθνξίεο γηα ηελ πεξηνρή πνπ είρε
κπξνζηά ηνπ, πφιεηο, ρσξηά, αμηνζέαηα, ζεκεία ελδηαθέξνληνο, εηθφλεο, θηι.
Όια απηά εθηεινχληαλ αδηάθνπα (seamlessly), κε επηθνηλσλία ζην παξαζθήλην
ρξεζηκνπνηψληαο αηηήκαηα AJAX πξνο ηνλ Γηαθνκηζηή, ρσξίο λα ελνριείηε ν ρξήζηεο, ρσξίο
λα πεξηκέλεη γηα επαλαθνξηψζεηο ζειίδσλ θαη ρσξίο λα θεχγεη απφ ηελ θεληξηθή ζειίδα ηεο
εθαξκνγήο πνπ βξίζθνληαλ φιεο νη πιεξνθνξίεο πνπ ηνλ ελδηέθεξαλ. Ο κφλνο πεξηνξηζκφο
είλαη ε ηαρχηεηα ηεο ζχλδεζεο ηνπ ρξήζηε.
Σελίδα | 107
8.4 eBuddy Web Messenger
΢ηελ ηζηνζειίδα ηνπ (http://web.ebuddy.com ) ην eBuddy πξνζθέξεη ζηνπο ρξήζηεο ηνπ ηελ
δπλαηφηεηα λα εηζαρζνχλ ζε έλαλ ή πεξηζζφηεξνπο απφ ηνπο ινγαξηαζκνχο ηνπο ζηηο
ππεξεζίεο πνπ ππνζηεξίδεη (MSN Messenger, Yahoo IM, AOL IM, ICQ, θ.α.) θαη λα
επηθνηλσλήζνπλ κε ηηο επαθέο ηνπο ζε πξαγκαηηθφ ρξφλν, ρξεζηκνπνηψληαο κφλν ηνλ
πεξηεγεηή Ηζηνχ (Web Browser) ηνπο. Οη ρξήζηεο, εθηφο ηεο αληαιιαγήο κελπκάησλ,
κπνξνχλ αθφκε λα δηαρεηξηζηνχλ ηνλ ινγαξηαζκφ ηεο εθάζηνηε ππεξεζίαο, λα δηαρεηξηζηνχλ
ηηο επαθέο ηνπο, λα δηακνξθψζνπλ ην πξνθίι ηνπο, θαη άιια.
Ζ πεξηήγεζε ζηελ ιίζηα ησλ επαθψλ, ε αληαιιαγή κελπκάησλ θαζψο θαη φιε ε εθαξκνγή,
έρεη θαηαζθεπαζηεί έηζη ψζηε λα ζπκίδεη ηηο αληίζηνηρεο «Desktop» εθαξκνγέο,
θαηαθέξλνληαο λα κηκεζεί ηελ ακεζφηεηα θαη ηελ επθνιία ηνπο. Σν eBuddy επίζεο
πξνζθέξεη ηελ επηινγή εκθάληζεο ηεο εθαξκνγήο ζε 6 δηαθνξεηηθέο γιψζζεο, ελψ έρεη
θαηαζθεπαζηεί θαη εηδηθή έθδνζε ηεο εθαξκνγήο γηα ρξήζηεο πνπ ηελ ρξεζηκνπνηνχλ απφ ην
θηλεηφ ηνπο ηειέθσλν, θαη επνκέλσο ρξεηάδνληαη κηα έθδνζε κε ρακειφηεξε ρξήζε εχξνπο
δψλεο.
Καη ζε απηήλ ηελ πεξίπησζε, ε ρξήζε ηεο αζχγρξνλεο επηθνηλσλίαο επηηξέπεη ζηελ
εθαξκνγή λα θηάλεη ζε έλα πςειφ επίπεδν επρξεζηίαο, ιεηηνπξγηθφηεηαο θαη ακεζφηεηαο, κε
ηνλ ρξήζηε λα απνιακβάλεη ηα νθέιε κηαο πιήξνπο εθαξκνγήο αληαιιαγήο κελπκάησλ απφ
ηνλ πεξηεγεηή Ηζηνχ ηνπ, ρξεζηκνπνηψληαο ηελ φπνπ θαη αλ βξίζθεηαη, απφ νπνηνδήπνηε
Σελίδα | 108
ππνινγηζηή ή ζπζθεπή κε πξφζβαζε ζην δηαδηθηχνπ θαη αλ έρεη ζηελ δηάζεζή ηνπ. Υσξίο
κεγάιεο θαζπζηεξήζεηο, πεξίπινθεο πεξηεγήζεηο ζε πνιιαπιέο ζειίδεο θαη επαλαθνξηψζεηο.
8.5 Stripe Generator 2.0
Σν
Stripe
Generator
2.0
(http://www.stripegenerator.com
)
είλαη
έλα
πνιχ
αληηπξνζσπεπηηθφ παξάδεηγκα κηαο «κνλνζέιηδεο» εθαξκνγήο, φπσο θαη νη «Έξςπνερ
Δπαθέρ» απηήο ηεο πηπρηαθή εξγαζίαο. ΢ηελ εθαξκνγή πνπ θαηαζθεχαζε ε PopMinds,
παξέρεηαη δσξεάλ ζηνπο ζρεδηαζηέο δηαδηθηχνπ κηα «γελλήηξηα» παξαγσγήο ξηγέ
ηαπεηζαξηψλ γηα ην θφλην ησλ ζειίδσλ ηνπο. Μηα πνιχ έμππλε θαη ρξήζηκε θαηαζθεπή, ε
νπνία επηηξέπεη ζηνλ ρξήζηε, κέζα απφ αξθεηέο επηινγέο θαη ξπζκίζεηο, λα δεκηνπξγήζεη ην
δηθφ ηνπ κνλαδηθφ θφλην γηα ηελ ηζηνζειίδα ηνπ, μεθηλψληαο αθφκα θαη απφ ην κεδέλ. Απφ
ηα ρξψκαηα θαη ηηο θσηνζθηάζεηο, κέρξη ηνλ αξηζκφ, ηελ ππθλφηεηα θαη ην ζηπι ησλ ξηγψλ, ε
εθαξκνγή απηή θαηαθέξλεη λα παξέρεη κηα πιεζψξα ραξαθηεξηζηηθψλ, παξακέλνληαο φκσο
παξάιιεια θαη πνιχ απιή ζηελ θαηαλφεζε θαη ηελ ρξήζε ηεο. Δπίζεο, ζηελ ίδηα ζειίδα
πξνζθέξνληαη θαη νδεγίεο ρξήζεο γηα ηελ ελζσκάησζε ησλ ηαπεηζαξηψλ πνπ
δεκηνπξγήζεθαλ ζηηο ζειίδεο ησλ ζρεδηαζηψλ-ρξεζηψλ, κε ηηο απαξαίηεηεο ξπζκίζεηο θαη
επηινγέο πνπ απαηηνχληαη.
Σελίδα | 109
8.6 ajaxWindows
Σν ajaxWindows (http://www.ajaxwindows.com/apps/windows/content/index.html ) είλαη
έλα πξσηφηππν διαδικηςακό Λειηοςπγικό Σύζηημα (WebOS), θαηαζθεπαζκέλν πιήξσο κε
ηερληθέο AJAX, ην νπνίν βάδεη πςειά ηνλ πήρε φζνλ αθνξά ηηο δπλαηφηεηεο ησλ
δηαδηθηπαθψλ εθαξκνγψλ. Ζ θαηαζθεπάζηξηα εηαηξία, Ajax13 Inc. , πξνζπάζεζε λα
κεηαθέξεη έλα κέξνο ηνπ ιεηηνπξγηθνχ ζπζηήκαηνο ησλ Windows ζε δηαδηθηπαθφ
πεξηβάιινλ, ζπλζέηνληαο κηα δηαδηθηπαθή επηθάλεηα εξγαζίαο πνπ ηα έρεη ζρεδφλ φια. Ο
ρξήζηεο έρεη ζηελ δηάζεζή ηνπ πνιιψλ εηδψλ εθαξκνγέο, πνπ αλάκεζά ηνπο πεξηιακβάλνληαη
εθαξκνγέο γξαθείνπ, φπσο ν θεηκελνγξάθνο ajaxWrite, εθαξκνγέο πνιπκέζσλ φπσο ην
πξφγξακκα αλαπαξαγσγήο κνπζηθήο ajaxTunes, κίλη βνεζεηηθέο εθαξκνγέο γηα ηελ
επηθάληα εξγαζίαο (Widgets), αθφκα θαη κηα βαζηθή έθδνζε ελφο Πίλαθα Διέγρνπ ππάξρεη
θαη πξνζθέξεη ζηνλ ρξήζηε κεξηθέο απιέο ξπζκίζεηο ηνπ ζπζηήκαηνο.
Παξφιν πνπ ε πινπνίεζε απηή απέρεη απφ ην ηέιεην, έρνληαο θάπνηα πξνβιήκαηα, φπσο
αζπκβαηφηεηαο κε θάπνηνπο πεξηεγεηέο Ηζηνχ ή θαη ζέκαηα ζπλδεζηκφηεηαο, δελ παχεη λα
είλαη κηα πνιχ αμηφινγε πξνζπάζεηα. ΢πλδπάδνληαο ζπλήζεηο θαη απιέο εθαξκνγέο,
πξνζπαζεί θαη θαηαθέξλεη λα δείμεη ηελ δχλακε κηαο πιαηθφξκαο εθαξκνγψλ AJAX,
θαηαθέξλνληαο λα ελζσκαηψζεη έλα νιφθιεξν ιεηηνπξγηθφ ζχζηεκα ζε κία ηζηνζειίδα.
Σελίδα | 110
9
Βηβιηνγξαθία
[AJAX]
 ΥΟΛΕΝΔΡ ΢ΣΖΒΔΝ (2009). ΟΓΖΓΟ΢ ΣΖ΢ AJAX. ΓΚΗΟΤΡΓΑ΢ Μ.
 WIKIPEDIA (2009). Ajax (programming)
http://en.wikipedia.org/wiki/Ajax_%28programming%29
 Jesse James Garrett (2005). Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/ideas/essays/archives/000385.php
 W3schools.com (2009). AJAX Tutorial
http://www.w3schools.com/Ajax/Default.Asp
[jQuery]
 jQuery (2009). jQuery Documentation http://docs.jquery.com/Main_Page
 WIKIPEDIA (2009). jQuery http://en.wikipedia.org/wiki/JQuery
[ColdFusion]
 Adobe (2009). ColdFusion Developer Center
http://www.adobe.com/devnet/coldfusion/
 Adobe (2009). Developing Adobe ColdFusion 9 Applications
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/index.html
 WIKIPEDIA (2009). ColdFusion http://en.wikipedia.org/wiki/ColdFusion
[JSON]
 WIKIPEDIA (2009). JSON http://en.wikipedia.org/wiki/JSON
 JSON.org (2009). Introducing JSON http://www.json.org/
Σελίδα | 111
[DOM]
 WIKIPEDIA (2009). Document Object Model
http://en.wikipedia.org/wiki/Document_Object_Model
 W3C (2009). Document Object Model (DOM) http://www.w3.org/DOM/
 W3schools.org (2009). HTML DOM Tutorial
http://www.w3schools.com/htmldom/default.asp
[MVC]
 WIKIPEDIA (2009). Model-view-controller
http://en.wikipedia.org/wiki/Model-view-controller
[XMLHttpReq  WIKIPEDIA (2009). XMLHttpRequest
uest]
http://en.wikipedia.org/wiki/XMLHttpRequest
 W3schools.org (2009). The XMLHttpRequest Object
http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp
[WebService]
 WIKIPEDIA (2009). Web service
http://en.wikipedia.org/wiki/Web_service
 W3schools (2009). Web Services Tutorial
http://www.w3schools.com/webservices/default.asp
[ΓΔΝΗΚΑ]
Σελίδα | 112
 W3C.org (2009). W3C Standards http://www.w3.org/standards/