Καθώς πλησιάζουμε στο τέλος της σειράς mini-tutorial του jQuery, είναι καιρός να εξετάσουμε πιο προσεκτικά ένα από τα πιο χρησιμοποιημένα χαρακτηριστικά του jQuery. Το AJAX επιτρέπει σε έναν ιστότοπο να επικοινωνεί με ένα διακομιστή στο παρασκήνιο χωρίς να χρειάζεται να φορτιστεί ολόκληρη η σελίδα. Από τις άπειρες ροές κατάστασης του Facebook σε υποβολή δεδομένων φόρμας, υπάρχει ένα εκατομμύριο διαφορετικές καταστάσεις πραγματικής ζωής στις οποίες αυτή η τεχνική μπορεί να είναι χρήσιμη.
Εάν δεν έχετε διαβάσει τα προηγούμενα σεμινάρια, σας προτείνω να το κάνετε πριν το αντιμετωπίσετε καθώς χτίζουν το ένα το άλλο.
- Εισαγωγή: Τι είναι το jQuery και γιατί πρέπει να σας ενδιαφέρει; Δημιουργώντας το Διαδραστικό Ιστού: Εισαγωγή στο jQuery Δημιουργώντας το Διαδραστικό Ιστού: Εισαγωγή Το jQuery jQuery είναι μια βιβλιοθήκη scripting από την πλευρά του πελάτη που χρησιμοποιεί σχεδόν κάθε σύγχρονη ιστοσελίδα - κάνει ιστοσελίδες διαδραστικό. Δεν είναι η μόνη βιβλιοθήκη Javascript, αλλά είναι η πιο ανεπτυγμένη, υποστηριζόμενη και πιο ευρέως χρησιμοποιούμενη .... Διαβάστε περισσότερα
- 1: Εκπαιδευτές και Βασικά Εξετάσεις jQuery - Ξεκινώντας: Βασικά και Επιλογείς jQuery Tutorial - Ξεκινώντας: Βασικά και Επιλογείς Την περασμένη εβδομάδα μίλησα για το πόσο σημαντικό είναι το jQuery για κάθε σύγχρονο web developer και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βγάλουμε τα χέρια μας με κάποιο κωδικό και να μάθουμε πώς ... Διαβάστε περισσότερα
- 2: Μέθοδοι Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & Λειτουργίες Εισαγωγή Στο jQuery (Μέρος 2): Μέθοδοι & Λειτουργίες Αυτό είναι μέρος μιας τρέχουσας εισαγωγής αρχαρίων στην jQuery web programming series. Το πρώτο μέρος κάλυψε τα βασικά στοιχεία του jQuery σχετικά με τον τρόπο με τον οποίο θα συμπεριληφθεί στο έργο σας και τους επιλογείς. Στο μέρος 2, θα συνεχίσουμε με ... Διαβάστε περισσότερα
- 3: Αναμονή για τη φόρτωση σελίδων και τις ανώνυμες λειτουργίες Εισαγωγή στο jQuery (Μέρος 3): Αναμονή για τη φόρτωση σελίδων & Ανώνυμες λειτουργίες Εισαγωγή στο jQuery (Μέρος 3): Αναμονή της σελίδας για φόρτωση και ανώνυμες λειτουργίες Το jQuery είναι αναμφισβήτητα βασική δεξιότητα για το σύγχρονο web developer, και σε αυτή τη σύντομη μίνι σειρά, ελπίζω να σας δώσω τις γνώσεις για να αρχίσετε να το χρησιμοποιείτε στα δικά σας έργα web. Σε ... Διαβάστε περισσότερα
- 4: Γεγονότα jQuery (Μέρος 4) - Εκπαιδευτές συμβάντων jQuery Tutorial (Μέρος 4) - Ακούγοντες συμβάντων Σήμερα πρόκειται να το κτυπήσουμε με μια εγκοπή και να δείξουμε πραγματικά πού jQuery λάμπει - γεγονότα. Εάν ακολουθήσατε τα προηγούμενα μαθήματα, θα πρέπει τώρα να έχετε αρκετά καλή κατανόηση του βασικού κώδικα ... Διαβάστε περισσότερα
- Αντιμετώπιση προβλημάτων με τα Εργαλεία για προγραμματιστές του Chrome Ξεκαθαρίστε Προβλήματα ιστότοπου με τα Εργαλεία για Προγραμματιστές Chrome ή το Firebug Αποκαλύψτε τα Προβλήματα Ιστοσελίδας με τα Εργαλεία Προγραμματιστών Chrome ή το Firebug Εάν παρακολουθείτε τα tutorials του jQuery μέχρι τώρα, ίσως έχετε ήδη αντιμετωπίσει κάποια προβλήματα κώδικα και δεν γνωρίζετε πώς για να τα διορθώσετε. Όταν αντιμετωπίζετε ένα μη λειτουργικό κομμάτι κώδικα, είναι πολύ ... Διαβάστε περισσότερα
Ενα τι?
Το AJAX είναι ένα αρκτικόλεξο για το Asynchronous Javascript και το XML, αλλά η λέξη-κλειδί εδώ είναι ασύγχρονη . Το ασύγχρονο αναφέρεται στο γεγονός ότι αυτά τα αιτήματα εμφανίζονται στο παρασκήνιο, χωρίς διακοπή της εμπειρίας περιήγησης του χρήστη. Πιθανότατα δεν έχετε δει ποτέ ακόμη και πριν, αλλά εάν ένας ιστότοπος ενημερώνεται δυναμικά δυναμικά, υπάρχει μια καλή πιθανότητα να χρησιμοποιήσει το AJAX για να το κάνει.
Πριν από την AJAX, οποιαδήποτε μορφή αλληλεπίδρασης με έναν διακομιστή, είτε η ανάκτηση νέων δεδομένων είτε η αποστολή πληροφοριών από τον χρήστη, θα έπρεπε να γίνει με τη χρήση ενός νέου φόρτου σελίδας και ανακατευθύνσεων.
Σήμερα θα εξετάσουμε τη χρήση μιας υπηρεσίας τρίτου μέρους, του Flickr, από την οποία μπορούμε να χρησιμοποιήσουμε το AJAX για να φέρουμε κάποιες εικόνες χρησιμοποιώντας ένα τύπο δεδομένων JSON. Δεν έχει σημασία το πώς το Flickr υλοποιεί την πλευρά λήψης των πραγμάτων, επειδή αυτή είναι η ομορφιά των API - το μόνο που χρειάζεται να γνωρίζουμε είναι μια διεύθυνση URL API, το είδος των δεδομένων που πρόκειται να πάρουμε πίσω και πώς να το χειριστούμε.
Για περαιτέρω ανάγνωση, έγραψα άλλο ένα σεμινάριο πριν από λίγο καιρό για το χειρισμό AJAX στο WordPress για μια υποβολή φόρμας επικοινωνίας Ένα Tutorial για τη χρήση AJAX στο WordPress Ένα Tutorial για τη χρήση AJAX Στο WordPress AJAX είναι μια αξιοσημείωτη τεχνολογία ιστού που μας μετακόμισε πέρα από το απλό ", μεταβείτε σε μια άλλη σελίδα "δομή του Internet 1.0. Επιτρέπει στους ιστότοπους να λαμβάνουν δυναμικά και να προβάλλουν περιεχόμενο χωρίς τον χρήστη ... Διαβάστε περισσότερα, επομένως ίσως να θέλετε να το ελέγξετε επίσης. περιλαμβάνει τη σύνταξη του δικού σας χειριστή PHP και την ενσωμάτωσή του στην "επίσημη" διαδικασία WordPress AJAX.
Η μέθοδος AJAX
Εδώ είναι η βασική μορφή ενός αιτήματος AJAX:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Αυτό φαίνεται αρκετά σύνθετο στα πρώτα - δεν βοηθήθηκε από την έλλειψη indenting από αυτό το plugin κώδικα - αλλά θα δείτε πόσο εύκολο είναι όταν φτάσετε σε ένα παράδειγμα πραγματικού κόσμου.
Flickr API AJAX
Σε αυτό το παράδειγμα, πρόκειται να τραβήξουμε τις ετικέτες που σχετίζονται με την τρέχουσα ανάρτηση του WordPress και να φέρουμε μερικές εικόνες για προσάρτηση στο τέλος του άρθρου. Υπάρχει ένα παρόμοιο παράδειγμα στην τεκμηρίωση του jQuery, αλλά χρησιμοποιεί μια μέθοδο σύντομης περικοπής που ονομάζεται getJSON () αντί να εξηγεί μια πλήρη μορφή AJAX. Ενώ αυτό είναι ένας έγκυρος τρόπος να κάνετε τα πράγματα αν ξέρετε ότι θα πάρετε μόνο τα δεδομένα JSON πίσω, αισθάνομαι ότι η εκμάθηση της πραγματικής μεθόδου AJAX είναι πιο σημαντική, γι 'αυτό θα το κάνουμε.
Κατ 'αρχάς, ένα up single.php και θα προσπαθήσουμε να επαναλάβουμε μια απλή λίστα ξεχωριστών κόμμεων με τις τρέχουσες ετικέτες post. Συνήθως, θα χρησιμοποιούσατε τα_ταγίδια () για να το κάνετε αυτό, αλλά αυτό δεν είναι καλό καθώς θέλουμε τελικά να τα αποθηκεύσουμε ως μεταβλητή, ενώ τα_ταχεία () τους αντηχούν κατευθείαν προ-μορφοποιημένα. Αντ 'αυτού, θα χρησιμοποιήσουμε το get_the_tags ():
name.", "; }?> Αυτό λειτουργεί ωραία, γι 'αυτό θα το εξάγουμε μέσα σε ένα αίτημα AJAX στη διεύθυνση API του Flickr ως εξής (σημείωση, αυτό είναι ένα στιγμιότυπο οθόνης - για να διατηρηθεί η εσοχή, ο κώδικας είναι διαθέσιμος σε αυτό το PasteBin).
Σε αυτό το σημείο, το μόνο που κάνει για την έξοδο στην κονσόλα του προγράμματος περιήγησης ή ειδοποιεί ένα μήνυμα σφάλματος εάν υπάρχει. Για να κάνετε κάτι πραγματικά με τα δεδομένα που επιστρέφονται, προσθέστε κάπου για να τις τοποθετήσετε:
Και επεξεργαστείτε την παράμετρο επιτυχίας της κλήσης AJAX για να επαναλάβετε τα στοιχεία που επιστρέφονται.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Και εκεί το έχουμε. Προσθέτουμε 3 στοιχεία από το αντικείμενο JSON που επιστρέφεται (τα δεδομένα είναι μηδενικά ευρετηριασμένα, οπότε αν φτάσετε στο στοιχείο 3, είμαστε στην τέταρτη θέση.) Αναπόφευκτα, ξέρω ότι σε αυτό το σημείο χρησιμοποιούμε την επιστροφή ψευδής για να ξεπεράσουμε του κάθε iterator). Έχω ήδη εξετάσει τα περιεχόμενα των αντικειμένων που έχουν επιστραφεί, οπότε γνωρίζω τη δομή των δεδομένων και εξάγω μόνο μια σύνδεση και μια αναφορά IMG. Αν σας ενδιαφέρει να μάθετε τι άλλο επιστρέφεται, απλώς ρίξτε μια κονσόλα.log (στοιχείο) εκεί μέσα.
Ακολουθούν τα αποτελέσματα στον ιστότοπό μου δοκιμής και ο πλήρης κώδικας σε αυτό το PasteBin. Παρατηρήστε ότι τα αποτελέσματα που επιστρέφονται είναι βασικά σκουπίδια - η θέση μου περιελάμβανε την ετικέτα DIY για μια βόλτα στο τρέξιμο κοτόπουλου, και Flickr μου έδωσε DIY πλέξιμο. Ομορφη. Φυσικά, αυτό είναι ένα από τα εμπόδια που αντιμετωπίζετε όταν εργάζεστε με ένα API και κάνετε τα πράγματα αυτόματα. θα μπορούσατε είτε να επανατοποθετήσετε τις θέσεις σας (σημαντική επιχείρηση), να αλλάξετε το αίτημα για να ζητήσετε ετικέτες "όλες" αντί για "οποιεσδήποτε" (πιθανόν να μην επιστρέψετε τίποτα σε αυτήν την περίπτωση) ή να δημιουργήσετε ένα νέο προσαρμοσμένο πεδίο για το οποίο θα καθορίσει μια στοχευμένη λέξη-κλειδί που θα χρησιμοποιήσει με το API (ίσως το πιο εύκολο).
SEO εκτιμήσεις
Αυτό δεν είναι ένα σημαντικό σημείο, αλλά δεδομένου ότι είστε στην ανάπτυξη ιστοσελίδων θα πρέπει να αναφέρουμε: οι μηχανές αναζήτησης δεν θα δείξουν περιεχόμενο που δεν υπάρχει στο φορτίο της σελίδας, όπως οτιδήποτε γίνεται μέσω AJAX. Το απόλυτο χειρότερο πράγμα που θα μπορούσατε να κάνετε είναι να AJAXify πλήρως το ιστολόγιό σας έτσι ώστε η αρχική σελίδα να είναι απλώς ένα κοντέινερ τύπου iframe για όλο το περιεχόμενο που φορτώνεται δυναμικά. Χρησιμοποιήστε το AJAX με σύνεση, για να βελτιώσετε το περιεχόμενο της σελίδας, όχι ως αντικατάσταση . Ή αντιμετωπίζουν κακές συνέπειες.
Ευχαριστώ για την ανάγνωση και ελπίζω ότι σας έδωσα κάποιες ιδέες. Φυσικά, το Flickr δεν είναι το μόνο API εκεί έξω - μόνο το Google " δημόσιο API " και είστε σίγουροι ότι θα βρείτε περισσότερα πράγματα που θα μπορούσατε να παίξετε γύρω με.
Την επόμενη εβδομάδα θα είναι το τελικό μάθημα της σειράς jQuery Tutorial καθώς θα ελέγξουμε την προσθήκη του jQuery UI. Όπως πάντα, τα σχόλια και οι προτάσεις είναι ευπρόσδεκτες. αν έχετε μια ερώτηση που θα επωφεληθούν από άλλους, σκεφτείτε να την τοποθετήσετε στον ιστότοπο απαντήσεων.