Πώς να δημιουργήσετε ένα αίτημα AJAX με jQuery για HTML5 και CSS3 Προγραμματισμός

Ο πρωταρχικός σκοπός μιας βιβλιοθήκης AJAX όπως το jQuery είναι να απλοποιήσει τις αιτήσεις AJAX για προγραμματιστές HTML5 και CSS3. Είναι δύσκολο να πιστέψεις πόσο εύκολο μπορεί να είναι αυτό με το jQuery.

Πώς να συμπεριλάβετε ένα αρχείο κειμένου με AJAX

Ανατρέξτε σε αυτόν τον καθαρό κώδικα:

ajax. html $ (έγγραφο). έτοιμο (getAJAX); συνάρτηση getAJAX () {$ ("# output"). load ("hello. txt")?}

Το HTML είναι πολύ καθαρό. Απλά δημιουργεί ένα άδειο div που ονομάζεται έξοδος.

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

Ο μηχανισμός load () που περιγράφεται εδώ είναι κατάλληλος για μια βασική κατάσταση όπου θέλετε να φορτώσετε ένα απλό κείμενο ή ένα απόσπασμα κώδικα HTML στις σελίδες σας.

Δημιουργία CMS ενός φτωχού με AJAX

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

Παρόλο που δεν υπάρχει τίποτα που να συγκλονίζει τη σελίδα από τη σκοπιά του χρήστη, η εμφάνιση του κώδικα μπορεί να δείξει μερικές εκπλήξεις:

CMS χρησιμοποιώντας AJAX $ (init); λειτουργία init () {$ ("# τίτλος"). φορτίο ("κεφαλή html"); $ ("# menu"). φόρτωση ("μενού. html"); $ ("# content1"). φορτίο ("story1. html"); $ ("# content2"). φορτίο ("story2. html"); $ ("# footer"). φορτίο ("υποσέλιδο. html");}; 
Κοιτάξτε τον κώδικα και μπορείτε να δείτε αυτά τα ενδιαφέροντα χαρακτηριστικά:


Η σελίδα δεν έχει περιεχόμενο! Όλα τα διαζεύματα είναι κενά. Κανένα από τα κείμενα που εμφανίζονται στο στιγμιότυπο οθόνης δεν υπάρχει σε αυτό το έγγραφο, αλλά όλα αποσπώνται δυναμικά από μικρότερα αρχεία.


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


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


Όλα τα περιεχόμενα βρίσκονται σε ξεχωριστά αρχεία. Ανατρέξτε στον κατάλογο και μπορείτε να δείτε πολύ απλά αρχεία HTML που περιέχουν μικρά τμήματα της σελίδας. Για παράδειγμα, story1. html μοιάζει με αυτό:
Βιβλίο I - Δημιουργία του Ιδρύματος HTML

Βάσεις HTML ήχου
Είναι όλο για Επικύρωση
Επιλογή Εργαλείων
Διαχείριση Πληροφοριών με Λίστες και Πίνακες
Προσθήκη εικόνων
Δημιουργία φορμών




Η μέθοδος init () εκτελείται σε έγγραφο .έτοιμο . Όταν το έγγραφο είναι έτοιμο, η σελίδα τρέχει τη μέθοδο init ().


Η μέθοδος init () χρησιμοποιεί κλήσεις AJAX για δυναμική φόρτωση περιεχομένου. Δεν είναι τίποτα περισσότερο από μια σειρά από μεθόδους φόρτωσης jQuery ().


Αυτή η προσέγγιση μπορεί να φανεί σαν πολλή δουλειά, αλλά έχει μερικά πολύ ενδιαφέροντα χαρακτηριστικά:


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


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


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


Δημιουργήστε ένα ενιαίο πρότυπο για ολόκληρο τον ιστότοπό σας.
Δημιουργήστε βασικές HTML και CSS για να διαχειριστείτε τη συνολική εμφάνιση και την αίσθηση για ολόκληρο τον ιστότοπό σας. Μην ανησυχείτε για το περιεχόμενο ακόμα. Απλά δημιουργήστε τοποθετημένα σύμβολα για όλα τα στοιχεία της σελίδας σας. Βεβαιωθείτε ότι δώσατε σε κάθε στοιχείο ένα αναγνωριστικό και γράψτε το CSS για να τοποθετήσετε τα πράγματα όπως θέλετε.


Προσθέστε υποστήριξη jQuery.
Κάντε μια σύνδεση στη βιβλιοθήκη jQuery και κάντε μια προεπιλεγμένη μέθοδο init (). Τοποθετήστε τον κώδικα για να χειριστείτε τα μέρη εκείνα της σελίδας που θα είναι πάντα συνεπή.


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


Προσαρμόστε κάθε σελίδα αλλάζοντας τη λειτουργία init () .
Το μόνο μέρος του προτύπου που αλλάζει είναι η λειτουργία init (). Όλες οι σελίδες σας θα είναι ίδιες, εκτός από τις προσαρμοσμένες λειτουργίες init () που φορτώνουν διαφορετικό περιεχόμενο.


Φορτώστε το προσαρμοσμένο περιεχόμενο στο divs με το AJAX.
Χρησιμοποιήστε τη λειτουργία init () για να φορτώσετε περιεχόμενο σε κάθε div.


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