Λύσεις για 5 κοινά προβλήματα Ajax

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

Ωστόσο, υπάρχουν προκλήσεις στην εφαρμογή της λειτουργικότητας Ajax σε μια ιστοσελίδα.

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

Παρόλο που υπάρχουν πολλά περισσότερα για να συζητήσουμε και να ερευνήσουμε και τα πέντε θέματα, αυτή η ανάρτηση θα πρέπει να δώσει σε αρχάριους και ενδιάμεσους προγραμματιστές του Ajax κάποιες σταθερές συμβουλές για την εφαρμογή της λειτουργικότητας του Ajax με πιο φιλικό και προσβάσιμο τρόπο .

Πρόβλημα # 1: Το περιεχόμενο δεν είναι συμβατό προς τα πίσω

Αυτό το πρόβλημα παρουσιάζεται όταν ένας σχεδιαστής έχει ενσωματώσει τις βελτιώσεις JavaScript και Ajax στην αρχιτεκτονική του ιστοτόπου τους χωρίς να κάνει διατάξεις για προγράμματα περιήγησης που έχουν απενεργοποιήσει το JavaScript.

Τίποτα δεν είναι λάθος με τον προγραμματισμό μιας ιστοσελίδας με JavaScript και Ajax. στην πραγματικότητα, στη σημερινή αγορά, οι εκτιμήσεις JavaScript πρέπει να αποτελούν αναπόσπαστο μέρος της διαδικασίας σχεδιασμού. Αλλά θα πρέπει να βεβαιωθείτε ότι ο ιστότοπος είναι συμβατός προς τα πίσω (ή ότι υποβαθμίζεται με χαρά) κατά την εκκίνηση.

Λύση: Εφαρμόστε τον Ajax ως Βελτίωση σε μια ήδη λειτουργούσα ιστοσελίδα

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

Ας υποθέσουμε ότι έχετε μια σελίδα "Πληροφορίες Εργαζομένων" που έχει ξεχωριστό σύνδεσμο για κάθε υπάλληλο. Χρησιμοποιώντας την τεχνολογία από την πλευρά του διακομιστή, θα μπορούσατε να εμφανίσετε το περιεχόμενο για έναν συγκεκριμένο υπάλληλο με βάση μια τιμή που πέρασε μέσω της συμβολοσειράς ερωτήματος, όπως αυτή:

employees?view=VP">  Frank Smith - ΑντιπρόεδροςJim Williams - Λογιστής

Όλοι οι παραπάνω σύνδεσμοι οδηγούν στην ίδια σελίδα, στη σελίδα "Υπάλληλοι" , η οποία αλλάζει σύμφωνα με τη μεταβλητή στη συμβολοσειρά ερωτήματος. Οι πληροφορίες κάθε υπαλλήλου θα φορτωθούν από το διακομιστή, κάτι που θα μπορούσε να γίνει με διάφορους τρόπους: μέσω μιας βάσης δεδομένων. ή ακόμα και με τη χρήση XML.

Όποιος σύνδεσμος με τον εργαζόμενο κάνει κλικ, ολόκληρη η σελίδα θα πρέπει να φορτωθεί για να παραδοθούν οι ζητούμενες πληροφορίες.

Έτσι, το περιεχόμενο είναι πλήρως προσβάσιμο πριν από κάθε επικάλυψη του Ajax επιστρώνονται στην κορυφή. Στη συνέχεια, χρησιμοποιώντας το JavaScript, η ανανέωση ολόκληρης της σελίδας θα μπορούσε να διακοπεί και το περιεχόμενο να φορτωθεί αντ 'αυτού μέσω του Ajax. Ο σύνδεσμος που πατήθηκε με κλικ μπορεί να αναγνωριστεί από αναγνωριστικό ή από τον έλεγχο της τιμής του χαρακτηριστικού HREF στην άγκυρα.

Παρόλο που το περιεχόμενο είναι πλήρως προσβάσιμο με την απενεργοποίηση του JavaScript, οι περισσότεροι χρήστες θα δουν την ενισχυμένη έκδοση που βασίζεται σε Ajax.

Η αρχή της προοδευτικής ενίσχυσης για το Ajax είναι γνωστή, επειδή χρησιμοποιείται συνήθως για διακριτικές τεχνικές JavaScript και είναι εγγενής στο CSS, όπως φαίνεται από το παρακάτω γραφικό:

Έτσι, οικοδομήστε τον ιστότοπό σας για να λειτουργήσει χωρίς JavaScript και, στη συνέχεια, προσθέστε JavaScript ως βελτιωτικό, ακριβώς όπως θα επισημάνετε το περιεχόμενό σας σε HTML και στη συνέχεια θα το "ενισχύσετε" με το CSS.

Πρόβλημα # 2: Ο δείκτης φόρτωσης του προγράμματος περιήγησης δεν ενεργοποιείται από αιτήματα Ajax

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

Οι παρακάτω εικόνες δείχνουν αυτήν την κινούμενη ένδειξη από μερικά δημοφιλή προγράμματα περιήγησης.


Ο δείκτης φόρτωσης του Internet Explorer είναι ένας συμπαγής κύκλος με κλίση που περιστρέφεται ενώ φορτώνεται το περιεχόμενο.


Ο Firefox εμφανίζει μια παρόμοια εικόνα μικρών κύκλων περιστροφής σε διαφορετικές αποχρώσεις του γκρι.


Το Google Chrome περιστρέφεται σε ημικύκλιο.

Το πρόβλημα είναι ότι τα αιτήματα Ajax δεν ενεργοποιούν αυτή την ένδειξη "φόρτωσης" που είναι ενσωματωμένη στα προγράμματα περιήγησης.

Λύση: Εισαγάγετε έναν παρόμοιο δείκτη φόρτωσης κοντά στο περιεχόμενο που είναι φορτωμένο

Η κοινή λύση σε αυτό είναι η ενσωμάτωση ενός δείκτη προσαρμοσμένης προόδου στο αίτημα του Ajax. Ορισμένοι ιστότοποι προσφέρουν δωρεάν γραφικά "φόρτωσης Ajax".


Preloaders.net έχει μια σειρά από φανταχτερά, προσαρμόσιμα κινούμενα γραφικά για να διαλέξετε.

Η εφαρμογή αυτού του προσαρμοσμένου γραφικού φόρτωσης ή δείκτης προόδου στη λειτουργικότητα Ajax του ιστότοπού σας είναι απλά θέμα προβολής και απόκρυψης σε κατάλληλες ώρες μέσω JavaScript.

Ο κωδικός σας Ajax θα περιλαμβάνει γραμμές κώδικα που θα σας ενημερώνουν εάν η αίτηση βρίσκεται σε εξέλιξη ή ολοκληρωθεί. Χρησιμοποιώντας το JavaScript, μπορείτε να εμφανίσετε το κινούμενο γραφικό ενώ επεξεργάζεται το αίτημα και στη συνέχεια να το αποκρύψετε όταν ολοκληρωθεί η ενέργεια.

Πρόβλημα # 3: Ο χρήστης δεν γνωρίζει ότι έχει ολοκληρωθεί ένα αίτημα Ajax

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

Λύση: Χρησιμοποιήστε ένα ξεχωριστό μήνυμα "Αίτηση ολοκληρώθηκε"

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

Αν και αυτός ο συγκεκριμένος δείκτης δεν επισημαίνει ένα συμπληρωμένο αίτημα Ajax, η αρχή είναι ίδια: το πλαίσιο "Επιτυχία" εμφανίζεται αφού η σελίδα που υποβάλλει τη φόρμα έχει τελειώσει τη φόρτωση και το κουτί είναι πολύχρωμο και διακριτό.

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

Ένας παρόμοιος αλλά πιο λεπτός τρόπος για να δείξει ότι μια περιοχή περιεχομένου έχει ενημερωθεί είναι η κίτρινη τεχνική εξασθένησης . Αυτή η μέθοδος είναι εξοικειωμένη με τους χρήστες, διακριτική και λειτουργεί καλά με περιεχόμενο που έχει φορτωθεί με Ajax.

Πρόβλημα # 4: Τα αιτήματα Ajax δεν μπορούν να έχουν πρόσβαση σε υπηρεσίες Web τρίτου μέρους

ο XMLHttpRequest το αντικείμενο, το οποίο είναι στη ρίζα όλων των αιτήσεων του Ajax, περιορίζεται στην υποβολή αιτημάτων στον ίδιο τομέα με τη σελίδα που υποβάλλει το αίτημα. Υπάρχουν όμως περιπτώσεις όπου θα θέλατε να έχετε πρόσβαση σε δεδομένα τρίτων μέσω αιτήματος του Ajax. Πολλές υπηρεσίες ιστού καθιστούν τα δεδομένα τους προσβάσιμα μέσω ενός API.

Λύση: Χρησιμοποιήστε το διακομιστή σας ως διακομιστή μεσολάβησης

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

Επειδή ένα αίτημα Ajax προέρχεται από το πρόγραμμα περιήγησης του πελάτη, πρέπει να αναφέρεται ένα αρχείο σε άλλη τοποθεσία αλλά στον ίδιο τομέα με την πηγή του αιτήματος.

Ο διακομιστής σας, ωστόσο, σε αντίθεση με τον περιηγητή του πελάτη, δεν περιορίζεται κατ 'αυτόν τον τρόπο. Έτσι, όταν καλείται η σελίδα στον διακομιστή σας, εκτελείται στο παρασκήνιο όπως συνήθως, αλλά με πρόσβαση σε οποιονδήποτε τομέα.

Αυτό δεν παρουσιάζει κανένα κίνδυνο ασφαλείας για τον χρήστη, επειδή οι αιτήσεις προς την υπηρεσία τρίτου μέρους γίνονται στο διακομιστή σας. Έτσι, όταν οι πληροφορίες έχουν ληφθεί σε επίπεδο διακομιστή, το επόμενο βήμα στην κλήση Ajax είναι να στείλει μια απάντηση στον πελάτη, η οποία στην περίπτωση αυτή θα περιλαμβάνει τα δεδομένα που λαμβάνονται από την υπηρεσία web τρίτου μέρους.

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

Περαιτέρω ανάγνωση:

• Χρησιμοποιήστε ένα διακομιστή μεσολάβησης Web για διεπιχειρησιακές κλήσεις XMLHttpRequest
• Cross Domain Ajax: μια γρήγορη σύνοψη
• Διασύνδεση τομέα AJAX ερώτημα με jQuery

Πρόβλημα # 5: Δεν υπάρχει διαθέσιμη βαθιά σύνδεση

Αυτό είναι ένα πιο δύσκολο ζήτημα, αλλά μπορεί να μην απαιτείται, ανάλογα με τον τύπο του ιστότοπου ή την εφαρμογή σας. Το πρόβλημα προκύπτει όταν το περιεχόμενο φορτώνεται μέσω του Ajax και στη συνέχεια αλλάζει η κατάσταση του ιστότοπου χωρίς τη διεύθυνση URL που υποδεικνύει τη σελίδα που επηρεάζεται.

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

Λύση: Χρησιμοποιήστε άγκυρες εσωτερικής σελίδας

Για να διασφαλίσετε ότι μια συγκεκριμένη "κατάσταση" σε μια ιστοσελίδα που βασίζεται σε Ajax μπορεί να συνδεθεί και να καταγραφεί, μπορείτε να χρησιμοποιήσετε εσωτερικές συνδέσεις σελίδας, οι οποίες τροποποιούν τη διεύθυνση URL αλλά δεν ανανεώνουν τη σελίδα ή επηρεάζουν την κάθετη θέση της.

Αυτός ο απλός κώδικας δείχνει πώς γίνεται αυτό:

var currentAnchor = document.location;currentAnchor = String(currentAnchor);currentAnchor = currentAnchor.split("#");if (currentAnchor.length > 1) {currentAnchor = currentAnchor[1];} else {currentAnchor = currentAnchor[0];}switch(currentAnchor) {case "section1":// load content for section 1break;case "section2":// load content for section 2break;case "section3":// load content for section 3break;default:// load content for section 1break;}

Τα παραπάνω δεν είναι ένα λειτουργικό κομμάτι κώδικα, αλλά ένα θεωρητικό παράδειγμα για να καταδείξουν τα βασικά βήματα.

Οι δύο πρώτες γραμμές κώδικα θέτουν την τρέχουσα θέση σελίδας (URL) σε μια μεταβλητή. Στη συνέχεια, η τοποθεσία μετατρέπεται σε μια συμβολοσειρά ώστε να μπορούμε να την χειριστούμε.

Στη συνέχεια, διαιρούμε την συμβολοσειρά σε δύο μέρη μέσω του συμβόλου αγκύρωσης (#) και, στη συνέχεια, ελέγξτε αν ο πίνακας που δημιουργείται από τη διαίρεση είναι μεγαλύτερος από ένα στοιχείο. Μεγαλύτερο από ένα στοιχείο σημαίνει ότι η διεύθυνση URL έχει μια άγκυρα.

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

Επιπλέον, θα εφαρμόζαμε κώδικα για την αντιμετώπιση συνδέσμων που οδηγούν απευθείας σε συγκεκριμένο περιεχόμενο μέσω εσωτερικών αγκυρών. Ένας σύνδεσμος που δείχνει στο "content2" θα φορτώσει το περιεχόμενο στο "content2", και η συμβολοσειρά "# content2" θα προστεθεί στην τρέχουσα διεύθυνση URL.

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

Αυτή η εξήγηση είναι μόνο η θεωρία. Η ιδέα λειτουργεί και λειτουργεί πολύ καλά. Αλλά δεν εξήγησα όλες τις δυνατότητες, τα μειονεκτήματα και τις άλλες λεπτότητες της οικοδόμησης ενός ιστοτόπου ή μιας σελίδας με αυτό τον τρόπο.

Ακολουθήστε τους παρακάτω συνδέσμους για μια πιο ολοκληρωμένη συζήτηση του θέματος ή δοκιμάστε τον με τον εαυτό σας. Επίσης, σημειώστε ότι αυτό μπορεί να δοκιμαστεί χρησιμοποιώντας περιεχόμενο που αλλάζει μόνο με το JavaScript και δεν χρειάζεται να χρησιμοποιήσει το Ajax.

Περαιτέρω ανάγνωση:

• Βαθιά σύνδεση για το AJAX
• AJAX: Πώς να χειριστείτε τους σελιδοδείκτες και τα κουμπιά πίσω
• Ορισμός του πίσω κουμπιού και ενεργοποίηση της δημιουργίας σελιδοδεικτών για εφαρμογές AJAX

Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot του Louis Lazaris, ανεξάρτητου συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι , όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων. Μπορείτε να ακολουθήσετε τον Louis στο Twitter ή να έρθετε σε επαφή μαζί του μέσω της ιστοσελίδας του .

Ξέρετε για τυχόν λύσεις σε αυτές ή άλλες προκλήσεις του Ajax; Παρακαλώ μοιραστείτε τα σχόλιά σας παρακάτω ...