ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

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

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1144 - ΤΕΧΝΙΚΗ AJAX

1
© Copyright 2014, Εθνικό και Καποδιστριακό Πανεπιστήμιο Αθηνών, Π. Ε. Πετράκης.
Η έντυπη, ηλεκτρονική και γενικά κατά οποιοδήποτε τρόπο αναπαραγωγή, δημοσίευση
ή χρησιμοποίηση όλου ή μέρους του υλικού έργου αυτού, απαγορεύεται χωρίς την
έγγραφη έγκριση του κατόχου των πνευματικών δικαιωμάτων του έργου.

2
Το παρόν έντυπο αποτελεί το εκπαιδευτικό υλικό του μαθήματος “Τεχνική AJAX”.
Αποτελεί απαραίτητο συμπλήρωμα του ηλεκτρονικού υλικού που βρίσκεται στην
πλατφόρμα και αναπόσπαστο κομμάτι της εκπαιδευτικής διαδικασίας.
Η πρώτη διδακτική ενότητα παρουσιάζει στους εκπαιδευόμενους τη σημασία και την
εφαρμογή τεχνικών Ajax στη δημιουργία ενός website. Επίσης, θα μάθουν τη
δημιουργία αντικειμένου XMLHTTPRequest, τον τρόπο με τον οποίο γίνεται η συνομιλία
με τον διακομιστή, καθώς και να χρησιμοποιούν πολύ καλά τη συνάρτηση callback.
Με τη δεύτερη διδακτική ενότητα, οι εκπαιδευόμενοι θα μάθουν πώς χτίζουμε μια
εφαρμογή Ajax και πώς η εφαρμογή αυτή επιστρέφει δεδομένα. Επίσης, θα
μελετήσουμε πολλά παραδείγματα της τεχνικής Ajax χρησιμοποιώντας και
συνδυάζοντας όλες τις γλώσσες προγραμματισμού που μάθαμε.
Τη συγγραφή του συγκεκριμένου εκπαιδευτικού υλικού πραγματοποίησε ο κ. Βαγγέλης
Στελλάτος, εξωτερικός συνεργάτης του Προγράμματος Συμπληρωματικής εξ
Αποστάσεως Εκπαίδευσης του Εθνικού και Καποδιστριακού Πανεπιστημίου Αθηνών.

3
 ΠΕΡΙΕΧΟΜΕΝΑ

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΚΑΙ ΤΡΟΠΟΣ ΛΕΙΤΟΥΡΓΙΑΣ ΣΤΗΝ AJAX ........................... 5

ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ................................................................................................. 7
ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ AJAX ............................................................................. 8
ΥΠΟΕΝΟΤΗΤΑ 2. ΙΔΙΟΤΗΤΑ RESPONSETEXT ΚΑΙ RESPONSEXML ..................................... 12
ΥΠΟΕΝΟΤΗΤΑ 3. ΕΦΑΡΜΟΓΕΣ AJAX ............................................................................... 22
ΣΥΝΟΨΗ .............................................................................................................................. 31

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 2. ΕΠΙΣΤΡΟΦΗ ΔΕΔΟΜΕΝΩΝ ΚΑΙ Ο ΤΡΟΠΟΣ ΠΟΥ ΧΤΙΖΟΥΜΕ ΜΙΑ

ΕΦΑΡΜΟΓΗ AJAX ................................................................................................................... 33
ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ............................................................................................... 35
ΥΠΟΕΝΟΤΗΤΑ 1. ΠΡΟΧΩΡΗΜΕΝΗ ΑΠΟΣΤΟΛΗ ΔΕΔΟΜΕΝΩΝ ΜΕ GET POST .............. 36
ΥΠΟΕΝΟΤΗΤΑ 2. ΧΕΙΡΙΣΜΟΣ ΠΟΛΛΩΝ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ΚΑΙ ΕΜΦΑΝΙΣΗΣ ΣΕ
ΔΙΑΦΟΡΕΤΙΚΑ ΣΗΜΕΙΑ ΤΗΣ ΣΕΛΙΔΑΣ ................................................................................ 43
ΥΠΟΕΝΟΤΗΤΑ 3. ΔΗΜΙΟΥΡΓΙΑ ΠΟΛΛΑΠΛΩΝ ΑΝΤΙΚΕΙΜΕΝΩΝ XMLHTTPREQUEST ...... 55
ΣΥΝΟΨΗ .............................................................................................................................. 60

ΒΙΒΛΙΟΓΡΑΦΙΑ ................................................................................................................... 61

4
 ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

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

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1144 - ΤΕΧΝΙΚΗ AJAX

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΚΑΙ ΤΡΟΠΟΣ ΛΕΙΤΟΥΡΓΙΑΣ ΣΤΗΝ

AJAX

5
6
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα αναλυθούν η χρησιμότητα και η λειτουργία της AJAX
καθώς και η σημασία του αντικειμένου XMLHttpRequest
Στη δεύτερη υποενότητα θα αναλυθούν οι δύο βασικοί τρόποι απόκρισης του server
responseXML και responseText.
Στην τρίτη υποενότητα θα παρουσιαστούν και θα αναλυθούν εφαρμογές AJAX.

7
 ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ AJAX

Η AJAX δεν είναι μία γλώσσα προγραμματισμού όπως είναι για παράδειγμα η
JavaScript. Η AJAX έρχεται στην ουσία να αλλάξει τον τρόπο επικοινωνίας μεταξύ του
Browser και του server, και κατά επέκταση τον τρόπο που αλληλεπιδρά ο χρήστης με
τον server.
Ο κλασσικός τρόπος επικοινωνίας είναι να φορτώνεται μία σελίδα όταν ο χρήστης
πατήσει κάποιο button ή κάποιο link κτλ. Στο διάστημα που μεσολαβεί μεταξύ δύο
διαδοχικών επιλογών του χρήστη δεν υπάρχει επικοινωνία browser και server.
Έτσι λοιπόν, όταν ο χρήστης κάνει μία επιλογή και το αποτέλεσμα της επιλογής είναι να
αλλάξει ένα μόνο μέρος της σελίδας τότε θα πρέπει ο Browser να στείλει αίτημα στο
server και ο server να στείλει εκ νέου τη σελίδα, όπως για παράδειγμα όταν
συμπληρώνουμε μία φόρμα σε μια ιστοσελίδα.
Αυτό έχει σαν αποτέλεσμα να επιβαρύνεται η σύνδεση με μεταφορά άχρηστων
δεδομένων και φυσικά οι σελίδες να γίνονται πιο αργές. Επίσης από την άλλη μεριά ο
χρόνος μεταξύ δύο διαδοχικών επιλογών του χρήστη παραμένει ανεκμετάλλευτος.
Πρέπει λοιπόν όση ώρα, για παράδειγμα, συμπληρώνει ο χρήστης τα στοιχεία να
υπάρχει δυνατότητα να γίνονται και άλλες διεργασίες παράλληλα, όπως ακριβώς
γίνεται σε ένα λειτουργικό σύστημα. Αυτή την εμπειρία την έχουμε σχεδόν όλοι δοκιμάσει
κατά την εισαγωγή στοιχείων αναζήτησης της google.
Όταν εισαγάγουμε στοιχεία τότε θα παρατηρήσουμε ότι σε κάθε χαρακτήρα που
πληκτρολογούμε η σελίδα της google ανανεώνει το συγκεκριμένο κομμάτι της σελίδας
προσπαθώντας να μαντέψει αυτό που θέλουμε να εισαγάγουμε και ταυτόχρονα
προετοιμάζει τα αντίστοιχα αποτελέσματα. Δηλαδή η μηχανή της Google δεν περιμένει
το πάτημα του button του χρήστη, αφού έχει συμπληρώσει τη φόρμα αναζήτησης.
Στην ουσία με τη βοήθεια της AJAX δημιουργούμε μία ασύγχρονη επικοινωνία μεταξύ
server και browser και εκμεταλλευόμαστε τον χρόνο όπου η σύνδεση είναι παγωμένη.
Με την AJAX μπορούμε και στέλνουμε αιτήματα στον Browser χωρίς αυτό να σημαίνει
ότι τα αιτήματα θα συνοδεύονται από μία πλήρη ανανέωση της οθόνης ή έστω και
αλλαγή ενός τμήματός της.

8
 Εικόνα 1. Ασύγχρονη επικοινωνία AJAX

Πηγή: w3schools.com

Τα βήματα της επικοινωνίας με την τεχνική AJAX είναι τα εξής:

1. Όταν συμβαίνει ένα γεγονός, και γενικά όταν κάτι αλλάζει, τότε δημιουργείται το
αντικείμενο XMLHttpRequest. Αφού δημιουργηθεί το αντικείμενο τότε ο browser
στέλνει το XMLHttpRequest στο server.
2. Ο server επεξεργάζεται το αντικείμενο XMLHttpRequest και δημιουργεί την
απάντηση στο αίτημα XMLHttpRequest,
3. Ο Browser λαμβάνει το αίτημα και επεξεργάζεται τα επιστρεφόμενα
αποτελέσματα. Σε κάποιες περιπτώσεις ανανεώνει το περιεχόμενο του.

1.1 Λειτουργίες της AJAX

Η AJAX (Ansynchronous Javasript and XML) συνδυάζει τις παρακάτω τεχνολογίες:

¾ Html και CSS. Εφόσον η AJAX αφορά στην εμφάνιση και την ασύγχρονη
επικοινωνία client-server χρησιμοποιεί Html καθώς και CSS για το στυλ των
ιστοσελίδων. Επίσης αντί για Html κάποιες φορές χρησιμοποιεί και XHTML η οποία
στην ουσία είναι μία πιο αυστηρά ορισμένη από την πλευρά της σύνταξης Html.
¾ DOM. Το μοντέλο DOM χρησιμοποιείται σε πολλές περιπτώσεις.
¾ XML για ανταλλαγή δεδομένων με το server. Το κείμενο XML είναι ένα τρόπος
γραφής δεδομένων που χρησιμοποιεί ετικέτες όπως και η Html και Θα αναλυθεί
παρακάτω.
9
¾ XMLHttpRequest για ασύγχρονα αιτήματα προς το server. Στην ουσία η AJAX αυτό
που μας προσφέρει ως τεχνική είναι η διαχείριση των αιτημάτων προς το server.
¾ JavaScript η οποία συνδυάζει όλα τα παραπάνω.

1.2 Αντικείμενο XMLHTTPRequest

Το αντικείμενο XMLHTTPRequest είναι στην ουσία ένα αντικείμενο JavaScript που

περιγράφει το αίτημα προς τον server για να επιτευχθεί η ασύγχρονη επικοινωνία που
υποστηρίζει η Ajax.

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

Για να δημιουργήσουμε ένα αντικείμενο XMLHTTPRequest για τον Internet Explorer τότε
πρέπει να γράψουμε:

Υπάρχουν κάποιες εκδόσεις του Internet Explorer οι οποίες χρησιμοποιούν μία άλλη
έκδοση XML και είναι απαραίτητη η παρακάτω σύνταξη:

Για να δημιουργήσουμε αντικείμενο XMLHTTPRequest στους υπόλοιπους browsers

γράφουμε:

Για να δημιουργήσουμε ένα αντικείμενο XMLHTTPRequest κάνουμε τα παρακάτω

βήματα:
1. Ορίζουμε μία μεταβλητή για να εκχωρήσουμε σε αυτή το αντικείμενο της αίτησης
προς τον server.
Παράδειγμα:

2. Γράφουμε συνθήκη για τη δημιουργία του αντικειμένου του αιτήματος για να

συμπεριλάβουμε όλες τις περιπτώσεις σε σχέση με τον Browser.

10
Το πρώτο if αφορά στην περίπτωση των περισσότερων Browser ενώ το δεύτερο if
αφορά στην περίπτωση του Internet Explorer παλιότερες από την έκδοση 7.
Και στις δύο περιπτώσεις λοιπόν θα δημιουργηθεί ένα καινούργιο αντικείμενο-αίτημα
προς τον server
3. Γράφουμε κώδικα σχετικά με το τι θέλουμε να πετύχουμε με το συγκεκριμένο αίτημα.

1.3 Μέθοδοι και ιδιότητες του αντικειμένου XMLHttpRequest

Αποστολή αιτήματος στον server: Αφού δημιουργήσουμε το αντικείμενο

XMLHttpRequest(); για να στείλουμε το αίτημα θα κάνουμε χρήση δύο βασικών
μεθόδων: open() και send().
Μέθοδος οpen
Η μέθοδος open έχει στη σειρά τρία ορίσματα:

Σαν μέθοδο θα επιλέξουμε τη μέθοδο get ή τη μέθοδοι post. Γενικά η μέθοδος GET είναι
πιο γρήγορη και πιο απλή από τη μέθοδο POST και μπορεί να χρησιμοποιηθεί στην
πλειονότητα των περιπτώσεων. Από την άλλη μεριά η μέθοδος POST είναι
καταλληλότερη για αποστολή δεδομένων μεγαλύτερης χωρητικότητας καθώς δεν έχει
περιορισμούς. Επίσης στην περίπτωση που θέλουμε να στείλουμε με το αίτημα
ευαίσθητα δεδομένα χρησιμοποιούμε περισσότερο τη μέθοδο POST η οποία είναι
ασφαλέστερη.
Στη θέση URL θα δώσουμε τη θέση του αρχείου στο server.
Στο τρίτο όρισμα θα εισαγάγουμε τιμή true(προεπιλογή) για ασύγχρονη επικοινωνία και
false για σύγχρονη.

11
Με τη μέθοδο send στέλνουμε την αίτηση στο server. Η μέθοδος send δέχεται μόνο ένα
όρισμα.
Μέθοδος abort
Η μέθοδος abort() σταματάει την τρέχουσα αίτηση.
Η μέθοδος getAllResponseHeaders() επιστρέφει όλες τα Headers ως string
Η μέθοδος getResponseHeader(x) επιστρέφει το Header x ως string.

1.3.1 Βασικές ιδιότητες του αντικειμένου XMLHTTPRequest

Ιδιότητα readyState
Η ιδιότητα readyState είναι πάρα πολύ σημαντική για την AJAX γιατί «κρατάει την
κατάσταση της αίτησης και παίρνει τις παρακάτω τιμές:
readyState =0 το αίτημα δεν έχει αρχικοποιηθεί.
readyState =1 εδραιώθηκε η σύνδεση με τον server
readyState =2 το αίτημα παραλήφθηκε από τον server
readyState =3 επεξεργασία αιτήματος
readyState =4 το αίτημα έχει ολοκληρωθεί και είναι έτοιμη η απάντηση στο αίτημα.

Ιδιότητα onreadystatechange
Η ιδιότητα onreadystatechange αποθηκεύει μία συνάρτηση η οποία θα κληθεί
αυτόματα σε περίπτωση που αλλάξει κάποια τιμή της readyState του αντικειμένου.
Ιδιότητα status
Η ιδιότητα status παίρνει τις παρακάτω τιμές
Status=200 σημαίνει ότι το http που επιστρέφει ο server είναι εντάξει.
Status=404 σημαίνει ότι δεν βρέθηκε η σελίδα.

ΥΠΟΕΝΟΤΗΤΑ 2. ΙΔΙΟΤΗΤΑ RESPONSETEXT ΚΑΙ RESPONSEXML

Ορίζει ότι τα δεδομένα που θα επιστραφούν ως απάντηση του αιτήματος θα είναι σε

μορφή αλφαριθμητικής string κειμένου.

2.1 Δημιουργία κώδικα με επιστροφή δεδομένων με την ιδιότητα

responseText

Θα δημιουργήσουμε κώδικα που θα κάνει τα εξής:

12
1. Θα δημιουργεί αντικείμενο XMLHTTPRequest.
2. Θα αλλάζει στην ίδια σελίδα το κείμενο με περιεχόμενο από ένα txt file με το
πάτημα ενός button.
3. Επίσης θα εμφανίζει τις τιμές για τις readyState και status

2.1.1 Κώδικας Html

Θα ξεκινήσουμε την εφαρμογή AJAX με κώδικα Html. Αρχικά θα γράψουμε:

Σχόλιο
Μέχρι εδώ έχουμε γράψει κώδικα για τη βασική δομή μιας σελίδας Html.
Στο στοιχείο head θα γράψουμε το ακόλουθο κώδικα JavaScript

Σχόλιο
Η συνάρτηση loadtext θα καλείται με ένα onclick event handler. Δηλαδή όταν ο
χρήστης πατήσει το πλήκτρο του mouse.

Σχόλιο
ορίζουμε τη μεταβλητή req για να εκχωρήσουμε το αποτέλεσμα της δημιουργίας
αντικειμένου XMLHttpRequest.

Σχόλιο
Αν ισχύει ότι υπάρχει το αντικείμενο window.XMLHttpRequest τότε στη μεταβλητή req θα
εκχωρηθεί η τιμή από XMLHttpRequest. Δηλαδή σε περίπτωση που δεν χρησιμοποιείται
internet Explorer προηγούμενης έκδοσης από 7.

13
Σχόλιο
Σε διαφορετική περίπτωση στη μεταβλητή req θα εκχωρηθεί το ActiveXObject.

Σχόλιο
Στο σημείο αυτό του κώδικα ορίζουμε το onreadystatechange event στο οποίο
αποθηκεύεται η συνάρτηση που ορίζεται παρακάτω. Η συνάρτηση θα εκτελεστεί
αυτόματα σε περίπτωση που αλλάξει η τιμή της readyState. Παρακάτω ορίζουμε τη
συνάρτηση που θα εκτελεστεί. Η συγκεκριμένη συνάρτηση που ενεργοποιείται όταν
αλλάξει η τιμή readyState λέγεται συνάρτηση callback.

Σχόλιο
Αν συμβαίνει η τιμή της req.readyState να είναι ίση με 4 και η τιμή της req.status ίση με
200, δηλαδή αν όλα έχουν πάει καλά, τότε θα εκτελεστούν οι παρακάτω γραμμές
κώδικα.

Σχόλιο
Σε περίπτωση που κληθεί η συνάρτηση θα αλλάξει το κείμενο στα παραπάνω divs

Σχόλιο
Καλούμε τη μέθοδο open με ορίσματα την επιλογή μεθόδου GET, το url του ajax.txt και
true για ασύγχρονη μετάδοση δεδομένων.

14
Στη θέση url δεν γράψαμε κάποια διαδρομή διότι το αρχείο ajax.txt υπάρχει μέσα στον
ίδιο φάκελο με τη σελίδα html. Μπορούμε εναλλακτικά να γράψουμε και
req.open(“GET”,“http://localhost/ajax5/ajax.txt”,true);
Αν γράψουμε το παραπάνω url σημαίνει ότι το αρχείο ajax.txt θα βρίσκεται στο φάκελο
htdocs ajax5 εφόσον η localhost του server αντιστοιχεί στο φάκελο htdocs.

Με τη μέθοδο send θα στείλουμε το αίτημα.

Παράδειγμα 1. Ιδιότητα responseText

Κώδικας: Ιδιότητα responseText

Εικόνα Browser: Ιδιότητα responseText

15
2.2 Ιδιότητα responseXML

Ορίζει ότι τα δεδομένα που θα επιστραφούν ως απάντηση του αιτήματος θα είναι σε

μορφή κειμένου XML.

2.2.1 Αρχείο XML

Τα αρχεία XML είναι αρχεία τα οποία περιέχουν δεδομένα σε δενδροειδή μορφή

χρησιμοποιώντας ετικέτες όπως και η Html. Για να γράψουμε ένα XML αρχείο θα
χρειαστούμε έναν Text editor όπως είναι το Notepad++.
Στην αρχή θα γράψουμε την παρακάτω ετικέτα για να δηλώσουμε την έναρξη του
αρχείου.

Για να γράψουμε δεδομένα γράφουμε πρώτα μία ετικέτα η οποία θεωρείται η ρίζα του
δένδρου και κλείνουμε με την ίδια ετικέτα.
Για παράδειγμα να θέλουμε να γράψουμε σε XML τα στοιχεία χρηστών τότε γράφουμε
τις ετικέτες και ανάμεσα θα γράψουμε τα στοιχεία αυτά για κάθε χρήστη ξεχωριστά.

16
Επίσης στις ετικέτες μπορούμε να προσθέσουμε και ιδιότητες, αλλά δεν θα επεκταθούμε
περισσότερο.

2.3 Μέθοδος εξόρυξης δεδομένων από αρχείο XML που βρίσκεται στο
server με τεχνική AJAX

Δημιουργούμε ένα XML σε text editor όπως είναι το Notepad++ για windows ή το
Wrangler για Mac αρχείο με στοιχεία χρηστών ενός Website όπως το παρακάτω. Θα
γράψουμε με λατινικούς χαρακτήρες για να αποφύγουμε την περίπτωση
ασυμβατότητας. Θα ξεκινήσουμε με την ετικέτα της xml και στη συνέχεια θα
συμπεριλάβουμε όλα τα στοιχεία μεταξύ των ετικετών και .
Στη συνέχεια για το κάθε στοιχείο του χρήστη θα το εισαγάγουμε εντός αντίστοιχων
ετικετών.

17
Αφού ολοκληρώσουμε την εισαγωγή των στοιχείων αποθηκεύουμε το αρχείο σε μορφή
xml με προέκταση .xml και σε φάκελο που έχουμε δημιουργήσει εντός του htdocs.
Στη συνέχεια θα γράψουμε κώδικα που να δημιουργεί αντικείμενο XMLHTTPRequest το
οποίο θα είναι υπεύθυνο για την επικοινωνία με το sever και έπειτα θα γράψουμε
κώδικα που θα δημιουργεί μία callback function η οποία μόλις αλλάξει η κατάσταση
θα κληθεί για να εξορύξει δεδομένα από το XML αρχείο με κριτήριο το αντίστοιχο tag.
Αρχείο html

Σχόλιο
Μέχρι αυτό το σημείο έχουμε δημιουργήσει τη δομή της Html σελίδας και στο στοιχείο
head της Html έχουμε ξεκινήσει την ετικέτα scipt για κώδικα Javascript

18
Σχόλιο
Δημιουργία αντικειμένου XMLHTTPRequest για όλους του browser εκτός του Internet
Explorer, έκδoση προηγούμενη από την 7.

Δημιουργία αντικειμένου XMLHTTPRequest για Internet Explorer έκδοση προηγούμενη

από την 7.

Σχόλιο
Ορίζουμε τη συνάρτηση callback

Σχόλιο
Εκχωρούμε στη μεταβλητή xmlDoc την απόκριση από την ιδιότητα responseXML του
αντικειμένου req δηλαδή του XMLHTTPRequest.

Δημιουργούμε μία κενή string με όνομα txt όπου θα αποθηκευθεί ο πίνακας με τα

αποτελέσματα που θα γυρίσει ο server.

Σχόλιο
Εκχωρούμε στη μεταβλητή x το αποτέλεσμα της μεθόδου getElementsByTagName

19
Σχόλιο
Χρησιμοποιούμε ένα μετρητή ώστε να εμφανίσει το αποτέλεσμα της αίτησης
αναζήτησης προς το server. Σε κάθε εκτέλεση του βρόχου θα προστίθεται και ένα
ακόμα childNode του DOM αντικειμένου.
Η τιμή childNodes[0] είναι γιατί το childnode είναι κείμενο.

Σχόλιο
Αφού ολοκληρωθεί ο βρόχος και τα αποτελέσματα είναι έτοιμα τότε θα εμφανιστούν
στη θέση του κειμένου του πίνακα που ορίζεται από το div1.

20
Παράδειγμα 2. Ιδιότητα responseXML

Κώδικας: Ιδιότητα responseXML

Εικόνα Browser: Ιδιότητα responseXML

21
 ΥΠΟΕΝΟΤΗΤΑ 3. ΕΦΑΡΜΟΓΕΣ AJAX

Σε αυτή την υποενότητα θα δούμε τις εφαρμογές AJAX με τη δημιουργία δύο quiz.

3.1 Ταυτόχρονη επικοινωνία με το server κατά την πληκτρολόγηση ενός

πεδίου φόρμας

Θα δείξουμε πώς μπορούμε να έχουμε αλληλεπίδραση στην επικοινωνία Browser και

Server κατά την πληκτρολόγηση ενός πεδίου.
Γι’ αυτόν το λόγο θα δημιουργήσουμε δύο quiz ερωτήσεων.

3.1.1 Δημιουργία Quiz 1

Στο πρώτο quiz θα εμφανιστεί μία ερώτηση γνώσεων. Κατά την πληκτρολόγηση της
απάντησης από το χρήστη θα εμφανίζεται ταυτόχρονα ένας προς έναν οι χαρακτήρες.
Μόλις στο πεδίο συμπληρωθεί η απάντηση τότε χωρίς ο χρήστης να πατήσει κάποιο
button θα εμφανιστεί κατάλληλο μήνυμα ότι δόθηκε η σωστή απάντηση.
Για να το πετύχουμε αυτό θα χρειαστεί να δημιουργήσουμε μία σελίδα με onkeyup
event handler έτσι ώστε κάθε φορά που ο χρήστης θα γράφει κάποιο χαρακτήρα στη
φόρμα θα πυροδοτείται μία συνάρτηση η οποία στη συνέχεια θα πυροδοτεί με τη σειρά
της μία συνάρτηση callback. Η συνάρτηση callback θα δημιουργεί αντικείμενο
XMLHTTPRequest και θα περνάει μία παράμετρο μαζί με την τιμή της σε αρχείο php που
βρίσκεται στο φάκελο htdocs του εικονικού server.
Αφού ο server θα ελέγχει αν η απάντηση είναι η σωστή θα στέλνει πίσω στη σελίδα
κατάλληλο μήνυμα.
Αρχικά θα γράψουμε κώδικα για τη δομή της Html και θα δημιουργήσουμε την ετικέτα
έναρξης του script:

Έπειτα θα δημιουργήσουμε μία συνάρτηση για να πυροδοτείται κάθε φορά που ο

χρήστης θα εισαγάγει κάποιο χαρακτήρα. Επίσης θα βάλουμε μία συνθήκη με if για να

22
περιγράψουμε τι θα γίνει στην περίπτωση όπου το μήκος της αλφαριθμητικής string
είναι ίσο με μηδέν. Στην περίπτωση αυτή το div που θα μας εμφανίζει τους χαρακτήρες
που έχει πληκτρολογήσει ο χρήστης θα παραμένει κενό. Μέχρι να πληκτρολογήσει ο
χρήστης κάποιο χαρακτήρα δεν συντρέχει λόγος για δημιουργία αντικείμενου
XMLHttpRequest.

Στη συνέχεια θα περιγράψουμε στον κώδικα μας τι θα γίνει στην περίπτωση όπου ο
χρήστης πληκτρολογήσει κάποιο χαρακτήρα. Τότε θα γράψουμε την κλασική συνθήκη
για τα αντικείμενα XMLHttpRequest.

Έπειτα θα δημιουργήσουμε τη συνάρτηση callback που θα ενεργοποιείται κάθε φορά

όπου η ιδιότητα onreadystatechange του αντικειμένου xmlhttp αλλάζει τιμή.

Σε περίπτωση όπου όλα έχουν πάει καλά εκχωρούμε το αποτέλεσμα από την
ανταπόκριση του server σε αντίστοιχη innerHTML για να αλλάξει η αλφαριθμητική που
εμφανίζει τους χαρακτήρες που πληκτρολόγησε ο χρήστης.

Στη συνέχεια θα γράψουμε τις μεθόδους open και send για να στείλουμε το αίτημα στο
server. Σαν ορίσματα στη μέθοδο open θα επιλέξουμε τη μέθοδο GET ως πρώτο
23
όρισμα και το επόμενο όρισμα θα γράψουμε το quiz2.php περνώντας ταυτόχρονα την
παράμετρο q μαζί με τη λέξη word και κλείνουμε άγκιστρα και τις ετικέτες τέλους για
script και head.

Τέλος, θα γράψουμε style για το στοιχείο border και θα γράψουμε τον κώδικα για να
εμφανίζεται η φόρμα με το onkey event handler και το div στο οποίο θα αλλάζει το
περιεχόμενο η απόκριση του server xmlhttp.responseText.
Στη συνέχεια θα γράψουμε το PHP script.
Στο php script θα γράψουμε για να έχουμε πρόσβαση στο στοιχείο
το οποίο είναι το περιεχόμενο της φόρμας. Στη συνέχεια θα γράψουμε
μία συνθήκη για να εμφανιστεί κατάλληλο μήνυμα όταν η αλφαριθμητική string που έχει
εισαγάγει ο χρήστης έχει γίνει ίση με την απάντηση.

24
Παράδειγμα 3. Quiz1

Κώδικας: Quiz1

Εικόνα Browser: Quiz1

25
3.1.2 Δημιουργία Quiz 2

Στο quiz2 θα υπάρχει στο PHP script ένας αριθμός και κάθε φορά που θα πληκτρολογεί
ο χρήστης έναν αριθμό τότε θα εμφανίζεται άμεσα μήνυμα όπου θα πληροφορεί το
χρήστη αν ο αριθμός που έχει εισαγάγει στο πεδίο είναι μεγαλύτερος ή μικρότερος από
τον ζητούμενο.
Για να το πετύχουμε αυτό θα χρησιμοποιήσουμε τον ίδιο κώδικα με το quiz1 για την Html
σελίδα. Θα γράψουμε διαφορετικό κώδικα για το PHP script.
Ξεκινώντας το PHP script θα ορίσουμε και θα εκχωρήσουμε στη μεταβλητή $r την τιμή
239. Δηλαδή αυτός θα είναι και ο αριθμός αναζήτησης. Στη συνέχεια θα έχουμε
πρόσβαση στην παράμετρο q η οποία θα εκχωρηθεί στη μεταβλητή $q.

Στη συνέχεια θα γράψουμε μία echo για να εμφανίζει αυτό που μέχρι στιγμής έχει
συμπληρώσει ο χρήστης.

Τέλος, με συνθήκες if θα εμφανίζονται κατάλληλα μηνύματα που θα προκύπτουν από

αντίστοιχες συγκρίσεις και θα εμφανίζεται αν ο μέχρι στιγμής αριθμός που έχει
συμπληρωθεί είναι μικρότερος μεγαλύτερος ή ίσος από τον ζητούμενο. Επειδή ο
αριθμός που έχει εισαγάγει ο χρήστης είναι σε μορφή αλφαριθμητικής χρησιμοποιούμε
τη συνάρτηση intval για να τον μετατρέψουμε σε ακέραιο.

26
Παράδειγμα 4. Quiz2

Κώδικας: Quiz2

Εικόνα Browser: Quiz2

27
3.2 Εφαρμογή AJAX

Στη συγκεκριμένη εφαρμογή θα εμφανίσουμε τρεις φωτογραφίες και όταν πατάμε με το

mouse επάνω στις φωτογραφίες τότε θα εμφανίζεται το όνομα του τοπίου.
Για να το πετύχουμε αυτό καταρχήν σε ένα φάκελο που θα δημιουργήσουμε εντός του
φάκελου htdocs του Xampp θα εισαγάγουμε τις 3 φωτογραφίες και επίσης για κάθε
φωτογραφία θα δημιουργήσουμε ένα text file με την περιγραφή της. Ο στόχος είναι
κάθε φορά που θα γίνεται click με το mouse να εμφανίζεται και το όνομα του τοπίου.
Κώδικας

Σχόλιο
Μέχρι αυτό το σημείο δημιουργήσαμε τη σελίδα html και το αντικείμενο XMLHttpRequest
ανά περίπτωση Browser.

28
Σχόλιο
Δημιουργήσαμε τη συνάρτηση topio η οποία δέχεται δύο ορίσματα το name και το
photo. Επίσης χρησιμοποιήσαμε τη μέθοδο open() με επιλογή μεθόδου GET για να
ανταλλάξουμε δεδομένα με το server.

Σχόλιο
Δημιουργία συνάρτησης callback που ενεργοποιείται όταν αλλάζει η τιμή της
readyState.

Σχόλιο
Αν όλα είναι εντάξει τότε θα πάρουμε την ανταπόκριση του server από τα τρία αρχεία
τύπου txt τα οποία περιγράφουν αντίστοιχα τα τρία τοπία.

Σχόλιο
Με ένα h1 στοιχείο δίνουμε την οδηγία για να ξέρει ο χρήστης τι πρέπει να κάνει.

Σχόλιο
Τοποθετήσαμε τις τρεις φωτογραφίες με ετικέτες img src δίνοντάς τους διαστάσεις
width, height. Επίσης σε κάθε ετικέτα προσθέσαμε από ένα click event handler έτσι

29
ώστε να αλλάζει το κείμενο όταν ο χρήστης κάνει κλικ επάνω στη φωτογραφία. Αυτό
επιτυγχάνεται με την πυροδότηση της συνάρτησης topio.
Τέλος, θα προσθέσουμε και ένα div id= “perigrafi” για να μπορούμε να έχουμε
πρόσβαση στο σημείο όπου θα εμφανίζονται οι περιγραφές.

Παράδειγμα 5. Click Photos

Κώδικας: Click Photos

Εικόνα Browser: Click Photos

30
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
• μπορούμε να δημιουργούμε ασύγχρονη επικοινωνία με τη βοήθεια της AJAX,
• μπορούμε να δημιουργούμε αντικείμενα XMLHttpRequest για να στέλνουμε
αιτήματα στο server,
• μπορούμε να παίρνουμε αποτελέσματα από το server σε μορφή κειμένου txt ή XML
με τις μεθόδους responseText και responseXML, και
• μπορούμε να δημιουργούμε συνάρτηση Callback για να ενεργοποείται κάθε φορά
που αλλάζει η readyState.

31
32
 ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ

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

Με τη χρήση καινοτόμων μεθόδων εξ αποστάσεως εκπαίδευσης

1144 - ΤΕΧΝΙΚΗ AJAX

ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 2. ΕΠΙΣΤΡΟΦΗ ΔΕΔΟΜΕΝΩΝ ΚΑΙ Ο ΤΡΟΠΟΣ

ΠΟΥ ΧΤΙΖΟΥΜΕ ΜΙΑ ΕΦΑΡΜΟΓΗ AJAX

33
34
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα αναλυθούν οι δυνατότητες των μεθόδων GET, POST και
πώς μπορούμε να περάσουμε σε αρχεία του server περισσότερες παραμέτρους και
τιμές αυτών.
Στη δεύτερη υποενότητα θα αναλυθεί η μέθοδος δημιουργίας πολλαπλών αιτήσεων και
πώς μπορούμε να εμφανίζουμε τα αποτελέσματα σε διαφορετικά divs της σελίδας.
Επίσης θα αναλυθεί και η εφαρμογή: Ιταλικό εστιατόριο
Στην τρίτη υποενότητα θα παρουσιαστεί και θα αναλυθεί εκτενώς η μέθοδος
δημιουργίας πολλαπλών αντικειμένων XMLHttpRequest. Επίσης θα παρουσιαστεί
εφαρμογή της μεθόδου.

35
 ΥΠΟΕΝΟΤΗΤΑ 1. ΠΡΟΧΩΡΗΜΕΝΗ ΑΠΟΣΤΟΛΗ ΔΕΔΟΜΕΝΩΝ ΜΕ GET
POST

Για να γίνει καλύτερα κατανοητός ο τρόπος που στέλνουμε δεδομένα σε ένα Website
θα πρέπει να έχουμε στο μυαλό μας ότι η διεύθυνση του website που έχουμε
εγκαταστήσει στον εικονικό μας server με την πλατφόρμα του Xampp είναι η διεύθυνση
localhost.
Έτσι, για παράδειγμα, αν θέλω να πλοηγηθώ σε μία σελίδα στο Internet π.χ google.gr
θα πρέπει να γράψω στο πεδίο των διευθύνσεων του Browser https://www.google.gr/.
Αυτή είναι η διεύθυνση ενός server που έχει αποθηκευμένη τη συγκεκριμένη σελίδα. Ο
Browser λοιπόν θα στείλει αίτημα επικοινωνίας στη συγκεκριμένη σελίδα.
Έστω τώρα ότι η σελίδα αυτή βρίσκεται σε ένα φάκελο μέσα στο φάκελο htdocs της
πλατφόρμας Xampp. Τότε ο Browser θα στείλει αίτημα επικοινωνίας προς τη διεύθυνση
http://localhost. Αυτό που θα κάνουμε σε αυτή την υποενότητα είναι να στέλνουμε
αιτήματα και με τις δύο μεθόδους GET και POST με μία ή περισσότερες παραμέτρους
μαζί με τις τιμές τους.
Φυσικά για να έχουμε πρόσβαση στη συγκεκριμένη διεύθυνση θα πρέπει να
ενεργοποιήσουμε τα services από το Control panel. Αν κάνουμε μία δοκιμή να
πληκτρολογήσουμε στο Browser τη διεύθυνση http://localhost/ όταν τα services είναι
απενεργοποιημένα, τότε θα λάβουμε το γνωστό μήνυμα για αδυναμία της σύνδεσης.
Αν επαναλάβουμε το ίδιο, αφού έχουμε ενεργοποιήσει τα services, τότε θα πάρουμε ως
αποτέλεσμα στον Browser “It Works”.
Επίσης όταν τα services είναι ενεργοποιημένα και πληκτρολογήσουμε μία διεύθυνση
της localhost/όνομα_φακέλου/, πατώντας το enter θα εμφανιστούν τα αρχεία του
φακέλου σε μορφή Html σελίδας.
Έστω ότι θέλουμε να εισέλθουμε στο λογαριασμό μας στο WinBank της Τράπεζας
Πειραιώς. Τότε θα πληκτρολογήσουμε την παρακάτω διεύθυνση για να εμφανιστεί η
φόρμα των στοιχείων που πρέπει να συμπληρώσουμε. Σε αντιστοιχία θα έχουμε κάποιο
php file στο οποίο θα περνάμε όσες παραμέτρους θέλουμε.
https://www.winbank.gr/el/Pages/Home.aspx
Αντίστοιχα ένα αρχείο που βρίσκεται σε ένα φάκελο ajax μέσα στο htdocs θα έχει τη
διεύθυνση http://localhost/ajax/transfer.html.

36
Αυτό που θα κάνουμε είναι να περάσουμε σε ένα PHP αρχείο τιμές για όνομα, επίθετο
και email ενός χρήστη. Στη συνέχεια θα γράψουμε κώδικα για να εμφανίζονται τα
αποτελέσματά μας.
Θα δημιουργήσουμε λοιπόν ένα φάκελο με το όνομα ex-ajax2 μέσα στο φάκελο
htdocs του Xampp. Στη συνέχεια μέσα σε αυτό το φάκελο θα δημιουργήσουμε δεύτερο
φάκελο με το όνομα php όπου εκεί θα δημιουργήσουμε και θα αποθηκεύσουμε αρχείο
php με όνομα transfer.php.
Το αρχείο transfer.php είναι ένα αρχείο που βρίσκεται στον υποφάκελο Php του
εικονικού μας server. Άρα για να επικοινωνήσει ο Browser με το server θα χρειαστεί να
επικοινωνήσει με το τοπικό server στη διευθυνση http://localhost/ex-
ajax2/php/transfer.php.

1.1 Μέθοδος GET

Για τη δημιουργία της σελίδας Html αρχικά θα γράψουμε:

Στη συνέχεια θα ξεκινήσουμε το σενάριο JavaScript. Θα θέσουμε αρχικά τη μεταβλητή

req=false. Στη συνέχεια θα γράψουμε κώδικα για τη δημιουργία του αντικειμένου
XMLHttpRequest για τις διαφορετικές εκδόσεις των Browsers. Σε όλες τις περιπτώσεις
των εκδόσεων θα εκχωρηθεί στη μεταβλητή req η τιμή του αντικειμένου
XMLHttpRequest το οποίο θα αναλάβει την επικοινωνία με το server.

Στη συνέχεια θα γράψουμε την ακόλουθη συνάρτηση:

37
Σχόλια: Ορίσαμε τη συνάρτηση transfer με είσοδο divID. Αυτό το όρισμα είναι που θα
πάρει τιμή ίση με το div που θα επιλέξουμε για να εμφανιστούν τα στοιχεία που θα
επιστρέψει ο server.

Σχόλιο: Αν υπάρχει αντικείμενο XMLHttpRequest τότε θα ορίσουμε μεταβλητήx και θα

εκχωρήσουμε σε αυτή τη μέθοδο document.getElementById με όρισμα divID δηλαδή
το όνομα του div που θα επιλέξουμε για να εμφανιστούν τα στοιχεία και το οποίο θα
γράψουμε σαν είσοδο στην κλήση της συνάρτησης transfer που θα καλέσουμε
αργότερα με event handler.

Σχόλιο:
Γράψαμε τη μέθοδο open για το αντικείμενο req και έχουμε δηλώσει τα παρακάτω
ορίσματα:
1. Σαν πρώτο όρισμα γράφουμε τη μέθοδο GET για την μεταφορά δεδομένων.
2. Σαν δεύτερο όρισμα γράφουμε τη διεύθυνση 'http://localhost/ex-
ajax2/php/transfer.php?name=Dimitris&lname=Papadopoulos&email=dp@gm
ail.com' στην οποία υπάρχει το αρχείο transfer.php. Όπως εξηγήσαμε, για να
συμβεί αυτό θα πρέπει το αρχείο να βρίσκεται στη διαδρομή Xampp/htdocs/ex-
ajax2/php. Επίσης πολύ σημαντικό είναι να προσέξουμε ότι στο τέλος του
ονόματος του αρχείου transfer.php ακολουθεί ένα Αγγλικό ερωτηματικό και
έπειτα με τη δήλωση
name=Dimitris&lname=Papadopoulos&email=dp@gmail.com
ως συνέχεια του δεύτερου ορίσματος περνάμε στο server και πιο συγκεκριμένα
στο αρχείο transfer.php τις τιμές για επίθετο όνομα και email. Ο κανόνας για τη
σύνταξη είναι
όνομα_παραμέτρου1=τιμή_παραμέτρου1&
όνομα_παραμέτρου2=τιμή_παραμέτρου2&…
3. Δίνουμε σαν τρίτο όρισμα την τιμή true για ασύγχρονη μετάδοση δεδομένων. Η
τιμή true είναι προαιρετική επειδή είναι και η προεπιλογή.

38
Σχόλιο:
Στο σημείο αυτό ορίζουμε τη συνάρτηση callback.

Σχόλιο:
Αν η readyState == 4 και req.status == 200 σημαίνει ότι η απάντηση του server είναι
έτοιμη προς αποστολή.

Σχόλιο:
Στην ιδιότητα innerHTML του αντικειμένου x θα αποθηκευθεί η απόκριση του server σε
μορφή κειμένου αλφαριθμητικής string του αντικειμένου req.

Σχόλιο:
Στο στοιχείο body θέσαμε image picjumbo.com_IMG_3130.jpg ως background.
Επίσης ορίσαμε

για να μην επαναλαμβάνεται η φωτογραφία στο background καθώς και η

φωτογραφία του background να καταλαμβάνει ολόκληρη τη σελίδα. Τέλος στο style
προσθέσαμε και χρώμα γραμματοσειράς magenta και γράψαμε και ένα header για τη
σελίδα.

39
Σχόλιο:
Δημιουργήσαμε ένα button με τη βοήθεια της ετικέτας form δίνοντας style χρώμα
γραμματοσειράς magenta για να υπάρχει μία ομοιομορφία. Ορίσαμε στο Button ένα
onclick event handler το οποίο στην περίπτωση που πατηθεί από το χρήστη το button
πυροδοτεί τη συνάρτηση transfer δίνοντας σαν είσοδο το όρισμα με όνομα div1.

Σχόλιο:
Γράψαμε κώδικα για το div όπου θα εμφανιστεί το αποτέλεσμα της απόκρισης του
server. Επίσης γράψαμε και σε ετικέτα footer την πηγή της φωτογραφίας και κλείσαμε
τις ετικέτες των στοιχείων body και footer.

1.1.1 Εξήγηση του τρόπου λειτουργίας του παραδείγματος

Η εκτέλεση από τη localhost του παραδείγματος που αναφέρθηκε περιλαμβάνει τα

παρακάτω στάδια από τη στιγμή που θα εκτελέσουμε το αρχείο tranfer.html μέσα από
τη localhost:
1. Εμφάνιση της σελίδας Html με το button που περιλαμβάνει το onclick event.
2. Αφού πατηθεί το button εκτελείται η συνάρτηση transfer με όρισμα div1.
3. Δημιουργείται αντικείμενο XMLHttpRequest
4. Γίνεται επικοινωνία με το server και στο transfer.php περνάμε τις τρεις τιμές.
5. Ο server στέλνει τα αποτελέσματα σε μορφή κειμένου τα οποία εμφανίζονται στη
θέση του div1 σαν αντικατάσταση του μηνύματος. Στο σημείο αυτό θα
εμφανιστούν τα στοιχεία που θα επιστρέψει ο server με τη βοήθεια της ιδιότητας
innerHTML.

40
 Παράδειγμα 1. Μέθοδος POST
Κώδικας: Μέθοδος POST

Εικόνα Browser: Μέθοδος POST

1.2 Παραλλαγή με POST

Σε περίπτωση που θέλουμε να επιλέξουμε σαν μέθοδο την POST:

1. Θα αλλάξουμε στο Html αρχείο τη μέθοδο req.open δίνοντας σαν ορίσματα τη
μέθοδο POST καθώς και τη διαδρομή του νέου αρχείου transfer2.php.

41
2. Θα προσθέσουμε κάτω από τη γραμμή με τη req.open τη μέθοδο

για να ορίσουμε ένα header Http Content type σε application.

3. Αντί να δώσουμε στη send όρισμα NULL δίνουμε:

Με αυτή τη γραμμή στέλνουμε τις παραμέτρους name, lname και email με τις
αντίστοιχες τιμές. Προσέξτε τη σύνταξη της req.send.:
req.send("par1=+value1& par2=+value2+… ");

Παράδειγμα 2. Μέθοδος POST

Κώδικας: Μέθοδος POST

Εικόνα Browser: Μέθοδος POST

42
 ΥΠΟΕΝΟΤΗΤΑ 2. ΧΕΙΡΙΣΜΟΣ ΠΟΛΛΩΝ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ΚΑΙ
ΕΜΦΑΝΙΣΗΣ ΣΕ ΔΙΑΦΟΡΕΤΙΚΑ ΣΗΜΕΙΑ ΤΗΣ ΣΕΛΙΔΑΣ

Μέχρι τώρα αναλύσαμε μεθόδους στις οποίες τα επιστρεφόμενα αποτελέσματα

εμφανίζονταν σε ένα συγκεκριμένο div της σελίδας. Τώρα θα αναλύσουμε πώς
μπορούμε να ανοίξουμε ένα αρχείο txt και να πάρουμε στοιχεία από εκεί καθώς και να
εμφανίσουμε στοιχεία για τους headers του server και για την έκδοση του Browser και
να τα εμφανίσουμε σε boxes που θα έχουμε ορίσει με CSS Style.
Όσον αφορά στην έκδοση του Browser θέλουμε να εμφανιστεί μήνυμα σε box που θα
μας ενημερώνει αν χρησιμοποιούμε ένα κοινό browser ή ένα Internet Explorer έκδοσης
μικρότερης του 7.
Αρχικά δημιουργούμε κώδικα για τη δημιουργία της δομής της σελίδας όπως
παρακάτω:

Στη συνέχεια δημιουργούμε μια συνάρτηση function loadtext() την οποία θα

συνδέσουμε με ένα click event handler σε ένα button με αντίστοιχο μήνυμα.
43
Έπειτα θα ορίσουμε δύο μεταβλητές. Η πρώτη είναι μεταβλητή στην οποία θα γίνει
εκχώρηση του αποτελέσματος του αντικειμένου XMLHttpRequest. Στη δεύτερη θα
αποθηκευθεί το μήνυμα για τις δύο περιπτώσεις των browsers.

Παρακάτω θα γράψουμε τη συνθήκη για την έκδοση του Browser που χρησιμοποιεί ο
χρήστης.

Σχόλιο: Αν ισχύει ότι η έκδοση του Browser που χρησιμοποιούμε είναι ένας κοινός
browser εκτός ΙΕ με ver<7 τότε στη req θα εκχωρηθεί το αντικείμενο XMLHttpRequest και
στη var μήνυμα που θα ενημερώνει για την έκδοση του Browser.

Σχόλιο: Σε περίπτωση που ο Browser που χρησιμοποιεί ο χρήστης είναι Internet Explorer
με έκδοση μικρότερη από 7, τότε στην μεταβλητή var θα εκχωρηθεί κατάλληλο μήνυμα.

Σχόλιο: Αν όλα είναι έτοιμα, δηλαδή αν έχει γίνει η επικοινωνία Browser- server, ο server
έχει επεξεργαστεί το αίτημα και είναι έτοιμος να στείλει απάντηση τότε θα συμβούν τα
εξής:

44
Μέσα στο div box θα εμφανιστεί το μήνυμα από την getAllResponseHeaders(); η οποία
θα εμφανίσει όλους τους headers του server δηλαδή όλες τις πληροφορίες σχετικά με
την κατάσταση του server.
Μέσα στο div box2 θα εμφανιστεί το μήνυμα που έχει αποθηκευθεί στη μεταβλητή ver.
Στο div head1 θα εμφανιστεί η πληροφορία από την απόκριση του server η οποία είναι
αποθηκευμένη σε φάκελο του server και εντός του txt αρχείου.

Σχόλιο: Γράψαμε μέθοδο open με ορίσματα την επιλογή μεθόδου GET και τη θέση URL
του αρχείου txt.

Σχόλιο:
Δημιουργήσαμε δύο boxes για να εμφανίσουμε ξεχωριστά τα αποτελέσματά μας.
Γράψαμε λοιπόν στο εντός του στοιχείου head μορφοποίηση CSS για το ύψος της

45
γραμμής, το background color, τις διαστάσεις και το padding. Τα δεκαεξαδικής
μορφής χρώματα τα πήραμε από τη σελίδα του w3schools:
http://www.w3schools.com/tags/ref_colorpicker.asp

Σχόλιο:
Ξεκινήσαμε το στοιχείο body δίνοντας css style όπως και στο προηγούμενο
παράδειγμα.

Σχόλιο:
Με αυτές τι γραμμές εμφανίζουμε κατά σειρά τα boxes στα οποία θα εμφανιστούν τα
αποτελέσματα. Σε περίπτωση που είναι επιθυμητό μπορούμε να τοποθετήσουμε τα
boxes σε θέσεις της ιστοσελίδας εφαρμόζοντας τις γνωστές positioning ιδιότητες.

46
 Παράδειγμα 3. Χειρισμός πολλών αποτελεσμάτων

Κώδικας: Χειρισμός πολλών αποτελεσμάτων

Εικόνα Browser: Χειρισμός πολλών αποτελεσμάτων

2.1 Χειρισμός πολλαπλών αιτήσεων

Μέχρι τώρα είδαμε σενάρια όπου ο χρήστης ενεργοποιεί συνήθως με ένα event
handler ένα αίτημα για δημιουργία αντικειμένου XMLHttpRequest. Σε αυτή την
υποενότητα θα εξηγήσουμε τι πρέπει να κάνουμε στην περίπτωση όπου ο χρήστης
θέλει να στείλει παραπάνω από μία αιτήσεις.

47
Η πρώτη περίπτωση είναι να δημιουργήσουμε δύο ή περισσότερα buttons η γενικά
περισσότερα από ένα event handlers. Σε κάθε συνάρτηση ενός event handler
μπορούμε να εισαγάγουμε ορίσματα για αρχείο επικοινωνίας και για παραμέτρους που
μπορούν να περάσουν σε αυτό τα αρχείο. Με αυτές τις παραμέτρους μπορούμε ν
ορίσουμε συνθήκες μέσα στο αρχείο php έτσι ώστε να έχουμε διαφορετικά
αποτελέσματα ανάλογα με το button που επιλέγουμε.

2.2 Εφαρμογή AJAX: Ιταλικό Εστιατόριο

Θα δημιουργήσουμε μία εφαρμογή AJAX όπου υπάρχει κάποιος πελάτης ο οποίος

θέλει να πάρει κάποιες πληροφορίες για τη βραδινή έξοδό του. Θα υπάρχει λοιπόν μία
κεντρική σελίδα ενός ιταλικού εστιατορίου στην οποία ο χρήστης με διαφορετικά
buttons θα δημιουργεί ένα αντικείμενο για να πάρει τις πληροφορίες που θέλει.
Στο σενάριο αυτό υπάρχει μία κεντρική σελίδα του Ιταλικού Εστιατορίου. Ο χρήστης έχει
εισέλθει στην κεντρική σελίδα η οποία έχει κάποια βασικά στοιχεία του εστιατορίου. Για
να υπάρχει κέρδος στην ταχύτητα και να είναι το website ευέλικτο και χωρίς να κουράζει
τον επισκέπτη με άχρηστες πληροφορίες (κανόνες Web Usability), Ο χρήστης πατάει
κατάλληλο button για να εμφανιστούν οι πληροφορίες που ζητάει.
Μόλις ο χρήστης πατήσει κάποιο button, τότε θα καλέσει τη συνάρτηση που θα
διαχειριστεί την επικοινωνία με το server και θα δημιουργήσει αντικείμενο
XMLHttpRequest. Στην “onclick” συνάρτηση θα περάσουμε το όνομα και τη διαδρομή
του αρχείου php που βρίσκεται αποθηκευμένο στο server καθώς και την επιλογή του
αρχείου. Τα αποτελέσματα που θα επιστρέψει ο server θα είναι με τη μέθοδο
responseText και θα εμφανίζονται σε κατάλληλα διαμορφωμένο box εντός τη σελίδας
Html.

2.3 Βήματα για τη δημιουργία της σελίδας HTML εφαρμογής για το Ιταλικό
Εστιατόριο

Για να δημιουργήσουμε τη σελίδα Html της εφαρμογής θα γράψουμε:

48
Σχόλιο: Μέχρι εδώ έχουμε δημιουργήσει τη βασική δομή της HTML.

Η function fetch θα δέχεται από τη συνάρτηση που χειρίζεται το onclick event του
button όρισμα για το αρχείο php που βρίσκεται αποθηκευμένο στο server καθώς
επίσης και για την τιμή της επιλογής που θα περάσει στο server και πιο συγκεκριμένα
στο αρχείο php.

Σχόλιο: Μέχρι εδώ έχει γίνει η δημιουργία των αντικειμένων XMLHttpRequest ανάλογα με
την έκδοση. Στη μεταβλητή req θα εκχωρηθεί το αποτέλεσμα του αντικειμένου
XMLHttpRequest.

Σχόλιο: Δημιουργία της συνάρτησης callback

Σχόλιο: Τα αποτελέσματα της απόκρισης του server θα εμφανιστούν στο box1. Με τη

βοήθεια της innerHTML το περιεχόμενο του div που φορτώνεται αρχικά στη σελίδα, θα
αντικατασταθεί με τα αποτελέσματα της req.responseText.
49
Σχόλιο: Η μέθοδος open έχει ως ορίσματα τη μέθοδο GET για την επικοινωνία με το
server, το όρισμα menu το οποίο περιέχει πληροφορίες για τη διαδρομή, το όνομα του
αρχείου php καθώς επίσης και την παράμετρο select που θα περάσει στο αρχείο μαζί
με την τιμή της.

Σχόλιο: Δημιουργήσαμε ένα box με διαστάσεις 300x300 με κατάλληλο χρώμα που να

ταιριάζει με το ξύλο της φωτογραφίας, και με line-height 30px. Το Line-height
αντιπροσωπεύει την απόσταση μεταξύ των γραμμών.
Γενικά θα πρέπει να προσέχουμε τις επιλογές στα χρώματα που χρησιμοποιούμε έτσι
ώστε ως σύνολο η σελίδα να έχει μία καλή αισθητική. Επίσης οι επιλογές μας πρέπει να
είναι σύμφωνες και με τον συμβολισμό των χρωμάτων καθώς και τα συναισθήματα
που μας προκαλούν.

Σχόλιο: Δημιουργήσαμε στυλ για το στοιχείο body. Αυτό σημαίνει ότι για ό,τι είναι
ορατό στη σελίδα θα εμφανιστεί με τις συγκεκριμένες μορφοποιήσεις εκτός και αν
υπάρξει άλλη ιδιότητα CSS που να το αλλάξει. Για τη συγκεκριμένη σελίδα επιλέξαμε ένα
πράσινο χρώμα από το w3schools color picker που να ταιριάζει με τα λαχανικά της
φωτογραφίας.

50
Γενικά είναι καλή τακτική που ακολουθείται κυρίως από επαγγελματίες να αγοράζουν
φωτογραφίες οι οποίες είναι τραβηγμένες και επεξεργασμένες ειδικά για Web Design.
Για παράδειγμα, αν θέλει μία εταιρεία μία φωτογραφία με λαμπερά πρόσωπα για να
μην χρεωθεί το κόστος μιας παραγωγής φωτογράφησης μπορεί να αγοράσει τα
δικαιώματα της φωτογραφίας. Το ίδιο ισχύει και με τα videos.

Σχόλιο: Ορίσαμε το div με id box για την εμφάνιση των πληροφοριών που θα επιλέξει ο
χρήστης.

Σχόλιο: Δημιουργήσαμε μία φόρμα στην οποία θα τοποθετήσουμε τα buttons. Πριν

από το button θα εμφανίζεται μήνυμα που θα δίνει οδηγίες στο χρήστη για τη
λειτουργία του button. Σύμφωνα με τους κανόνες Web Usability, πρέπει να είναι
σίγουρος τι θα συμβεί έπειτα από το πάτημα ενός button. Στο συγκεκριμένο button θα
εμφανίζεται η λέξη επικοινωνία, η οποία είναι εκχωρημένη στην ιδιότητα value.Σε
περίπτωση που θέλουμε μπορούμε να δημιουργήσουμε δικά μας buttons και να τα
χρησιμοποιήσουμε στη σελίδα html.
Το συγκεκριμένο button, όπως και τα επόμενα, έχουν συνδεθεί με event handler το
οποίο θα πυροδοτήσει τη συνάρτηση fetch με όρισμα που θα περιλαμβάνει το αρχείο
food.php καθώς και την παράμετρο select μαζί με την τιμή 1. Η παράμετρος στον
κώδικα με την τιμή της βρίσκονται μετά το Αγγλικό ερωτηματικό.
Μόλις πατήσει το button ο χρήστης θα πυροδοτηθεί η συνάρτηση fetch η οποία θα
δημιουργήσει το αντικείμενο XMLHttpRequest καθώς επίσης και την callback function.
Το όρισμα που θα περαστεί στη συνάρτηση fetch έχει το όνομα menu όπου
χρησιμοποιείται σαν όρισμα στη μέθοδο req.open(“GET”",menu,true)

51
Σχόλιο: Ολοκληρώσαμε τον κώδικα της σελίδας Html με τα υπόλοιπα buttons τα οποία
θα έχουν επιλογές select με τιμές 2 και 3 για να εμφανιστούν στη σελίδα τα
αποτελέσματα για το μενού της ημέρας καθώς και το ωράριο λειτουργίας.

2.4 Βήματα για τη δημιουργία του αρχείου PHP της εφαρμογής για το
Ιταλικό Εστιατόριο

Στο αρχείο PHP θα περάσουν οι τιμές της παραμέτρου select. Έτσι θα δημιουργηθούν
αντίστοιχα τρεις συνθήκες για να επιστρέψει ο server τα αποτελέσματα που πρέπει.

Σχόλιο: Αν η τιμή της παραμέτρου που θα περάσει στο αρχείο php είναι ίση με 1, τότε
θα εμφανιστεί κατάλληλο μήνυμα. Η $_GET["select"] περιέχει την τιμή της παραμέτρου
select που πέρασε στο αρχείο PHP.
Αν η επιλογή ήταν 1, τότε σημαίνει ότι ο χρήστης έχει ζητήσει τα στοιχεία της
επικοινωνίας και θα εμφανιστούν οι αντίστοιχες πληροφορίες.

52
Σχόλιο: Αν η επιλογή ήταν select=2 τότε σημαίνει ότι ο χρήστης έχει ζητήσει τα στοιχεία
του μενού.

Σχόλιο: Αν η επιλογή ήταν 3 τότε σημαίνει ότι ο χρήστης έχει ζητήσει τα στοιχεία του
ωραρίου του καταστήματος.

2.5 Εναλλακτικός κώδικας για την εφαρμογή Ιταλικό εστιατόριο

Στη συγκεκριμένη εφαρμογή για το Ιταλικό εστιατόριο θα μπορούσαμε να ορίσουμε στη

συνάρτηση fetch παραπάνω ορίσματα σαν είσοδο από το onclick event handler. Για
παράδειγμα θα μπορούσαμε να ορίσουμε και παράμετρο για το div εμφάνισης των
αποτελεσμάτων.
Τότε η συνάρτηση Onclick θα μπορούσε να γραφεί ως εξής:

Επίσης θα έπρεπε να αλλάξουμε και την παρακάτω γραμμή:

Τέλος, στο button το οποίο είναι συνδεδεμένο με το event handler θα έπρεπε να

γράψουμε για παράδειγμα:

Όπου:
foodxxx.php? Θα γράφαμε το όνομα και τη διαδρομή του αρχείου που θα
αλληλεπιδρά η σελίδα μας.
select=xxx Η τιμή της επιλογής που θα περάσει μαζί με την παράμετρο select στο
αρχείο PHP.

53
boxyyyy το όνομα του div στο οποίο θα εμφανιστούν τα δεδομένα που θα
επιστρέψει ο server, έτσι ώστε να δέχεται σαν είσοδο και το όνομα του respdiv. Αυτό
μας δίνει ακόμη περισσότερες επιλογές. Δηλαδή μπορούμε να επιλέγουμε σαν είσοδο
της onclick συνάρτησης και το αρχείο και την παράμετρο για την επιλογή και το σημείο
που θα εμφανιστούν τα δεδομένα που θα επιστρέψει ο sever.

Παράδειγμα 4. Εφαρμογή. Ιταλικό εστιατόριο

Κώδικας: Εφαρμογή: Ιταλικό εστιατόριο

Εικόνα Browser: Εφαρμογή: Ιταλικό εστιατόριο

54
 ΥΠΟΕΝΟΤΗΤΑ 3. ΔΗΜΙΟΥΡΓΙΑ ΠΟΛΛΑΠΛΩΝ ΑΝΤΙΚΕΙΜΕΝΩΝ
XMLHTTPREQUEST

Στα προηγούμενα παραδείγματα αναλύσαμε σενάρια όπου ο χρήστης με το πάτημα

ενός button πυροδοτούσε μία συνάρτηση η οποία δημιουργούσε ένα αντικείμενο
XMLHttpRequest με το πάτημα ενός button. Παράλληλα με την κλήση της συνάρτησης
δίναμε ορίσματα έτσι ώστε να έχουμε το επιθυμητό αποτέλεσμα.

3.1 Ανάγκη για δημιουργία πολλαπλών αντικειμένων

Σε περίπτωση που ο χρήστης πατούσε άλλο Button ενεργοποιούνταν η ίδια συνάρτηση

αλλά με διαφορετικά ορίσματα. Το μειονέκτημα σε αυτή τη μέθοδο είναι ότι όλα τα
buttons χρησιμοποιούν την ίδια συνάρτηση άρα και το ίδιο αντικείμενο
XMLHttpRequest.
Στην περίπτωση λοιπόν όπου ο χρήστης περιμένει την απόκριση και τα αποτελέσματα
του server μέχρι να πατήσει κάποιο άλλο Button δεν δημιουργείται κάποιο πρόβλημα. Τι
θα γίνει όμως στην περίπτωση όπου ο server ενώ δεν έχει προλάβει να στείλει τα
αποτελέσματα ο χρήστης στο διάστημα αυτό πατήσει και άλλα buttons; Όπως στην
περίπτωση για παράδειγμα όπου ο server που φιλοξενεί το Website κάποια στιγμή
δεχθεί πολλές αιτήσεις ή η σύνδεση του χρήστη με το internet γίνει κάποια στιγμή αργή.
Σε αυτές τις περιπτώσεις μπορεί να μπερδευτούν τα αποτελέσματα και για παράδειγμα
ενώ πατάει το button με επιλογή 3 να επιστραφούν αποτελέσματα από προηγούμενη
επιλογή. Δηλαδή υπάρχει κίνδυνος να πάρει ο χρήστης λάθος αποτελέσματα.
Η λύση στο πρόβλημα είναι να χρησιμοποιήσουμε πολλαπλά αντικείμενα
XMLHttpRequest και να αντιστοιχούμε την κάθε επιλογή του χρήστη σε διαφορετικό
αντικείμενο.
Έτσι λοιπόν για να ανεξαρτητοποιηθούν οι αιτήσεις και να μπορούμε να τις
διαχειριστούμε σωστά δημιουργούμε για κάθε αίτηση ξεχωριστή συνάρτηση και
ξεχωριστό XMLHttpRequest αντικείμενο.

3.2 Εφαρμογή AJAX: Δημιουργία πολλαπλών αντικειμένων - Σελίδα HTML

Θα δημιουργήσουμε μία εφαρμογή όπου θα δημιουργούνται με το πάτημα δύο

διαφορετικών buttons οι συναρτήσεις fetch() και fetch2(). Οι δύο αυτές συναρτήσεις
μόλις πυροδοτηθούν με onclick event handlers θα δημιουργούν τα XMLHttpRequest
55
αντικείμενα req και req2. Τα αντικείμενα req και req2 θα επιστρέφουν αποτελέσματα
από αρχείο php.
Κώδικας αρχείου HTML:

Σχόλιο: Δημιουργούμε τη δομή της σελίδας Html

Σχόλιο
Δημιουργούμε τη συνάρτηση fetch για να τη συνδέσουμε με onclick event handler στο
πρώτο button

Σχόλιο: Δημιουργούμε το αντικείμενο req για κάθε περίπτωση Browser.

Σχόλιο: Δημιουργούμε τη συνάρτηση callback

Σχόλιο: Το αποτέλεσμα req.responseText θα εμφανιστεί στο div με id box.

56
Σχόλιο: Γράφουμε τις μεθόδους open, send για το αντικείμενο req.

Σχόλιο: Δημιουργούμε τη συνάρτηση fetch2() για να τη συνδέσουμε με onclick event

handler στο δεύτερο button.

Σχόλιο: Δημιουργούμε το αντικείμενο req2 σε κάθε έκδοση Browser.

Σχόλιο: Το αποτέλεσμα req2.responseText θα εμφανιστεί στο div με id box2

57
Σχόλιο: Γράφουμε CSS για το πρώτο box όπου θα εμφανιστούν τα αποτελέσματα του
req.responseText

Σχόλιο: Γράφουμε CSS για το δεύτερο box όπου θα εμφανιστούν τα αποτελέσματα του
req2.responseText

Σχόλιο: Επιλέγουμε φωτογραφία για το φόντο της σελίδας Html καθώς και ιδιότητες CSS
για το στοιχείο body.

Σχόλιο: Ορίζουμε div με id box για να εμφανιστούν τα αποτελέσματα της fetch().

58
Σχόλιο: Ορίζουμε div με id box2 για να εμφανιστούν τα αποτελέσματα της fetch2().

3.3 Εφαρμογή AJAX: Δημιουργία πολλαπλών αντικειμένων-PHP script

Κώδικας αρχείου multiple.php

Σχόλιο: Δημιουργήσαμε δύο υπό συνθήκη if echo για να εμφανιστούν αντίστοιχα

μηνύματα αν ο χρήστης με πάτημα button ενεργοποιήσει τη συνάρτηση fetch() ή τη
συνάρτηση fetch2().

59
 Παράδειγμα 5. Δημιουργία πολλαπλών αντικειμένων

Κώδικας: Δημιουργία πολλαπλών αντικειμένων

Εικόνα Browser: Δημιουργία πολλαπλών αντικειμένων

Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι μπορούμε:
• να δημιουργούμε συναρτήσεις που δημιουργούν αντικείμενα XMLHttpRequest με
είσοδο ορίσματα για το div της εμφάνισης των αποτελεσμάτων και να τα εμφανίζουμε
σε διαφορετικά boxes,
• με τη μέθοδο GET και τη μέθοδο POST να περάσουμε σε αρχεία του server πάνω
από μία παραμέτρους με τις τιμές τους και να πάρουμε αντίστοιχα αποτελέσματα,
• να δημιουργήσουμε φόρμες με περισσότερα από ένα buttons, και
• να δημιουργήσουμε περισσότερες από μία onclick συναρτήσεις που να
δημιουργούν και να διαχειρίζονται περισσότερα από ένα XMLHttpRequest αντικείμενα.
60
 ΒΙΒΛΙΟΓΡΑΦΙΑ

ΔΕ1
• Ballard, Ph. & Moncur, M. (2008) Sams Teach Yourself Ajax, JavaScript, and PHP All
in One, 1st edition, USA: Sams Publishing
• Holzner, S. (2006) Ajax for Dummies, 1st edition, USA: Willey Publishing Inc.
• Riordan, R. (2008), Head First AJAX, 1st edition, USA: O’Reilly Media
• Holdener, A. (2008), AJAX: The Definitive Guide, 1st edition, USA: O’Reilly Media

ΔΕ2
• Ballard,Ph. &Moncur,M. (2008) Sams Teach Yourself Ajax, JavaScript, and PHP All in
One, 1st edition, USA:Sams Publishing
• Holzner, S. (2006) Ajax for Dummies, 1st edition, USA: Willey Publishing Inc.
• Riordan, R. (2008), Head First AJAX, 1st edition, USA:O’Reilly Media
• Holdener, A. (2009), Οδηγός της AJAX, 1st edition, Αθήνα: Εκδόσεις Μόσχος
Γκιούρδας
• Hadlock, K. (2007), Ανάπτυξη Web Εφαρμογών, 1st edition, Αθήνα: Εκδόσεις
Μόσχος Γκιούρδας

61