Tympakianakis2010.Pdf (2.838Mb)
Total Page:16
File Type:pdf, Size:1020Kb
ΣΔΥΝΟΛΟΓΗΚΟ ΔΚΠΑΗΓΔΤΣΗΚΟ ΗΓΡΤΜΑ ΚΡΖΣΖ ΥΟΛΖ ΔΦΑΡΜΟΜΔΝΖ ΠΛΖΡΟΦΟΡΗΚΖ ΚΑΗ ΠΟΛΤΜΔΩΝ Μελέηη ζηην ηεσνολογία 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