Tutorial jQuery (Μέρος 5): AJAX Them All!

Διαφήμιση

Καθώς πλησιάζουμε στο τέλος της σειράς mini-tutorial jQuery, είναι καιρός να ρίξουμε μια πιο εμπεριστατωμένη ματιά σε μια από τις πιο χρησιμοποιούμενες λειτουργίες του jQuery. Το AJAX επιτρέπει σε έναν ιστότοπο να επικοινωνεί με έναν διακομιστή στο παρασκήνιο χωρίς να απαιτείται η επαναφόρτωση ολόκληρης της σελίδας. Από τις απεριόριστες ροές κατάστασης σε στυλ Facebook έως την υποβολή δεδομένων φόρμας, υπάρχουν ένα εκατομμύριο διαφορετικές πραγματικές καταστάσεις στις οποίες αυτή η τεχνική μπορεί να είναι χρήσιμη.

Εάν δεν έχετε διαβάσει τα προηγούμενα μαθήματα, σας προτείνω να το κάνετε πριν το αντιμετωπίσετε καθώς χτίζονται μεταξύ τους.

• Εισαγωγή: Τι είναι το jQuery και γιατί πρέπει να σας ενδιαφέρει; Κάνοντας το διαδίκτυο διαδραστικό: μια εισαγωγή στο jQueryΤο jQuery είναι μια βιβλιοθήκη σεναρίων από την πλευρά του πελάτη που χρησιμοποιεί σχεδόν κάθε σύγχρονος ιστότοπος - καθιστά τους ιστότοπους διαδραστικούς. Δεν είναι η μόνη βιβλιοθήκη Javascript, αλλά είναι η πιο ανεπτυγμένη, πιο υποστηριζόμενη και χρησιμοποιείται ευρύτερα ... Διαβάστε περισσότερα
instagram viewer
• 1: Επιλογείς και βασικά Tutorial jQuery - Ξεκινώντας: Βασικά στοιχεία & ΕπιλογείςΤην περασμένη εβδομάδα, μίλησα για το πόσο σημαντικό είναι το jQuery για οποιονδήποτε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βρώσουμε τα χέρια μας με κάποιο κώδικα και μάθαμε πώς Διαβάστε περισσότερα
• 2: Μέθοδοι Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & συναρτήσειςΑυτό είναι μέρος μιας συνεχούς εισαγωγής για αρχάριους στη σειρά προγραμματισμού Ιστού jQuery. Το μέρος 1 κάλυψε τα βασικά στοιχεία του jQuery σχετικά με τον τρόπο συμπερίληψής του στο έργο σας και των επιλογών. Στο μέρος 2, θα συνεχίσουμε με ... Διαβάστε περισσότερα
• 3: Αναμονή για φόρτωση σελίδας και ανώνυμες λειτουργίες Εισαγωγή στο jQuery (Μέρος 3): Αναμονή για φόρτωση της σελίδας και ανώνυμες συναρτήσειςΤο jQuery είναι αναμφισβήτητα μια απαραίτητη δεξιότητα για τον σύγχρονο προγραμματιστή ιστού και σε αυτήν τη σύντομη μίνι σειρά ελπίζω να σας δώσω τη γνώση για να αρχίσετε να το χρησιμοποιείτε στα δικά σας web έργα. Σε... Διαβάστε περισσότερα
• 4: Εκδηλώσεις Tutorial jQuery (Μέρος 4) - Ακούστες συμβάντωνΣήμερα πρόκειται να το κάνουμε και να δείξουμε πραγματικά πού λάμπει το jQuery - εκδηλώσεις. Εάν ακολουθήσατε τα προηγούμενα μαθήματα, θα πρέπει τώρα να έχετε μια αρκετά καλή κατανόηση του βασικού κώδικα ... Διαβάστε περισσότερα
• Εντοπισμός σφαλμάτων με τα Εργαλεία προγραμματιστών Chrome Εντοπίστε προβλήματα ιστότοπου με εργαλεία προγραμματιστή Chrome ή FirebugΕάν έχετε παρακολουθήσει τα μαθήματά μου jQuery μέχρι στιγμής, ενδέχεται να έχετε ήδη αντιμετωπίσει κάποια προβλήματα κώδικα και δεν γνωρίζετε πώς να τα διορθώσετε. Όταν αντιμετωπίζετε ένα μη λειτουργικό κομμάτι κώδικα, είναι πολύ ... Διαβάστε περισσότερα

Ενα τι?

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

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

Σήμερα πρόκειται να εξετάσουμε τη χρήση μιας υπηρεσίας τρίτου μέρους, Flickr - από την οποία μπορούμε να χρησιμοποιήσουμε το AJAX για τη λήψη ορισμένων φωτογραφιών χρησιμοποιώντας έναν τύπο δεδομένων JSON. Δεν έχει σημασία πώς το Flickr εφαρμόζει την πλευρά λήψης των πραγμάτων, γιατί αυτή είναι η ομορφιά του API - το μόνο που πρέπει να γνωρίζουμε είναι ένα URL API, τι είδους δεδομένα πρόκειται να λάβουμε και πώς να το χειριστούμε.

Για περαιτέρω ανάγνωση, έγραψα ένα άλλο σεμινάριο πριν από λίγο χειρισμός του AJAX στο WordPress για υποβολή φόρμας επικοινωνίας Ένα σεμινάριο για τη χρήση του AJAX στο WordPressΤο AJAX είναι μια αξιοσημείωτη τεχνολογία ιστού που μας προχώρησε πέρα ​​από τον απλό «σύνδεσμο κλικ, μετάβαση σε άλλη σελίδα» δομή του Διαδικτύου 1.0. Επιτρέπει στους ιστότοπους να ανακτούν δυναμικά και να εμφανίζουν περιεχόμενο χωρίς το χρήστης... Διαβάστε περισσότερα , επομένως ίσως θελήσετε να το ελέγξετε επίσης. περιλαμβάνει τη σύνταξη του δικού σας χειριστή PHP και την ενσωμάτωσή του στη «επίσημη» διαδικασία WordPress AJAX.

Η μέθοδος AJAX

Ακολουθεί η βασική μορφή ενός αιτήματος AJAX:

$ .ajax ({type: "GET or POST", url: "API ή το PHP χειριστή URL", τύπος δεδομένων: "JSON", // ανάλογα με το είδος των δεδομένων που θέλετε να επιστρέψετε, αλλά το JSON είναι το πιο κοινά δεδομένα: {// ένα σύνολο κλειδιών: "value" pair}, επιτυχία: function (data) {// χειρισμός επιτυχούς επιστροφής δεδομένων}, σφάλμα: function (message) {// χειρισμός του σφάλματος } });

Αυτό φαίνεται αρκετά περίπλοκο στην αρχή - δεν βοηθάται από την έλλειψη εσοχών από αυτό το πρόσθετο κώδικα - αλλά θα δείτε πόσο εύκολο είναι να φτάσετε σε ένα πραγματικό παράδειγμα.

Flickr API AJAX

Σε αυτό το παράδειγμα, θα τραβήξουμε τις ετικέτες που σχετίζονται με την τρέχουσα ανάρτηση WordPress και θα πάρουμε μερικές εικόνες για προσθήκη στο τέλος του άρθρου. Υπάρχει μια παρόμοιο παράδειγμα στην τεκμηρίωση jQuery, αλλά χρησιμοποιεί μια μέθοδο συντόμευσης που ονομάζεται getJSON () αντί να εξηγούμε μια πλήρη μορφή AJAX. Αν και αυτός είναι ένας έγκυρος τρόπος για να κάνετε πράγματα αν γνωρίζετε ότι πρόκειται να λάβετε μόνο δεδομένα JSON, πιστεύω ότι η εκμάθηση της πραγματικής μεθόδου AJAX είναι πιο σημαντική, έτσι θα το κάνουμε.

Πρώτα, ένα πάνω single.php και θα προσπαθήσουμε να επαναλάβουμε μια απλή ξεχωριστή λίστα με τις τρέχουσες ετικέτες ανάρτησης. Συνήθως, θα χρησιμοποιούσατε οι ετικέτες () να το κάνουμε αυτό, αλλά αυτό δεν είναι καλό καθώς θέλουμε να τα αποθηκεύσουμε τελικά ως μεταβλητή, ενώ οι ετικέτες () τους αντανακλά κατευθείαν προ-μορφοποιημένους. Αντ 'αυτού, θα χρησιμοποιήσουμε get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist ως $ tag) { echo $ tag-> όνομα. ","; }

Λειτουργεί όμορφα, οπότε θα εμφανίσουμε αυτό το αίτημα AJAX στη διεύθυνση URL του Flickr API ως εξής (σημείωση, αυτό είναι ένα στιγμιότυπο οθόνης - για να διατηρηθεί η εσοχή, ο κωδικός είναι διαθέσιμος στη διεύθυνση αυτό το PasteBin).

Σε αυτό το σημείο, το κάνει μόνο για έξοδο στην κονσόλα του προγράμματος περιήγησης ή για ειδοποίηση ενός μηνύματος σφάλματος εάν υπάρχει. Για να κάνετε κάτι με τα δεδομένα που επιστράφηκαν, προσθέστε κάπου για να τοποθετηθούν οι εικόνες:

Και επεξεργαστείτε το επιτυχία παράμετρος της κλήσης AJAX για επανάληψη μέσω του αντικείμενα που επιστρέφονται.

$ .each (data.items, function (i, item) {if (i == 3) επιστροφή false; // σταματήστε όταν έχουμε 3 $ ("# flickr"). append (""); });

Και εκεί το έχουμε. Είμαστε προσάρτημα 3 στοιχεία από το αντικείμενο JSON που επιστράφηκε (τα δεδομένα είναι μηδενικά ευρετηριασμένα, οπότε αν φτάσουμε στο στοιχείο 3, βρισκόμαστε στην πραγματικότητα στο τέταρτο στοιχείο. Μπερδεύω, το ξέρω. Σε αυτό το σημείο, χρησιμοποιούμε επιστροφή ψευδής να πηδήξω από το καθε() iterator). Έχω ήδη εξετάσει το περιεχόμενο των αντικειμένων που επιστρέφονται, οπότε γνωρίζω τη δομή δεδομένων και εξάγω μόνο έναν σύνδεσμο και μια αναφορά IMG. Αν σας ενδιαφέρει να μάθετε τι άλλο επιστρέφεται, απλώς ρίξτε ένα console.log (στοιχείο) εκεί μέσα.

Εδώ είναι τα αποτελέσματα στον ιστότοπο δοκιμών μου και το πλήρης κωδικός σε αυτό το PasteBin. Παρατηρήστε ότι τα αποτελέσματα που επιστρέφονται είναι βασικά άχρηστα - η ανάρτησή μου περιελάμβανε την ετικέτα DIY για ένα βόλτα με κοτόπουλοκαι ο Flickr μου έδωσε πλέξιμο DIY. Ομορφη. Φυσικά, αυτό είναι ένα από τα εμπόδια που αντιμετωπίζετε όταν εργάζεστε με ένα API και κάνετε αυτόματα πράγματα. θα μπορούσατε είτε να προσθέσετε ξανά ετικέτες στις αναρτήσεις σας (μια σημαντική δέσμευση), να αλλάξετε το αίτημα για να ζητήσετε "όλες" ετικέτες αντί για "οποιαδήποτε" (πιθανό να επιστρέψει τίποτα σε αυτήν την περίπτωση), ή να βρείτε ένα νέο προσαρμοσμένο πεδίο στο οποίο θα καθορίζατε μια στοχευμένη λέξη-κλειδί για χρήση με το API (πιθανώς το ευκολότερο).

Θέματα SEO

Αυτό δεν είναι σημαντικό σημείο, αλλά δεδομένου ότι ασχολείστε με την ανάπτυξη ιστότοπων θα έπρεπε αναφέρεται: οι μηχανές αναζήτησης δεν θα ευρετηριάσουν περιεχόμενο που δεν υπάρχει κατά τη φόρτωση σελίδας, όπως κάτι που έχει γίνει μέσω AJAX. Το απόλυτο χειρότερο πράγμα που θα μπορούσατε να κάνετε είναι να AJAXify πλήρως το ιστολόγιό σας, έτσι ώστε η αρχική σελίδα ήταν απλώς ένα κοντέινερ τύπου iframe για όλο το περιεχόμενο που φορτώνεται δυναμικά. Χρησιμοποιήστε το AJAX με σύνεση, για να ενισχύω το περιεχόμενο της σελίδας, όχι ως αντικατάσταση. Ή αντιμετωπίζουμε τρομερές συνέπειες.

Ευχαριστώ που διαβάσατε και ελπίζω να σας δώσω μερικές ιδέες. Φυσικά, το Flickr δεν είναι το μόνο API εκεί έξω - μόνο το Google "δημόσιο API"Και σίγουρα θα βρείτε περισσότερα πράγματα που θα μπορούσατε να παίξετε.

Την επόμενη εβδομάδα θα είναι το τελευταίο μάθημα της σειράς jQuery Tutorial καθώς ρίχνουμε μια ματιά στο plugin jQuery UI. Όπως πάντα, τα σχόλια και οι προτάσεις είναι ευπρόσδεκτες. Εάν έχετε μια ερώτηση από την οποία θα επωφεληθούν άλλοι, σκεφτείτε το ενδεχόμενο να το δημοσιεύσετε στον ιστότοπό μας για τις απαντήσεις.