Μελέτη στην Τεχνολογία WebServices μέσω JavaScript

emujabSoftware and s/w Development

Jul 2, 2012 (5 years and 3 months ago)

302 views




Σ
ΔΥΝΟΛΟΓΗΚΟ

Δ
ΚΠΑΗΓΔΤΣΗΚΟ

Η
ΓΡΤΜΑ

Κ
ΡΖΣΖ΢

΢
ΥΟΛΖ
Δ
ΦΑΡΜΟ΢ΜΔΝΖ΢

Π
ΛΖΡΟΦΟΡΗΚΖ΢ ΚΑΗ
Π
ΟΛΤΜΔ΢ΩΝ










Μελέηη ζηην ηεσνολογία
Web
S
ervices

μέζυ
JavaScript




ΠΣΤΥΗΑΚΖ

ΔΡΓΑ΢ΗΑ


ηνπ



ΤΥΜΠΑΚΙΑΝΑΚΗ ΑΠΟΣΤΟΛΟΥ











Δπιβλέπυν
Καθηγηηήρ
:

Αζαλάζηνο Μαιάκνο







Ζξ
άθιεην
,
Απξίιηνο

201
0





















(Τπνγξαθή)


...................................

ΤΥΜΠΑΚΙΑΝΑΚΗΣ ΑΠΟΣΤΟΛΟΣ

Πηπρηνχρνο Σερλνιφγνο Μεραληθφο Δθαξκνζκέλεο Πιεξνθνξηθήο θαη Πνιπκέζσλ


©
2010



All

rights

reserved








Πεπίλητη

΢
θνπφο ηεο
πηπρηαθήο

εξγαζίαο ήηαλ ε

κειέηε

θαη αλάπηπμε πξσηνηχπνπ ζηελ
ηερλνινγία
A
JAX

(
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 de
velopment of a prototype based on the
AJAX

technology (
Asynchronous JavaScript and XML
), which feeds of a
Web
Service
.
This technology is at a
n

early stage of development and presents an exceptional range of
applications on the Web.
AJAX

is a group of techn
iques 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 consi
sting
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

Πίνακας περιεχομένων

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


Σελίδα |
2

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

2.10

Γηαδηθηπαθέο Τπεξεζίεο (
Web Services)

................................
..............................
37

2.10.
1

Δηζαγωγηθά

................................
................................
................................
..........
37

2.10.2

Πξνδηαγξαθέο

................................
................................
................................
.....
39

2.10.3

Μνξθέο ηεο ρξήζεο

................................
................................
.............................
40

2.10.4

Με
ζνδνινγίεο ΢ρεδηαζκνύ

................................
................................
..................
41

2.10.5

Κξηηηθέο

................................
................................
................................
...............
42

2.11

Ζ πιαηθφξκα αλάπηπμεο εθαξκνγψλ
ColdFusion

................................
.................
42

2.11.1

Ση είλαη ην
ColdFusion
;

................................
................................
.......................
42

2.11.2

Γεληθή Δπηζθόπεζε

................................
................................
.............................
43

2.11.3

Αλάιπζε Δπηιεγκέλωλ Υαξαθηεξηζηηθώλ

................................
............................
46

2.11.4

Αθξωλύκηα

................................
................................
................................
..........
49

2.12

Αξρηηεθηνληθή

MVC (Model
-
View
-
Controller)

................................
....................
50

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



Σελίδα |
3

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


Σελίδα |
4

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




Σελίδα |
5

1


Δηζαγσγή

1.1

AJAX
θαη
Αζύγρξνλε

Δπηθνηλσλία

Κνηηάδνληαο πίζσ κεξηθά ρξφληα, ε θαηαζθεπή κηαο δηαδηθηπαθήο εθαξκνγήο ήηαλ
θαηαδηθαζκέλε εμ


αξρήο λα πζηεξεί ζε πνιιά ζεκεία, έλαληη ησλ εθαξκνγψλ πνπ
αλαπη
χζζνληαλ γηα

offline
” (
εθηφο ζχλδεζεο) ρξήζε ζηνπο επηηξαπέδηνπο ππνινγηζηέο
(
Desktop

applications
).
Ζ

αθζνλία ιεηηνπξγηψλ θαη ε γεληθή
πνηφηεηα
απνθξηηηθφηεηαο

(
responsiveness
) ησλ

ηειεπηαίσλ, έθαλαλ ηηο δηαδηθηπαθέο εθαξκνγέο ηδίαο πνηφηεηαο λα
θαληάδνπ
λ έλα

καθξηλφ κέιινλ.

Σν πξφβιεκα ήηαλ εκθαλέο. ΢ε πνιιέο πεξηπηψζεηο, ζρεηηθέο ζειίδεο ζε έλαλ ηζηφηνπν
(
website
)
απνηεινχληαλ απφ αξθεηφ πεξηερφκελν ην νπνίν ήηαλ θνηλφ κεηαμχ ηνπο.
Υξεζηκνπνηψληαο παξαδνζηαθέο κεζφδνπο, απη
φ ην πεξηερφκελν έπξεπε λα μαλ
α
θνξησζεί ζε
θάζε αίηεκα ηνπ Πειάηε.

Απηφ ην πξφβιεκα ήξζε λα ιχζεη ην
AJAX
.

Με ηελ ρξήζε ηνπ
AJAX
,
κηα δηαδηθηπαθή εθαξκνγή κπνξεί λα θάλεη κηα αίηεζε πξνο ηνλ
Γηαθνκηζηή, δεηψληαο κφλν ην πεξηερφκελν πνπ ρξεηάδεηαη λα αλαλεσζεί, κεηψλνληαο έηζη
δξαζηηθά
θαη ηνλ φγθν

ησλ

δεδνκέλσλ πνπ πξέπεη λα κεηαθεξζνχλ, αιιά θαη η
ν
λ ρξφλν
θφξησζεο ηνπ πεξηερνκέλνπ θαη θαηά ζπλέπεηα ηηο ζειίδαο θαη γεληθφηεξα ηεο εθαξκνγήο.

Ζ ρξήζε αζχγρξνλσλ αηηήζεσλ επηηξέπεη ζην ΢χζηεκα Γηεπαθήο
Υ
ξήζηε

(
User

Interface
)

ηνπ
πεξηεγε
ηή

Ηζηνχ

(
Web

browser
)

ηνπ Πειάηε λα είλαη πην δηαδξαζηηθφ (
interactive
)
θαη
λα αληαπνθξίλεηαη γξεγνξφηεξα ζηηο ελέξγεηε
ο ηνπ ρξήζηε. Δπηπιένλ, ζπγθεθξηκέλα

ηκήκαηα

Σελίδα |
6

ησλ ζειίδσλ κπνξνχλ λα επαλαθνξησζνχλ ρσξηζηά, αηνκηθά. Οη ηειηθνί ρξήζηεο
εχθνια

αληηιακβάλνλ
ηαη ηελ δηαθνξά, κε ηελ εθαξκνγή λα είλαη πην γξήγνξε, λα αληαπνθξίλεηαη
θαιχηεξα
, αθφκα θαη φηαλ ε
ηερλνινγία

δελ έρεη αιιάμεη απφ ηελ πιεπξά ηνπ Γηαθνκηζηή.

΢ηα πιενλεθηήκαηα απφ ηελ ρξήζε ηνπ
A
JAX

έρνπκε επίζεο ηελ κείσζε ησλ απαηηνχκελσλ
ζπλδέζεσλ πξνο

ησλ Γηαθνκηζηή, αθνχ κέξε ηνπ θψδηθα (
scripts
)
θαζψο θαη ηα θχιια ζηπι
(
style

sheets
)

πνπ

απαηηνχληα
η, ρξεηάδεηαη

λα αηηεζνχλ κία κφλν θνξά.

Σέινο, κπνξεί

λα
δηαηεξεζεί κηα θ
αηάζηαζε
ζε φιε ηελ έθηαζε

ελφο ηζηφηνπνπ
,
αθνχ ε κεηαβιεηέο ηεο
JavaScript

ζα εμ
αθνινπζνχ
λ λα ππάξρνπλ θνξησκέλεο, εθφζνλ ε θεληξηθή ζειίδα
(
container

page
)
δελ ρξεηάδεηαη

λα μαλαθνξησζεί.

1.2

Αληηθείκελν
πηπρηαθήο

΢ε απηήλ ηελ πηπρηαθή εξγαζία
κειεηάηαη

ην ζχλνιν ησλ ηερλνινγηψλ πνπ απαξηίδνπλ ην
AJAX
,
θαη ζηελ ζπλέρεηα

θαηαζθεπάδεηαη κη
α δηαδηθηπαθή εθαξκνγή ε νπνία θάλεη ρξήζε
ηεο ηερλνινγίαο απηήο γηα λα παξαρζεί κηα ιεγφκελε «
μονοζέλιδη εθαπμογή
» (
Single
-
page

Application
).
Ζ

θ
αηαζθεπή κηα ηέηνηαο εθαξκνγήο είλαη κηα ξηδνζπαζηηθή αιιαγή απφ ην
θιαζζηθφ κνηίβν ηνπ «
Αίηηζη


Απάνηηζη
» πν
π ππάξρεη ζηελ πιεηνςεθία ηνπ δηαδηθηχνπ
ζήκεξα.

Γελ απαηηεί κφλν έλα εμαηξεηηθφ ζηξψκα αθαίξεζεο
(
abstraction

layer
)

ηεο
JavaScript

φπσο ην
jQuery
,
αιιά θαζηζηά αλαγθαία θαη κηα πην πεξίπινθε αξρηηεθηνληθή
ζπζηήκαηνο
, φπσο απηή ηνπ
MVC

(
Model
-
View
-
Control
ler
)
.

Καζψο ην
AJAX

νπζηαζηηθά αλαθέξεηαη

ζε ιχζεηο
γηα

ηελ πιεπξά ηνπ Πειάηε, ε ρξήζε
κηαο

ηερλνινγίαο γηα ηελ πιεπξά ηνπ Γηαθνκηζηή
είλαη ζρεηηθά ειεχζεξε θαη φρη ηφζν κεγάιεο
ζεκαζίαο. Άιισζηε, φπσο αλαθέξζεθε θαη πξνεγνπκέλσο, νη εθαξκνγέο
AJAX

κπνξνχ
λ λα
θαηαζθεπαζηνχλ θαη ρσξίο λα αιιάμεη ε πιεπξά ηνπ Γηαθνκηζηή, θπξίσο φζνλ αθνξά ηελ
ηερλνινγία θαη ηελ αξρηηεθηνληθή

ηεο
.

Με απηφ ην ζθεπηηθφ επηιέρζεθε ε
ηερλνινγία

ColdFusion

γηα ηελ πιεπξά ηνπ Γηαθνκηζηή, ηφζν γηα ηνλ ίδην ηνλ Γηαθνκηζηή
πνπ ζα
θηιν
μελεί ηελ εθαξκνγή, φζν θαη γηα ηελ δηαδηθηπαθή ππεξεζία πνπ θαηαζθεπάζηεθε θαη
εθηειείηαη ζηελ πιεπξά ηνπ Γηαθνκηζηή γηα ηελ εμππεξέηεζε ηεο
AJAX

πιεπξάο ηνπ
Πειάηε.

΢ηα πιαίζηα ινηπφλ ηεο παξαπάλσ αξρηηεθηνληθήο,
θαηαζθεπάζηεθε

κηα
δηαδηθηπαθή

εθαξκνγή
,
νη «
Έξςπνερ Δπαθέρ
»,

ε νπνία επηηξέπεη ζηνλ ηειηθφ ρξήζηε λα απνζεθεχεη, λα
επεμεξγάδεηαη θαη λα
αλαδεηά

κηα ιίζηα επαθψλ,

ζαλ

έλα ειεθηξνληθφ βηβιίν επαθψλ
δειαδή. Ο ρξήζηεο κπνξεί λα δεκηνπξγήζεη κηα λέα επαθή, λα επεμεξγαζηεί κηα ήδε
ππάξρνπζα, λα αλαδ
εηήζεη κηα επαθή απφ ηελ ιίζηα θαη λα ηελ
πξνβάιεη
, θαη ηέινο λα
δηαγξάςεη κηα επαθή. Όιεο απηέο νη ελέξγεηεο παξνπζηάδνληαη θαη εθηεινχληαη
ζε έλα
πεξηβάιινλ κίαο κφλν
ζειίδαο, ηεο
νπνίαο ην πεξηερφκελν

ν ρξήζηεο

βιέπεη

λα αιιάδεη
αθφκα θαη νινθιεξσηηθά,
ρσξίο φκσο λα μαλαθνξηψλεηαη πνηέ

ε

πξαγκαηηθή

ζειίδα ή λα


Σελίδα |
7

κεηαθέξεηαη ζε θάπνηα άιιε
.

Όια γίλνληαη ζην παξαζθήλην, κε ηελ εθαξκνγή λα επηθνηλσλεί
κέζσ αζχγρξνλσλ αηηεκάησλ
AJAX

κε ηνλ Γηαθνκηζηή θαη λα αιιάδεη δπλακηθά ην
πεξηερφκελν ηεο ζειίδαο αλάινγα κ
ε ηελ απφθξηζε

ησλ αηηεκάησλ απηψλ, δειαδή

ησλ
ελεξγεηψλ ηνπ ρξήζηε.

Ζ επηινγή ελφο ηέηνηνπ είδνπο εθαξκνγήο έγηλε γηα δηάθνξνπο ιφγνπο.
Ο θχξηνο ιφγνο ήηαλ
φηη

ε αξρηηεθηνληθή ηεο «
μονοζέλιδηρ
» εθαξκνγήο είλαη έλαο αξθεηά ζπκπαγήο ηξφπνο
θαηαζθεπήο κηαο δ
ηαδηθηπαθήο εθαξκνγήο, γεγνλφο ην νπνίν βνεζάεη ηνλ γεληθφηεξν ζηφρν
απηήο ηεο πηπρηαθήο εξγαζίαο, πνπ δελ είλαη άιινο απφ ηελ επίδεημε ησλ δπλαηνηήησλ ηεο
ηερλνινγίαο
AJAX
, δειαδή ηε
λ πςειή πνηφηεηα ηεο

ακεζφηεηαο, ηεο ιεηηνπξγηθφηεηαο θαη
ηεο επρξεζηίαο
πνπ ιακβάλεη ν ηειηθφο ρξήζηεο κηα ηέηνηαο εθαξκνγήο.

΢ήκεξα, ε γεληθή
θηινζνθία γηα ηελ δεκηνπξγία δηαδηθηπαθψλ ππεξεζηψλ, επηβάιεη ηελ δεκηνπξγία φιν θαη
πεξηζζφηεξν πινχζησλ εθαξκνγψλ, κε κηα ηάζε πνπ ζέιεη ηηο θαιχηεξεο πξαθηηθέο πνπ
εθαξκφδνληαη ζηελ
πιεπξά ηνπ Γηαθνκηζηή, λα κεηαθέξνληαη ηψξα ζηνλ Πειάηε,
απαιιάζζνληαο

ηνλ Γηαθνκηζηή απφ αξθεηφ θφξην θαη πνιχηηκνπο πφξνπο. Καζψο ε
ηερλνινγία

πξνρσξάεη θαη ε ππνινγηζηηθή
ηζρχ

ζηελ πιεπξά ηνπ
Πειάηε

νινέλα θαη
εκπινπηίδεηαη θαη γίλεηαη αξθεηά
ηζρπξή
, ε
παξαπάλσ θηινζνθία θαη ηάζε είλαη αθφκα πνην

ηθαλφ θαη

αλαγθαίν λα εθαξκνζηεί
. Ζ εθαξκνγή «
Έξςπνερ Δπαθέρ
» αθνινπζεί απηήλ ηελ
ηάζε θαη θηινζνθία θαη ηελ εθκεηαιιεχεηαη ζην έπαθξν.

1.3

Οξγάλσζε θεηκέλνπ

Σν
Κεθάλαιο
2

εθζέηεη θαη πεξηγξάθεη αλαιπηηθά φιεο ηηο ηερλνινγίεο πνπ ζπλέβαιαλ ζηελ
δεκηνπξγία ηεο εξγαζίαο
. ΢ην
Κεθάλαιο
3

γίλεηαη κηα ζπλνπηηθή πεξηγξαθή ηεο
αξρηηεθηνληθήο ηεο εθαξκνγήο θαη πεξηγξάθνληαη αλαιπηηθά φ
ιεο νη ιεηηνπξγίεο ηεο. Σν
Κεθάλαιο
4

αλαιχεηαη ε ζρεδίαζε ηεο εθαξκνγήο κε ιεπηνκέξεηεο γηα ηελ αξρηηεθηνληθή
ησλ δχν πιεπξψλ πνπ ηελ απνηεινχλ. ΢ην
Κεθάλαιο
5

αλαιχνληαη νξηζκέλα ελδεηθηηθά
ηερληθά ζέκαηα γηα ηελ αλάπηπμε ηεο εθαξκνγήο θαη δίλνληαη πιεξν
θνξίεο γηα ην ινγηζκηθφ
πνπ ρξεζηκνπνηήζεθε θαη ηελ δηαδηθαζία εγθαηάζηαζεο ηεο εθαξκνγήο. Σν
Κεθάλαιο
6

κε
ηελ βνήζεηα ελφο ζελαξίνπ αμηνινγεί ηελ εθαξκνγή θαη απνηειεί θαη ην εγρεηξίδην ρξήζεο
ηεο. ΢ην
Κεθάλαιο
7

είλαη ν επίινγνο ηεο εθαξκνγήο θαζψο θαη
κεξηθέο ηδέεο γηα κειινληηθή
επέθηαζή ηεο.

Δθαξκνγέο

ζρεηηθέο κε ην αληηθείκελν ηεο
πηπρηαθήο εξγαζί
αο

παξνπζηάδνληαη ζην
Κεθάλαιο

8

.

Σν
Κεθάλαιο 9

απνηειεί ηελ βηβιηνγξαθία ηεο πηπρηαθήο
εξγαζίαο.


Σελίδα |
8

2


Θεσξεηηθό ππόβαζξν

Γηα ηελ αλάπηπμε ηεο εθαξκνγήο «
Έξςπνερ

Δπαθέρ
» ηεο πηπρηαθήο εξγαζίαο,
ρξεηάζηεθε λα
κειεηεζνχλ φιεο νη ηερλνινγίεο θαη νη ηερλη
θέο πνπ απνηεινχλ ην
AJAX
.
Γηα λα
θαηαζθεπαζηεί κηα νινθιεξσκέλε εθαξκνγή
AJAX
, ή
ηαλ απαξαίηεην λα αλαπηπρζεί

ε
ηερλνινγία ζηελ πιεπξά ηνπ Γηαθνκηζηή αιιά θαη ε ηερλνινγία ζηελ κεξηά ηνπ Πειάηε.
Οη
ηερλνινγίεο πνπ κειεηήζεθαλ θαη εθαξκφζηεθαλ είλαη νη εμήο
:

Γηα ηελ πιεπξά ηνπ Πειάηε:

1.

Γιψζζα πξνγξακκαηηζκνχ
JavaScript

2.

Αληηθείκελν

XMLHttpRequest

3.

Βηβιηνζήθε

ηεο

JavaScript
,

jQuery

4.

Γιψζζα

΢ήκαλζεο

HTML
(
Hypertext Markup Language
)

5.

Γιψζζα

θχιισλ

ζηπι

Cascading Style Sheets

(
CSS
)

Γηα

ηελ πιεπξά ηνπ Γηαθνκηζηή:

1.

Γιψζζ
α

΢ήκαλζεο

ColdFusion

(
C
old
F
usion

M
arkup

L
anguage
)

2.

Σερλνινγία

Γηαθνκηζηή

ColdFusion

(
ColdFusion

Server
)

3.

Μνξθφηππν

JSON

(
JavaScript Object Notation data format
)

Γηα ηελ γεληθφηεξε αλάπηπμε ηεο εθαξκνγήο, θαη θπξίσο ηεο αξρηηεθηνληθήο ηεο:

1.

Οη Τπεξεζίεο Ηζηνχ

Web Services

2.

Σν Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (
Document

Object

Model
)
ή
DOM

3.

Ζ

αξρηηεθηνληθή ινγηζκηθνχ

MVC

(
Model
-
View
-
Controller
)



Σελίδα |
9

΢ηηο παξαθάησ ελφηεηεο ζα δνζεί ιεπηνκεξή πεξηγξαθή, ζε ζεσξεηηθή βάζε, γηα ηηο
πξναλαθεξζείζεο ηερλνινγίεο.

Ζ γιψζζα
JavaSc
ript

θαζψο θαη ε γιψζζ
εο
HTML

θαη

CSS

ζεσξνχληαη γλσζηέο θαη ζα πεξηγξαθνχλ ζπλνπηηθά, ελψ επίζεο ζπλνπηηθά ζα πεξηγξαθεί θαη
ε γιψζζα
XML

ε νπνία αλήθεη ζηηο ηερλνινγίεο ηνπ αξρηθνχ ππξήλα ηνπ
AJAX

αιιά
δελ
ρξεζηκνπνηήζεθε ζε απηήλ ηελ

εξγαζία.


2.1

AJAX

(
Asy
nchronous JavaScript and XML)

2.1.1

Τη είλαη ην AJAX;

Ο φξνο

«
AJAX
»

αξρηθά δεκηνπξγήζεθε απφ ηελ ζπληνκνγξαθία ηνπ "
Asynchronous
JavaScript and XML
". Οπζηαζηηθά ην
AJAX

δελ είλαη κηα λέα ηερλνινγία, νχηε κηα λέα
γιψζζα πξνγξακκαηηζκνχ, αιιά έλαο λένο ηξφπνο ρξ
ήζεο ησλ ππαξρφλησλ ηερλνινγηψλ.
Δίλαη έλα
γθξνππ

απφ αιιειέλδεηεο ηερληθέο αλάπηπμεο ηζηνζειίδσλ, πνπ ρξεζηκνπνηνχληαη
ζηελ
πιεπξά ηνπ Πειάηε
(
client
-
side
)

γηα ηελ

δεκηνπξγία δηαδξαζηηθψλ

δηαδηθηπαθψλ

εθαξκνγψλ.


Με ην
AJAX
, νη
δηαδηθηπαθέο

εθαξκνγέο κπν
ξνχλ λα αλαθηνχλ δεδνκέλα απφ ηνλ
Γηαθνκηζηή

(
server
) αζχγρξνλα, δειαδή ζην παξαζθήλην, ρσξίο λα παξεκβαίλνπλ ζηελ
εκθάληζε θαη ηελ ζπκπεξηθνξά ηεο ππάξρνπζαο ζειίδαο. Ζ ρξήζε ησλ ηερληθψλ ηνπ
AJAX

έρεη νδεγήζεη ζε αχμεζε ησλ δηαδξαζηηθψλ ή δπλακηθψλ δηεπα
θψλ ζηηο ηζηνζειίδεο.
΢πλήζσο, ηα δεδνκέλα αλαθηψληαη ρξεζηκνπνηψληαο ην αληηθείκελν (
object
)
XMLHttpRequest
, ην νπνίν

ζα αλαιπζεί παξαθάησ.

΢ε απηφ ην ζεκείν, αμίδεη λα
επηζεκαλζεί

ην εμήο νμχκσξν. Παξά ην φλνκά ηνπ, ην
AJAX

δελ απαηηεί ηελ ρξήζε ηεο
XML

γηα ηελ ιήςε ησλ δεδνκέλσλ, θαζψο επίζεο δελ είλαη
απαξαίηεην ηα αηηήκαηα πξνο ησλ
Γηαθνκηζηή

λα είλαη αζχγρξνλα. Απηφ ζπκβαίλεη γηαηί απφ
ην 2005, πνπ αξρηθά παξνπζηάζηεθε ην
AJAX

σο ηδέα, κέρξη ζήκεξα, νη πξνγξακκαηηζηέο
δηαδηθηχνπ

ην έρνπλ ε
κπινπηίζεη κ
ε δηάθνξνπο ηξφπνπο θαη

ην έρνπλ επεθηείλεη
ελζσκαηψλνληαο

αξθεηέο

λέεο ηερλνινγίεο. Σν φλνκα φκσο έρεη παξακείλεη

ην ίδην
, θαζψο
ήηαλ απαξαίηεην έλα

δηαθξηηφ

αλαγλσξηζηηθφ γηα ηελ ρξήζε φισλ απηψλ ησλ ηερλνινγηψλ,
θάησ απφ έλα θνηλφ φξν ψζηε λα κελ ππάξρε
η ζχγρπζε.


AJAX
:
Η ηέρλε ηεο αληαιιαγήο

δεδνκέλωλ κε έλα
Γηαθνκηζηή δηαδηθηύνπ
, θαη ηεο
αιιαγήο κεξώλ κηαο
ηζηνζειίδαο, ρωξίο λα μαλα
θνξηωζεί νιόθιεξε ε ηζηνζειίδα.”


--

w3schools.com


Σελίδα |
10

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
, ην νπνίν κέρξη θαη ζήκεξα ρξεζηκνπνηείηαη απφ ζρεδφλ φινπο
ηνπο πεξ
ηεγεηέο
Γηαδηθηχνπ

(
Ιntern
et Βrowsers
) σο ην έκθπην (
native
) αληηθείκελν
XMLHttpRequest
.

Όκσο, παξά ηελ θνηλή απνδνρή θαη ηελ αλαγλψξηζε ηεο
ζπνπδαηφηεηαο

απηήο ηεο
ηερλνινγίαο, έπξεπε λα πεξάζνπλ αξθεηά ρξφληα, ψζπνπ ην 2004 πξψηε ε
Google
, λα θάλ
εη
εθη
εηακέλε ρξή
ζ
ε

ηνπ
AJAX

ζην
Gmail
, κηα ππεξεζία αληαιιαγήο ειεθηξνληθήο
αιιεινγξαθίαο
. Μέρξη ηφηε ε ρξεζηκφηεηα ησλ
HTTP

αηηήζεσλ πξνο ηνλ
Γηαθνκηζηή

ζην
παξαζθήλην
,

θαζψο θαη γεληθά νη
αζχγρξνλεο

ηερλνινγίεο
ζην δηαδίθηπν
, παξέκελαλ αξθεηά
αζαθήο θαη ε εθα
ξκνγή θαη ππνζηήξημε ηνπο απφ ηνπο
πξνγξακκαηηζηέο

ήηαλ πνιχ
πεξηνξηζκέλε. Σν 2005, ε
Google

θαη πάιη, κε ην
Google Maps
,

κηα ππεξεζία πεξηήγεζεο
ραξηψλ,

έθαλε επξέσο γλσζηφ ην
AJAX
, θαη πνιινί εξεπλεηέο θαη
πξνγξακκαηηζηέο

άξρηζαλ
λα αζρνινχληαη καδί ηνπ,

παξφιν πνπ δελ ππήξρε θαλ ζαλ φξνο ή νξηζκφο ηφηε.


"Ννλφο" ηνπ

φξνπ

«
AJAX
»

είλαη ν
Jesse James Garrett
,

Πξφεδξνο θαη ηδξπηήο ηεο εηαηξίαο
Adaptive

Path
,

o νπνίνο πξψηνο ζηνλ θφζκν, ζην άξζξν ηνπ "
Ajax: A
New Approach to
Web Applications
" ηνλ Φεβξνπάξην η
νπ 2005, έδσζε έλα φλνκα ζηελ δπλαηφηεηα πνπ
ππήξρε κε ηηο ηφηε ππάξρνπζεο ηερλνινγίεο, λα γεθπξσζεί ην θελφ κεηαμχ
Γηαθνκηζηή
(
Server
)

θαη

Πειάηε

(
Client
) κε ηελ αζχγρξνλε επηθνηλσλία κεηαμχ απηψλ.

΢ηηο 5 Απξηιίνπ ηνπ 2006,

ε δηεζλήο θνηλνπξαμία γηα ηελ
θαηνρχξσζε πξνηχπσλ ηνπ
παγθφζκηνπ ηζηνχ
WC
3

(
World

Wide

Web

Consortium
)
αλαθνίλσζε ην πξψην πξνζρέδην
Δξ.: Γηαηί έλη
ωζεο ηελ αλάγθε λα δώζεηο έλα όλνκα ζ’

απηό;

Απ.: Υξεηαδόκνπλ θάηη ζπληνκόηεξν από ην «Αζύγρξνλε
JavaScript

+
CSS

+
DOM

+
XMLHttpRequest


γηα λα ρξεζηκνπνηώ όηαλ ζπδεηνύζα απηήλ ηελ πξνζέγγηζε κε
ηνπο πειάηεο.


--

Jesse James Garrett



Σελίδα |
11

πξνδηαγξαθήο γηα ην αληηθείκελν, ζε κηα πξνζπάζεηα λα δεκηνπξγήζεη έλα επίζεκν
δηαδηθηπαθφ πξφηππν.

2.1.3

Τερλνινγίεο

Ο φξνο «
AJAX
» ήξζε λα αλαπαξαζηήζεη έλα ε
πξχ γθξνππ απφ δηαδηθηπαθέο ηερλνινγίεο νη
νπνίεο κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα λα παξέρνπλ ηα κέζα ζε κηα δηαδηθηπαθή εθαξκνγή
λα επηθνηλσλήζεη κε έλαλ Γηαθνκηζηή ζην παξαζθήλην, ρσξίο λα παξεκβαίλνπλ κε ηελ
ηξέρνπζα θαηάζηαζε ηεο ζειίδαο. ΢ην άξζξν ηνπ
φπνπ επηλφεζε ηνλ φξν «
AJAX
», ν
Jesse
James Garrett

εμεγνχζε

φηη νη απαηηνχκελεο ηερλνινγίεο ήηαλ νη εμήο:



Σελ γ
ιψζζα ζήκαλζεο
HTML

ή

ηελ

XHTML

θαη
η
ε
λ

γιψζζα θχιισλ ζηπι
CSS
,

γηα ηελ παξνπζίαζε



Σν Μνληέιν Αληηθεηκέλνπ Δγγξάθνπ (
Document

Object

Model
)
ή
DO
M
,

γηα ηελ
δπλακηθή έθζεζε ησλ δεδνκ
έλσλ θαζψο θαη ηελ αιιειεπίδξαζε

κε απηά
.



Σελ γιψζζα ζήκαλζεο
XML

θαη ηελ γιψζζα κεηαζρεκαηηζκνχ
XSLT

γηα ηελ
αληαιιαγή, ηελ δηαρείξηζε θαη πξνβνιή ησλ δεδνκέλσλ



Σν αληηθείκελν
XMLHttpRequest

γηα ηελ αζχγρξνλε επηθνηλσλί
α



Σελ γιψζζα πξνγξακκαηηζκνχ
JavaScript

ζαλ ελσηηθφ θξίθν φισλ ησλ παξαπάλσ
ηερλνινγηψλ

Έθηνηε φκσο, επήιζαλ πνιιέο
εμειίμεηο ζ
ηηο ηερλνινγίεο

πνπ ρξεζηκνπνηνχληαλ γηα ηελ
αλάπηπμε κηαο εθαξκνγήο
AJAX
,
θαζψο θαη ζηνλ θαζνξηζκφ ηνπ φξνπ
AJAX
.
Δηδηθφηεξα,
έρ
εη δηαπηζησζεί φηη:



Ζ γιψζζα
JavaScript

δελ είλαη ε κφλε γιψζζα πξνγξακκαηηζκνχ απφ ηελ πιεπξά
ηνπ Πειάηε πνπ κπνξεί λα ρξεζηκνπνηεζεί γηα ηελ αλάπηπμε κηαο εθαξκνγήο
AJAX
.

Άιιεο γιψζζεο φπσο ε
VBScript

είλαη ηθαλέο λα παξέρνπλ ηελ απαηηνχκελε
ιεηηνπξγηθφη
εηα. Παξφια απηά φκσο, ε
JavaScript

έρεη παξακείλεη ε πην δεκνθηιήο
γιψζζα

ζηνλ πξνγξακκαηηζκφ ηνπ
AJAX

θπξίσο γηα ηελ ελζσκάησζε θαη ηελ
ζπκβαηφηεηα πνπ έρεη κε ηελ πιεηνςεθία ησλ ζχγρξνλσλ πεξηεγεηψλ Ηζηνχ (
Web

Browsers
)
.



Ζ γιψζζα ζήκαλζεο
XML

δελ είλαη
απαξαίηεηε γηα ηελ αληαιιαγή δεδνκέλσλ θαη
θαηά ζπλέπεηα θαη ε γιψζζα κεηαζρεκαηηζκνχ
XSLT

δελ

είλαη

αλαγθαία γηα ηελ
δηαρείξηζε ησλ δεδνκέλσλ. ΢πρλά ρξεζηκνπνηείηαη ην κνξθφηππν
JSON

(
JavaScript

Object

Notation
)
ζαλ έλα
ελαιιαθηηθφ

πξφηππν γηα ηελ
αληαιια
γή

δεδνκέλσλ,
παξφιν πνπ θαη άιια πξφηππα, φπσο ε πξν
-
δηακνξθσκέλε
(
preformatted
)

HTML

ή
αθφκα θαη ην απιφ θείκελν, κπνξνχλ επίζεο λα ρξεζηκνπνηεζνχλ.


Σελίδα |
12

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



Σελίδα |
13

Digital

Assistants

ή
PDAs
)
θαη νζφλεο αλάγλσζεο (
Screen

Readers
)
ελδερνκέλσο λα κελ
παξέρνπλ ππνζηήξημε γηα ηηο απαηηνχκελεο ηερλνινγίεο. Αθφκε θαη νη νζφλεο αλάγλσζεο πνπ
ππνζηεξίδνπλ
AJAX
, κπνξεί λα κελ έρνπλ ηελ δπλαηφηεηα λα «δηαβάζνπλ» θαηάιιεια ην
δπλακηθά παξαγφκελν πεξηερφκε
λν. Ο κφλνο ηξφπνο γηα λα επηηξαπεί ζηνλ ρξήζηε λα
ρξεζηκνπνηήζεη ηελ εθαξκνγή, είλαη λα γπξίζνπκε

πίζσ

ζε κεζφδνπο πνπ δελ ρξεζηκνπνηνχλ
θαζφινπ ηελ
JavaScript
.

Απηφ κπνξεί λα επηηεπρζεί κφλν εθφζνλ επηβεβαησζεί φηη φιεο νη
δηαζπλδέζεηο (
links
)

θαη νη θφξ
κεο

(
forms
)
ηεο εθαξκνγήο κπνξνχλ λα απνδνζνχλ
θαηάιιεια, θαη δελ

ζα

βαζίδνληαη απνθιεηζηηθά ζηελ ρξήζε
AJAX
.

Έπεηηα
, απφ ηελ πιεπξά
ηεο
JavaScript
, ε ππνβνιή ηεο θφξκαο ζα κπνξνχζε λα ζηακαηήζεη κε ηελ εληνιή «
return

false
».

Έλαο πνιχ ζεκαληηθφο πεξηνξηζκ
φο ζηελ ρξήζε ηνπ
AJAX

έγθεηηαη ζηελ θνηλή πνιηηηθή
θαηαγσγήο (
Same

Origin

Policy
). Ζ πνιηηηθή απηή είλαη
έλα

ζεκαληηθφ ζρέδην αζθάιεηαο ην
νπνίν
ηζρχεη

γηα νξηζκέλεο γιψζζεο πξνγξακκαηηζκνχ πνπ εθηεινχληαη ζηελ πιεπξά ηνπ
Πεξηεγεηή (δειαδή ηνπ Πειάηε) φπσ
ο ε
JavaScript
. ΢πλνπηηθά, ε πνιηηηθή απηή επηηξέπεη
ζηα ηξέρνληα

θνκκάηηα θψδηθα
(
running

scripts
)

ησλ ζειίδσλ,

ηα νπνία πξνέξρνληαη απφ
ηνλ ίδην δηθηπαθφ ηφπν
, λα έρνπλ πξφζβαζε ζηηο κεηαμχ ηνπο κεζφδνπο θαη ηδηφηεηεο ρσξίο
εηδηθνχο πεξηνξηζκνχο, αιιά ην
πο απνηξέπεη λα έρνπλ πξφζβαζε ζην κεγαιχηεξν κέξνο ησλ
κεζφδσλ θαη ησλ ηδηνηήησλ θαηά κήθνο ησλ ζειίδσλ πνπ βξίζθνληαη ζε δηαθνξεηηθνχο
δηθηπαθνχο ηφπνπο.
Με βάζε ηα παξαπάλσ ινηπφλ, κεξηθέο ηερληθέο πνπ εθαξκφδνληαη ζην
AJAX

δελ επηηξέπεηαη λα ρξεζηκνπνη
εζνχλ θαηά κήθνο ησλ ηνκέσλ (
domains
),
αιιά ζα
πξέπεη λα πεξηνξηζηνχλ ζε ρξήζε κφλν θάησ απφ ηνλ ίδην ηνκέα
(
domain
).
Μηα ιχζε έξρεηαη
απφ η
ελ θνηλνπξαμία

W
3
C
, κε ηελ δηάζεζε ελφο πξνζρεδίνπ πάλσ ζην αληηθείκελν
XMLHttpRequest

ην νπνίν πξννξίδεηαη λα ηνπ ε
πηηξέςεη απηήλ ηελ ιεηηνπξγία.

Σειεηψλνληαο, πξέπεη λα ζεκεησζεί πσο
φπσο θαη

άιιεο ηερλνινγίεο ηνπ
δηαδηθηχνπ
, ην
AJAX

έρεη ην δηθφ ηνπ ζχλνιν απφ ηξσηά ζεκεία, ηα νπνία νη πξνγξακκαηηζηέο θαινχληαη
λα αληηκεησπίζνπλ. Δίλαη γεγνλφο, φηη πξνγξακκαηηζηέο κε

εμνηθείσζε ζε άιιεο ηερλνινγίεο
ηνπ δηαδηθηχνπ ζα πξέπεη λα κειεηήζνπλ πάλσ ζε λέεο κεζφδνπο θσδηθνπνίεζεο θαη
δνθηκψλ, γηα λα είλαη ζε ζέζε λα γξάςνπλ αζθαιείο
AJAX

εθαξκνγέο
.

Έλα επηπιένλ ζέκα
πνπ
πξνθχπηεη

αθνξά ην φηη νη Γηεπαθέο πνπ θάλνπλ ρξήζε ηνπ
AJAX

κπνξνχλ λα απμήζνπλ
δξακαηηθά

ηνλ αξηζκφ ησλ αηηήζεσλ
πνπ παξάγνπλ νη ρξήζηεο, πξνο ηνπο Γηαθνκηζηέο
δηαδηθηχνπ θαζψο θαη ζηηο ιεηηνπξγίεο πνπ θξχβνπλ πίζσ ηνπο, φπσο νη Βάζεηο Γεδνκέλσλ
θαη άιιεο. Απηφ κνηξαία κπνξεί λα νδεγήζεη ζε κεγαιχηεξνπο ρξφλν
πο απφθξηζεο ή/θαη
πξφζζεηεο αλάγθεο γηα επηπιένλ ή θαιχηεξν πιηθφ (
hardware
).



Σελίδα |
14

2.2

Η Γιώζζα Σήκαλζεο
HTML

Ζ γιψζζα
HTML
,
ηεο νπνίαο ε νλνκαζία πξνέξρεηαη απφ ηα αξρηθά ηνπ «
HyperText

Markup

Language
»

(
«
Γλώζζα Σήμανζηρ
Υπεπκειμένος
»), είλαη ε θπξίαξρε γιψζζα
ζ
ήκαλζεο γηα ηηο ηζηνζειίδεο. Παξέρεη ηα κέζα γηα ηελ δεκηνπξγία δνκεκέλσλ εγγξάθσλ
(
structured

documents
)
κε ηελ
ππνδήισζε κηαο

δνκηθήο ζεκαζηνινγίαο
ζε

θείκελν

φπσο
επηθεθαιίδεο, παξάγξαθνη, ιίζηεο θ.ιπ., θαζψο θαη ζε ζπλδέζεηο (
links
)
,

παξαζέζεηο (
quotes
)
θαη άιια ζηνηρεία.

Δπη
ηξέπεη ζε εηθφλεο θαη αληηθείκελα λα ελζσκαησζνχλ θαη λα

ρξεζηκνπνηεζνχλ
γηα ηελ δεκηνπξγία δηαδξαζηηθψλ θνξκψλ (
interactive

forms
). Δίλαη
γξακκέλε ζε κνξθή «ζηνηρείσλ
HTML
»

πνπ απνηεινχληαη απφ
«εηηθέηεο» (
tags
)
νη νπνίεο

πεξηβάιιν
ληαη απφ γσληαθέο αγθχιεο («
<
» θαη «
>
») θαη βξίζθνληαη εληφο ηνπ πεξηερνκέλνπ
ηεο ηζηνζειίδαο. Μπνξεί λα ζπκπεξηιακβάλεη (
include
)
ή λα θνξηψλεη θνκκάηηα θψδηθα
(
scripts
)
ζε γιψζζεο φπσο ε
JavaScript

ηα νπνία επηδξνχλ ηελ ζπκπεξηθνξά ησλ
επεμεξγαζηψλ ηεο
H
TML
,

φπσο νη Πεξηεγεηέο Ηζηνχ (
Web

Browsers
)

θαη ηα
θχιια ζηπι
CSS
, γηα ηνλ θαζνξηζκφ ηεο εκθάληζεο θαη ηεο δηάηαμεο ηνπ θεηκέλνπ θαη άιινπ πιηθνχ. Ζ
θνηλνπξαμία
W
3
C
,
ε νπνία ζπληεξεί ηα πξφηππα ηεο
HTML

θαη ησλ
CSS
, ελζαξξχλεη ηελ
ρξήζε ησλ θχιισλ ζηπι
CS
S

πάλσ ζε
ζαθή

παξνπζηαζηηθή ζήκαλζε.


2.3

Η γιώζζα θύιισλ ζηπι
CSS

Ζ
Cascading

Style

Sheets

ή

CSS

είλαη

κηα

γιψζζα

θχιισλ ζηπι, ε νπνία ρξεζηκνπνηείηαη
γηα λα πεξηγξάςεη ηελ ζεκαζηνινγία παξνπζίαζεο (δειαδή ηελ φςε θαη ηελ κνξθνπνίεζε)
ελφο εγγξάθνπ πνπ είλαη

γξακκέλν ζε κηα γιψζζα ζήκαλζεο. Ζ πην θνηλή εθαξκνγή ηεο
είλαη ε πεξηγξαθή ηνπ ζηπι ηζηνζειίδσλ πνπ είλαη γξακκέλεο ζε
γιψζζα
HTML

ή

XHTML
,
αιιά κπνξεί επίζεο λα εθαξκνζηεί ζε νπνηνδήπνηε είδνπο έγγξαθν

γξακκέλν ζε θψδηθα
XML
. Ζ

CSS

είλαη θπξίσο ζρεδηαζκ
έλε γηα λα επηηξέπεη ηνλ δηαρσξηζκφ ηνπ πεξηερνκέλνπ
ηνπ εγγξάθνπ
(
γξακκέλν ζε

HTML

ή θάπνηα παξφκνηα γιψζζα ζήκαλζεο) απφ ηελ
παξνπζίαζε ηνπ εγγξάθνπ, ζπκπεξηιακβαλνκέλσλ ησλ ζηνηρείσλ φπσο είλαη ε δηάηαμε, ηα
ρξψκαηα θαη νη γξακκαηνζεηξέο. Απηφο ν δηαρσξ
ηζκφο κπνξεί λα βειηηψζεη ηελ
πξνζβαζηκφηεηα ηνπ πεξηερνκέλνπ
, λα παξέρεη πεξηζζφηεξε επειημία θαη έιεγρν ζηνλ
πξνζδηνξηζκφ ησλ ραξαθηεξηζηηθψλ ηεο παξνπζίαζεο, λα επηηξέπεη ζε πνιιαπιέο ζειίδεο λα
κνηξάδνληαη ηελ ίδηα κνξθνπνίεζε, θαη λα κεηψζεη ηελ πνιππ
ινθφηεηα θαη ηελ επαλάιεςε
ηνπ δνκηθνχ πεξηερνκέλνπ (π.ρ. ην φηη επηηξέπεη ηνλ ζρεδηαζκφ ηζηνζειίδσλ ρσξίο ηελ ρξήζε
πηλάθσλ) .
Ζ
CSS

κπνξεί επίζεο λα επηηξέςεη ζηελ ίδηα ζειίδα ζήκαλζεο λα παξνπζηαζηεί
κε δηαθνξεηηθά ζηπι γηα δηαθνξεηηθέο κεζφδνπο απφδνζε
ο, φπσο είλαη ε απφδνζε ζε νζφλε,
ζε εθηχπσζε, ζε θσλή (φηαλ δηαβάδεηαη απφ έλα πξφγξακκα πεξηήγεζεο βαζηζκέλν ζηελ


Σελίδα |
15

νκηιία) θαη ζε ζπζθεπέο αθήο

γηα αλζξψπνπο κε πξνβιήκαηα φξαζεο βαζηζκέλεο ζην
ζχζηεκα
Braille
.

Δλψ ν ζπληάθηεο ελφο εγγξάθνπ κπνξεί ηππηθά
λα ζπλδέζεη ην έγγξαθν κε
έλα θχιιν ζηπι
CSS
,
ν αλαγλψζηεο κπνξεί λα ρξεζηκνπνηήζεη έλα δηαθνξεηηθφ θχιιν ζηπι,
ίζσο θάπνην απφ ηνλ δηθφ ηνπ ππνινγηζηή, γηα λα παξαθάκςεη απηφ πνπ ν ζπληάθηεο έρεη
νξίζεη. Ζ
CSS

πξνζδηνξίδεη ιεπηνκεξψο έλα ζχζηεκα πξνηεξαηφ
ηεηαο γηα ηνλ θαζνξηζκφ
ησλ θαλφλσλ ζηπι πνπ πξέπεη λα εθαξκνζηνχλ,
εά
λ γηα έλα ζπγθεθξηκέλν ζηνηρείν
αληηζηνηρνχλ πεξηζζφηεξνη απφ έλαο θαλφλεο.

Οη πξνδηαγξαθέο γηα ηελ γιψζζα
CSS

ηεξνχληαη απφ ηελ θνηλνπξαμία
W
3
C
. Ωο «ηχπνο δηαδηθηπαθνχ κέζνπ»
(
Internet

media

type
)
γηα ηελ
CSS

έρεη θαηαρσξεζεί λα ρξεζηκνπνηείηαη ην «
text
/
css
»
.


2.4

Η γιώζζα
JavaScript

Ζ
JavaScript

είλαη κηα αληηθεηκελνζηξαθήο γιψζζα πξνγξακκαηηζκνχ πνπ αλήθεη ζηελ
θαηεγνξία ησλ

γισζζψλ

«
ζεναπίος
» («
scripting

languages
»)
, δειαδή ησλ γισζζψλ πν
π
επηηξέπνπλ

ηνλ έιεγρν
κίαο ή πεξηζζνηέξσλ εθαξκνγψλ ινγηζκηθνχ. ΢πλήζσο νη «
scripting
»
γιψζζεο είλαη ελζσκαησκέλεο εληφο ηεο εθαξκνγήο ινγηζκηθνχ πνπ ειέγρνπλ. Ζ
JavaScript

επηηξέπεη ηελ πξνγξακκαηηζηηθή πξφζβαζε ζε αληηθείκελα πνπ πεξηέρνληαη ζε κία εθα
ξκνγή
ζηελ πιεπξά ηνπ Πειάηε θαη ζε άιινπ είδνπο εθαξκνγψλ. Υξεζηκνπνηείηαη θαηά θχξην ιφγν
κε ηελ κνξθή ηεο «
JavaScript

ζηελ πιεπξά ηνπ Πειάηε» («
client
-
side

JavaScript
»), ε
νπνία πινπνηείηαη σο έλα
ελζσκαησκέλν

εμάξηεκα (
integrated

component
)
ηνπ
πξνγξάκ
καηνο πεξηήγεζεο, επηηξέπνληαο ηελ αλάπηπμε εκπινπηηζκέλσλ δηεπαθψλ ρξήζηε
θαη δπλακηθψλ ηζηνζειίδσλ.

Ζ
JavaScript

είλαη κηα δηάιεθηνο πνπ αθνινπζεί ην πξφηππν «
ECMAScript
» θαη
ραξαθηεξίδεηαη σο κία δπλακηθή, «ραιαξήο δαθηπινγξάθεζεο» («
loose

typing
»

ή «
we
ak

typing
»
)
, βαζηζκέλεο ζε πξσηφηππν


prototype
-
based
»
)

γιψζζα κε πξψηεο
θιάζεο

ζπλαξηήζεηο
.
Ζ
JavaScript

επεξεάζηεθε απφ πνιιέο γιψζζεο θαη ζρεδηάζηεθε λα κνηάδεη κε
ηελ
Java
,
αιιά λα είλαη επθνιφηεξε ζην λα «δνπιεπηεί» απφ κε πξνγξακκαηηζηέο. Ζ
JavaScri
pt
,
παξά ην φλνκα, δελ έρεη νπζηαζηηθά θακία ζρέζε κε ηελ

γιψζζα
Java
, παξά ην
γεγνλφο φηη έρνπλ επηθαλεηαθέο νκνηφηεηεο κεηαμχ ηνπο.



Σελίδα |
16

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
)
ηεο γιψζζαο
JavaScri
pt
,
κε ην φλνκα
JScript
.
Καη νη δπν γιψζζεο
επέηξεπαλ ζηνπο πξνγξακκαηηζηέο
δηαδηθηχνπ λα δεκηνπξγνχλ ηζηνζειίδεο κε
δηαδξαζηηθφηεηα ζηελ πιεπξά ηνπ Πειάηε (
client
-
side

interactivity
)
.

Οη πεξηνξηζκέλεο
δπλαηφηεηεο

ηεο πξψηεο γεληάο απηψλ ησλ γισζζψλ,

γηα η
νλ εληνπηζκφ ησλ
ζπκβάλησλ πνπ
είραλ πξνθιεζεί απφ ηνλ ρξήζηε (
user
-
generated

events
)
θαη ηεο ηξνπνπνίεζεο ηνπ
εγγξάθνπ
HTML
, έγηλαλ ηειηθά γλσζηέο σο «
DOM

Δπιπέδος

0
» ή «
Legacy

DOM
»
(«θιεξνλνκηά
DOM
»
)
. Καλέλα αλεμάξηεην πξφηππν δελ αλαπηχρζεθε γηα ην «
DOM

Δπιπέδος

0
», αιιά πεξηγξάθηεθε ελ κέξεη ζηηο πξνδηαγξαθέο ηεο γιψζζαο
HTML
4
.

Σν «
Legacy

DOM
» είρε πεξηνξηζκνχο ζηα είδε ησλ ζηνηρείσλ (
elements
)
πνπ έδηλε
πξφζβαζε. Σα ζηνηρεία πνπ αληηπξνζψπεπαλ θφξκα, ζχλδεζε (
link
)
θαη εηθφλα
κπνξνχζαλ
λα αλαθεξζνχλ κε

κία ηεξαξρηθή νλνκαζία πνπ μεθηλνχζε απφ ην αληηθείκελν «ξίδα» (
root



Σελίδα |
17

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
». Αλ θαη νη πινπνηήζεηο
ηνπ «
Leg
acy

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

εγθαηέιεηςαλ
ηελ ππνζηήξημε γηα ηνλ δηθφ ηνπ κνληέιν «
Intermediat
e

DOM
». Ο
Internet

Explorer

ζπλερίδεη λα ππνζηεξίδεη ην δηθφ ηνπ

κνληέιν

γηα ιφγνπο ζπκβαηφηεηαο «πξνο ηα πίζσ»
(
backwards

compatibility
)
.

2.5.2.3

Σππνπνίεζε

Ζ

θνηλνπξαμία

World

Wide

Web

Consortium

(
W
3
C
),
ηδξχζεθε ην 1994 γηα ηελ πξνψζεζε
αλνηθηψλ πξνηχπσλ (
open

s
tandards
)
γηα ηνλ Παγθφζκην Γηαδηθηπαθφ Ηζηφ. Ήηαλ απηή πνπ
κάδεςε ζην ίδην ηξαπέδη ηελ
Netscape

Communications
,
ηελ
Microsoft

καδί κε

άιιεο
εηαηξίεο
γηα ηελ αλάπηπμε ελφο πξνηχπνπ γηα ηηο γιψζζεο πξνγξακκαηηζκνχ ησλ πεξηεγεηψλ,

Σελίδα |
18

ην νπνίν νλνκάζηεθε «
ECMASc
ript
»
.
Ζ πξψηε έθδνζε ηνπ πξνηχπνπ δεκνζηεχηεθε ην
1997. Αθνινχζεζαλ εθδφζεηο ηεο γιψζζαο
JavaScript

θαη ηεο
JScript

νη νπνίεο
ελζσκάησζαλ ην πξφηππν «
ECMAScript
»

γηα κεγαιχηεξε ζπκβαηφηεηα, αλεμάξηεηα ηνπ
πξνγξάκκαηνο πεξηήγεζεο.

Μεηά ηελ θπθινθνξία ηνπ π
ξνηχπνπ «
ECMAScript
», ε
W
3
C

άξρηζε ηηο εξγαζίεο γηα έλα
η
π
πνπνηεκέλν κνληέιν
DOM
.

Σν αξρηθφ πξφηππν κνληέινπ
DOM
, γλσζηφ σο «
DOM

Δπίπεδος 1
», πξνηάζεθε απφ ηελ
W
3
C

ζηα ηέιε ηνπ

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

ηεο
W
3
C

απνιάκβαλαλ

πνιχ θαιήο
ππνζηήξημεο απφ η
α

θνηλά πξνγξάκκαηα πεξηήγεζεο πνπ ήηαλ «ζπκκνξθσκέλα» κε ην
πξφηππν «
ECMAScript
», ζπκπεξηιακβαλνκέλσλ ησλ
Internet

Explorer

6

(2001),
Opera
,
Safari

θαη φισλ ησλ πεξηεγεηψλ πνπ ζηεξίδνληαη ζηελ κεραλή
Gecko

ηεο
M
ozilla

(
φπσο ν
Firefox

θαη ν

Camino
).

2.5.3

Δθαξκνγέο

ζηα πξνγξάκκαηα Πεξηήγεζεο Ιζηνύ

Έλαο πεξηεγεηήο Ηζηνχ δελ είλαη ππνρξεσκέλνο λα ρξεζηκνπνηεί ην κνληέιν
DOM

πξνθεηκέλνπ λα απεηθνλίζεη
(
render
)
έλα έγγξαθν
HTML
.

Ωζηφζν, ην κνληέιν
DOM

απαηηείηαη απφ ηελ γιψ
ζζα
JavaScript

φηαλ πξφθεηηαη λα επηζεσξήζεη (
inspect
)
,

ή λα
ηξνπνπνηήζεη, δπλακηθά κηα ηζηνζειίδα. Με άιια ιφγηα, ην «
Document

Object

Model
»
είλαη ν ηξφπνο πνπ ε
JavaScript

βιέπεη ηελ πεξηερφκελε
HTML

ζειίδα ηεο θαη ηελ
θαηάζηαζε (
state
)

ηνπ πξνγξάκκαηνο
πεξηήγεζεο.



Σελίδα |
19

2.5.4

Υινπνηήζεηο

Γεδνκέλνπ

φηη ην κνληέιν
DOM

ππνζηεξίδεη πινήγεζε ζε νπνηαδήπνηε
θαηεχζπλζε

(π.ρ.,
ηνπ «παηέξα» θαη ηνπ πξνεγνχκελνπ «αδεξθνχ») θαη επηηξέπεη απζαίξεηεο ηξνπνπνηήζεηο,
κηα πινπνίεζε πξέπεη ηνπιάρηζηνλ λα απνζεθεχεη ζηελ κλήκε
(
buffe
r
)
ην έγγξαθν ην νπνίν
έρεη «δηαβαζηεί» κέρξη
ηφηε
, ή έζησ θάπνηα αλαιπκέλε (
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
)

Γηεπαθέο Αλάπηπμεο Δθαξκνγψλ
(
API
s
)
πνπ

εθζέηνπλ πινπνηήζεηο ηνπ κνληέινπ
DOM
:



JAXP

(
Java

API

γηα Γηεξγαζία

(
Processing
)

θψδηθα
XML
)
είλαη κηα
API

γηα ηελ
πξφζβαζε παξφρσ
λ ηνπ κνληέινπ
DOM

Δλαιιαθηηθέο βηβιηνζήθεο
XML

πνπ βαζίδνληαη ζε δεληξηθή δνκή θαη δελ ππνζηεξίδνπλ ην
κνληέιν
DOM
:



VTD
-
XML

(είλαη κηα βηβιηνζήθε
Java

ε νπνία πξνζθέξεη ελαιιαθηηθή πξνβνιή ησλ
εγγξάθσλ
XML
,
βαζηζκέλε ζε δέληξν)




Σελίδα |
20

2.6

Τν
Α
ληηθείκελν
XMLHttpReq
uest

2.6.1

Τη είλαη ην
XMLHttpRequest
;

Σν
XMLHttpRequest

είλαη κηα
Γ
ηεπαθή
Α
λάπηπμεο
Δ
θαξκνγψλ (
Application

Programming

Interface

ή
API
)
ηνπ κνληέινπ
DOM

(
Document

Object

Model
)
. Μπνξεί
λα ρξεζηκνπνηεζεί κέζα ζε κηα γιψζζα πξνγξακκαηηζκνχ ελφο Πεξηεγεηή
Γηαδηθη
χνπ
, φπσο
ε
JavaScript
,
γηα λα ζηείιεη έλα αίηεκα
HTTP

(
Hypertext

Tran
s
fer

Protocol
)
ή
HTTPS

(
HTTP

Secure
)
απεπζείαο ζε έλαλ Γηαθνκηζηή δηαδηθηχνπ θαη λα θνξηψζεη ηα δεδνκέλα
απ
άληεζήο

ηνπ Γηαθνκηζηή
απεπζείαο πίζσ ζηελ γιψζζα. Απφ ηελ ζηηγκή πνπ ηα δεδνκέ
λα
βξεζνχλ κέζα ζηελ γιψζζα, είλαη δηαζέζηκα ηφζν σο έλα
XML

(
eXtensible

Markup

Language
)
έγγξαθν, αλ ε απάληεζε είρε έγθπξε ζήκαλζε
XML
, θαη σο
«
απλό κείμενο
»
(
plain

text
)
.

Σα δεδνκέλα
XML

κπνξνχλ λα ρξεζηκνπνηεζνχλ γηα λα
πξνζαξκνζηεί (λα
επεμεξγαζηεί, λ
α παξαπνηεζεί)

ην ηξέρνλ ελεξγφ έγγξαθν

ζην παξάζπξν ηνπ Πεξηεγεηή,
ρσξίο λα απαηηείηαη απφ ηνλ Πειάηε λα θνξηψζεη κηα θαηλνχξγηα έθδνζε ηνπ εγγξάθνπ η
εο
ηζηνζειίδαο. Δπηπξφζζεηα,

ηα δεδνκέλα ζε
«
απιφ θείκελν
»

κπνξνχλ λα αμηνινγεζνχλ εληφο
ηεο γιψζζαο πξνγ
ξακκαηηζκνχ θαη λα πξνζαξκφζνπλ θαη απηά ην έγγξαθν. Γηα παξάδεηγκα,
εάλ ρξεζηκνπνηείηαη ε γιψζζα
JavaScript
,
ην
«
απιφ θείκελν
»

κπνξεί λα δηακνξθσζεί σο
JSON

(
JavaScript

Object

Notation
)
απφ ηνλ Γηαθνκηζηή
δηαδηθηχνπ

θαη λα

αμηνινγεζεί
απφ ηελ
JavaScript

γ
ηα λα δεκηνπξγεζεί έλα αληηθείκελν δεδνκέλσλ

(
data

object
)

γηα ρξήζε

πάλσ ζην ηξέρνλ κνληέιν
DOM
.

2.6.2

Η Σρέζε ηνπ
XMLHttpRequest

κε ην

AJAX

Σν αληηθείκελν
XMLHttpRequest

παίδεη ίζσο ηνλ πην ζεκαληηθφ ξφιν ζηελ δηαδηθηπαθή
ηερληθή αλάπηπμεο
AJAX
.
Γηα λα ιεθζεί

ή λα ζη
αιεί

πιεξνθνξία απφ/πξνο κηα βάζε
δεδνκέλσλ ή έλα αξρείν ζηνλ Γηαθνκηζηή

ρξεζηκνπνηψληαο παξαδνζηαθή
JavaScript
,
έπξεπε λα γίλνπλ ηα παξαθάησ βήκαηα:



Αξρηθά ζα έπξεπε λα δεκηνπξγεζεί κηα
HTML

θφξκα



Ο ρξήζηεο ζα έπξεπε λα παηήζεη ην θνπκπί «
Υποβολή
»

(
Submit

button
)
γηα λα
ζηείιεη/ιάβεη ηελ πιεξνθνξία

Δξ.: Σν
AJAX

είλαη απ
ιά έλα άιιν όλνκα γηα ην

XMLHttpRequest
;

Απ.:

Όρη. Σν
XMLHttpRequest

είλαη κόλν έλα κέξνο ηνπ
AJAX
. Σν
XMLHttpRequest

είλαη ην ηερληθό εμάξηεκα (
component
) πνπ θάλεη ηελ αζύγρξνλε
επηθνηλωλία κε ηελ Γηαθνκηζηή δπλαηή.


--

Jesse James Garrett



Σελίδα |
21



΢ηελ ζπλέρεηα λα πεξηκέλεη ηνλ Γηαθνκηζηή λα απαληήζεη



Καη ηειηθά ζα θνξησλφηαλ κηα λέα ζειίδα κε ηα απνηειέζκαηα.

Λφγσ ηνπ φηη ν Γηαθνκηζηήο επέζηξεθε κηα λέα ζειίδα θάζε θνξά πνπ ν ρξήζηεο ππέβαιε
κηα
λέα
είζνδν

(
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, ε νπνία θαη επέηξεπε ηελ πξφζβαζε, κέζσ ηνπ ζπζηήκαηνο
(
framewo
rk
)
ActiveX
, ζηελ δηεπαθή
IXMLHTTPRequest

ρξεζηκνπνηψληαο ην
«
πεπικάλςμμα
» (
wrapper
)
XMLHTTP

ηεο βηβιηνζήθεο.

Ζ κε θεξδνζθνπηθή νξγάλσζε
Mozilla Foundation

αλέπηπμε θαη ελζσκάησζε κηα δηεπαθή
κε ην φλνκα
nslXMLHttpRequest

κέζα ζηελ «
μησανή διάηαξηρ
» (
layou
t engine
)
Gecko
.
Απηή ε δηεπαθή είρε κνληεινπνηεζεί έηζη ψζηε ε ιεηηνπξγία ηεο λα πιεζηάδεη φζν ην δπλαηφλ
πεξηζζφηεξν ζε απηήλ ηεο δηεπαθήο
IXMLHTTPRequest

ηεο
Microsoft
. Ζ
Mozilla

δεκηνχξγεζε έλα «
πεπικάλςμμα
» (
wrapper
) γηα ηελ ρξήζε απηήο ηεο δηεπαθήο κ
έζσ ελφο
αληηθεηκέλνπ ηεο
JavaScript
, ην νπνίν νλφκαζε
XMLHttpRequest
. Σν αληηθείκελν
XMLHttpRequest

έγηλε πξνζηηφ κε ηελ θπθινθνξία ηεο έθδνζεο
0.6

ηεο κεραλήο
Gecko
,
ζηηο 6 Γεθεκβξίνπ ηνπ 2000, δελ ήηαλ φκσο πιήξσο ιεηηνπξγηθφ. Γηα λα γίλεη, ρξεηάζηεθε
π
εξίπνπ ελάκηζε ρξφλνο, έσο φηνπ ε
Mozilla

λα θπθινθφξεζε ηελ έθδνζε
1.0

ηεο κεραλήο

Σελίδα |
2
2

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 Conso
rtium

(
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
), ε ππνζηήξημε γηα αηηήκαηα κεηαμχ δηθηπαθψλ ηφπσλ θαη ε κεηαρείξηζε ησλ ξ
νψλ

ησλ
b
ytes

(
byte streams
). Ζ ηειεπηαία αλαζεψξεζε ζηελ πξνδηαγξαθή ηνπ «
Δπίπεδος 2
»
έγηλε ζηηο 30 ΢επηεκβξίνπ ηνπ 2008, ελψ εμαθνινπζεί λα ραξαθηεξίδεηαη σο πξνζρέδην «ελ
εμειίμεη».

Ζ
Microsoft

πξφζζεζε ην αλαγλσξηζηηθφ (
identifier
) ηνπ αληηθεηκέλνπ
XMLHttpReque
st

ζηηο δηθέο ηεο γιψζζεο πξνγξακκαηηζκνχ κε ηνλ πεξηεγεηή
Internet Explorer 7.0
, ν νπνίνο
βγήθε ζηελ θπθινθνξία ηνλ Οθηψβξην ηνπ 2006, έμη κήλεο κεηά ην αξρηθφ πξνζρέδην ηεο
πξνδηαγξαθήο ηνπ
XMLHttpRequest
. Δδψ πξέπεη λα επηζεκαλζεί ην πξφβιεκα πνπ ππάξρε
η
κε ηηο πξνγελέζηεξεο εθδφζεηο ηνπ πεξηεγεηή
Internet Explorer
,
5.0
,
5.5

θαη
6
. ΢ηηο εθδφζεηο
5

θαη
6

δελ θαζνξίδεηαη ην αλαγλσξηζηηθφ γηα ην αληηθείκελν
XMLHttpRequest

κέζα ζηηο
γιψζζεο πξνγξακκαηηζκνχ ηνπο, θαζψο ην αλαγλσξηζηηθφ δελ είρε γίλεη πξφηππν
ηνλ θαηξφ
πνπ απηέο νη εθδφζεηο θπθινθφξεζαλ. Γηα λα επηηεπρζεί ε ζπκβαηφηεηα «πξνο ηα πίζσ»
(
backward compatibility
) ζα πξέπεη λα γίλεη κηα αλίρλεπζή αληηθεηκέλνπ (
object detection
)


Σελίδα |
23

γηα ηελ δηαπίζησζε εάλ ην αλαγλσξηζηηθφ ηνπ
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+
)


Σελίδα |
24



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

κε ηελ αίηεζε. Ζ πξψηε παξάκεηξνο απηήο ηεο κεζφδνπ είλαη ην φλνκα
ηηο ζπκβνινζεηξάο θεηκέλνπ ηεο «
κεθαλίδαρ
». Ζ
δεχηεξε παξάκεηξνο είλαη ε ηηκή ηεο
ζπκβνινζεηξάο θεηκέλνπ. Ζ κέζνδνο απηή πξέπεη λα θιεζεί γηα θάζε «
κεθαλίδα
» πνπ
ρξεηάδεηαη λα ζηαιεί κε ηελ αίηεζε. Οπνηεζδήπνηε «
κεθαλίδερ
» πνπ ζπλάπηνληαη εδψ ζα


Σελίδα |
25

αθαηξεζνχλ ηελ επφκελε θνξά πνπ ζα θιεζεί ε κέζνδνο «
ope
n
» ζηελ πεξίπησζε ελφο
ζπκκνξθσκέλνπ κε ηελ
W3C

«
ανηιππόζυπος σπήζηη
».

2.6.4.3

Η Μέζνδνο «
send
»

Γηα λα ζηαιεί κηα αίηεζε
HTTP
, πξέπεη λα θιεζεί ε κέζνδνο «
send
» ηνπ αληηθεηκέλνπ
XMLHttpRequest
. Απηή ε κέζνδνο δέρεηαη κία κφλν παξάκεηξν ε νπνία πεξηέρεη ην
πεξηερφκ
ελν πνπ πξέπεη λα ζηαιζεί κε ηελ αίηεζε. Ζ παξάκεηξνο απηή κπνξεί λα παξαιεθζεί
εάλ δελ ππάξρεη πεξηερφκελν πνπ πξέπεη λα ζηαιζεί. Σν πξνζρέδην ηεο
W3C

αλαθέξεη φηη ε
παξάκεηξνο απηή κπνξεί λα είλαη νπνηνπδήπνηε ηχπνπ πνπ είλαη δηαζέζηκνο ζηελ γιψζζα
πξνγξ
ακκαηηζκνχ, αξθεί λα κπνξεί λα κεηαηξαπεί ζε ζπκβνινζεηξά θεηκέλνπ, κε εμαίξεζε
ην αληηθείκελν εγγξάθνπ
DOM

(
DOM document
). Δάλ έλαο «
ανηιππόζυπορ σπήζηη
» δελ
κπνξέζεη λα κεηαηξέςεη απηήλ ηελ παξάκεηξν ζε ζπκβνινζεηξά, ηφηε ε παξάκεηξνο πξέπεη
λα αγλνεζεί.


Δάλ ε παξάκεηξνο είλαη έλα αληηθείκελν εγγξάθνπ
DOM
, ν «
ανηιππόζυπορ σπήζηη
» πξέπεη
λα δηαζθαιίζεη φηη ην έγγξαθν έρεη κεηαηξαπεί ζε
«
νξζψο
-
κνξθνπνηεκέλν
»

(
well
-
formed
)
θψδηθα
XML
, ρξεζηκνπνηψληαο ηελ θσδηθνπνίεζε πνπ ππνδεηθλχεηαη απφ ηελ ηδηφηεηα
(
prop
erty
) «
inputEncoding
» ηνπ αληηθεηκέλνπ ηνπ εγγξάθνπ. Δάλ ε θεθαιίδα
αίηεζεο

«
Content
-
Type
» δελ έρεη πξνζηεζεί αθφκα κέζσ ηεο κεζφδνπ «
setRequestHeader
», ζα
πξέπεη λα πξνζηεζεί απηφκαηα απφ
έλαλ
ζπκκνξθσκέλν

«
ανηιππόζυπο σπήζηη