ΣΔΥΝΟΛΟΓΗΚΟ ΔΚΠΑΗΓΔΤΣΗΚΟ ΗΓΡΤΜΑ ΚΡΖΣΖ ΥΟΛΖ ΔΦΑΡΜΟΜΔΝΖ ΠΛΖΡΟΦΟΡΗΚΖ ΚΑΗ ΠΟΛΤΜΔΩΝ
Μελέηη ζηην ηεσνολογία 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 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
Σελίδα | 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. Μπνξεί λα ζπκπεξηιεθζεί ζε κία ηζηνζειίδα απιά κε ηελ ρξήζε ηεο παξαθάησ γξακκήο θψδηθα ζήκαλζεο:
Ζ JQuery κπνξεί επίζεο λα πξνζπειαζεί, λα θνξησζεί θαη λα εθηειεζηεί κε ηνλ ίδην αθξηβψο ηξφπν πνπ κπνξεί θαη ε γιψζζα JavaScript.
Σελίδα | 27 Δπηπξνζζέησο, ε jQuery κπνξεί λα θνξησζεί ρξεζηκνπνηψληαο ηηο βηβιηνζήθεο ηεο Google γηα ην AJAX, ηηο Google AJAX Libraries API, κε ηελ ρξήζε ηνπ αθφινπζνπ θψδηθα ζήκαλζεο:
Ζ 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
χκθσλα κε ην πξφηππν 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) θαη λα γλσζηνπνηεί ηελ ζπλάξηεζε ηνπ θαινχληνο θαηά ηελ νινθιήξσζή ηεο. Ωζηφζν, απηή ε ιχζε ζπλεπάγεηαη θάπνηνπο θηλδχλνπο αζθαιείαο θαζψο θαη επηπξφζζεηεο απαηηήζεηο απφ ηελ πιεπξά ηνπ Γηαθνκηζηή. Οη πεξηεγεηέο κπνξνχλ επίζεο λα θάλνπλ ρξήζε ησλ ζηνηρείσλ «