Basic Example PHP/AJAX (JQuery)

By | 15/08/2009

Έχει περάσει αρκετός καιρός από τότε που άρχισαν να εμφανίζονται τα πρώτα site όπου έκαναν χρήση της τεχνολογίας AJAX (άγιαξ, εϊζαξ, άζαξ όπως θέλετε πείτε το). Από τότε μέχρι τώρα έχει σημειωθεί μεγάλη πρόοδος στο τομέα και το WEB Developing έχει περάσει σε άλλο στάδιο.

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

Όμως για τη χρήση της AJAX θα έπρεπε κάποιος να γνωρίζει πολύ καλά Javascript αφού δεν ήταν και από τις πιο friendly user τεχνολογίες. Το τοπίο άλλαξε πλέον με την είσοδο του JQuery. Το JQuery είναι μια βιβλιοθήκη Javascript όπου έχει μαζεμένες πάρα πολλές συναρτήσεις και μεθόδους με σκοπό να διευκολύνουν τον τελικό χρήστη. Σε αυτή τη βιβλιοθήκη εμπεριέχεται και η AJAX. Πολύ εύκολα ο χρήστης τώρα μπορεί να την χρησιμοποιήσει με τρόπο διάφανο, χωρίς να τον ενδιαφέρουν οι λεπτομέρειες.

Επειδή όμως αρκετά είπαμε για τη θεωρία ήρθε η ώρα να τα δούμε στη πράξη. Το σενάριο είναι πολύ απλό. Θα έχουμε δύο κουμπιά όπου πατώντας το ένα θα μας ενημερώνει ένα συγκεκριμένο πεδίο στη σελίδα και πατώντας το άλλο θα το κρύβει. Φτιάχνουμε έναν φάκελο με το όνομα example. Μέσα σε αυτό το φάκελο δημιουργούμε ένα αρχείο με το όνομα index.php και δύο φακέλους include, js (Εικόνα 1).

image-1

Στον φάκελο include θα βάλουμε οτιδήποτε αρχεία χρειαστεί να καλέσουμε μέσα από άλλα αρχεία. Ενώ στο φάκελο js θα βάλουμε τα javascript αρχεία μας.

Στο index.php θα δημιουργήσουμε δύο κουμπιά για το σκοπό μας, όπου στο event onClick θα καλούμε την Javascript συνάρτηση addContext, hideContext ανάλογα την περίπτωση. Σημαντικό είναι να κάνουμε include το jquery-1.3.2.js και το scripts.js (Εικόνα 2).
image-2
Εικόνα 2

Στο scripts.js θα δημιουργήσουμε τις συναρτήσεις addContext, hideContext (Εικόνα 3).
image-3
Εικόνα 3

Και τέλος στο φάκελο include θα φτιάξουμε το αρχείο add.php. Όταν κάποιος πατάει το κουμπί Add Context θα εκτελείται το Javascript addContext, το οποίο με τη σειρά του μέσω AJAX θα καλεί το add.php. Αυτό θα μας επιστρέφει κάποιο αποτέλεσμα όπου θα εμφανίζεται σε ένα συγκεκριμένο div στη σελίδα. Το αποτέλεσμα μπορεί να είναι οτιδήποτε. Από μια απλή λέξη, μέχρι και έναν ολόκληρο πίνακα σε html, ή οτιδήποτε άλλο χρειαστεί ανάλογα τη περίπτωση.

Το αίτημα από το addContext στο add.php αρχείο μπορούμε να το στείλουμε είτε με GET είτε με POST, ανάλογα ποια μέθοδο θέλουμε να χρησιμοποιήσουμε. Στο παράδειγμα, τα αρχεία του οποίου θα τα βρείτε στο τέλος της σελίδας υπάρχουν και οι δύο τρόποι. Η διαφορά μεταξύ τους είναι ότι αν τα στείλουμε με POST θα χρειαστεί τα δεδομένα να τα περάσουμε σε JSON format.

Παραπάνω βλέπουμε την function addContext που εκτελείται όταν πατάμε το button Add Context. Εδώ με σκοπό να σας δείξω όσο το δυνατόν περισσότερες λειτουργίες του JQuery πρόσθεσα μερικά tricks που αν και δεν είναι τόσο χρήσιμα, έγιναν για το σκοπό που αναφέρθηκε απαραπάνω.

Αν πχ. θέλαμε να είμαστε σίγουροι ότι ο χρήστης θα πατήσει το κουμπί Add Context μόνο μία φορά, μπορούμε μόλις το πατήσει να το απανεργοποιήσουμε, χωρίς να κάνουμε refresh τη σελίδα. Αυτό γίνεται από την εντολή:

Όπου το #add σημαίνει να βρει το element με το συγκεκριμένο id, στο οποίο προσθέτει το attribute disabled. Ακόμα με αυτό το τρόπο μπορούμε να προσθέσουμε και άλλα attributes με παρόμοιο τρόπο, διαχωρίζοντάς τα με κόμμα.

Ακόμα, υπάρχει η δυνατότητα να περάσουμε κάποια τιμή από κάποιο hidden πεδίο του index.php στο add.php. Με αυτό τρόπο μπορούμε να κάνουμε τους απαραίτητους ελέγχους στο add.php ώστε να επιστρέψουμε το αποτέλεσμα ανάλογα την περίπτωση. Στο συγκεκριμένο παράδειγμα σε ένα hidden πεδίο βάλαμε ένα όνομα ώστε το “Hello” να συνοδεύεται από το όνομα. Την τιμή την παίρνουμε με την εντολή:

Όπου πάλι το name είναι το ID του hidden πεδίου.

Παραπάνω, βλέπουμε το αίτημα post προς το αρχείο add.php. Βλέπουμε ότι στέλνουμε και την μεταβλητή name σε JSON format. Με το που ολοκληρωθεί το AJAX αίτημα, καλείται μια callback function όπου παίρνει σαν όρισμα το response του αρχείου που καλέσαμε, δηλαδή του add.php. Αυτό response το βάζουμε σε ένα συγκεκριμένο div και το εμφανίζουμε με την μέθοδο slideDown σε χρόνο 1800 ms.

Κάπως αντίστροφα λειτουργούν τα πράγματα όταν πατάμε το Hide Context, όπου απλά κρύβουμε το div.

 

Download the necessary filesexample

Ελπίζω, αυτό το tutorial να βοήθησε για όσους δεν έχουν ξανά χρησιμοποιήσει το JQuery και να κατάλαβαν μερικές από τις βασικές μεθόδους του. Υπάρχουν και πάρα πολλά που δεν αναφέρθηκαν, αλλά δεν γίνεται να χωρέσουν όλα. Σίγουρα καλό είναι κάποιος να ρίξει μια ματιά στο documentation του JQuery ώστε να δει όλες τις διαθέσιμες συναρτήσεις και μεθόδους.

3 thoughts on “Basic Example PHP/AJAX (JQuery)

  1. timos

    Πως μπορώ βα βάλω ενα login module στη joomla το οποίο να χρησιμοποιεί ajax. Θέλω να μην κένει refresh οταν γίνει login.

Leave a Reply