Πώς λειτουργεί ο Ajax
Στην παραδοσιακή κωδικοποίηση JavaScript, αν θέλετε να λάβετε οποιαδήποτε πληροφορία από μια βάση δεδομένων ή ένα αρχείο στον διακομιστή ή να στείλετε πληροφορίες χρήστη σε ένα διακομιστή, θα πρέπει να κάνετε μια φόρμα HTML και τα δεδομένα GET ή POST στο διακομιστή. Ο χρήστης θα πρέπει να κάνει κλικ στο κουμπί "Υποβολή" για να στείλει / λάβει τις πληροφορίες, να περιμένει να ανταποκριθεί ο διακομιστής και στη συνέχεια να φορτωθεί μια νέα σελίδα με τα αποτελέσματα.
Επειδή ο διακομιστής επιστρέφει μια καινούργια σελίδα κάθε φορά που ο χρήστης υποβάλλει την είσοδο, οι παραδοσιακές εφαρμογές ιστού μπορούν να τρέξουν αργά και τείνουν να είναι λιγότερο φιλικές προς το χρήστη. Με το AJAX, το JavaScript επικοινωνεί απευθείας με το διακομιστή μέσω του αντικειμένου JavaScript XMLHttpRequest.
Με ένα αίτημα HTTP, μια ιστοσελίδα μπορεί να κάνει ένα αίτημα και να λάβει μια απάντηση από έναν διακομιστή ιστού, χωρίς να φορτώσει ξανά τη σελίδα. Ο χρήστης θα παραμείνει στην ίδια σελίδα και αυτός ή αυτή δεν θα παρατηρήσει ότι τα σενάρια ζητούν σελίδες ή στέλνουν δεδομένα σε ένα διακομιστή στο παρασκήνιο.
Αυτή η εικόνα είναι μια απλουστευμένη εισαγωγή για το πώς λειτουργεί το Ajax:
Ο χρήστης στέλνει ένα αίτημα που εκτελεί μια ενέργεια και η απόκριση της ενέργειας εμφανίζεται σε ένα στρώμα, αναγνωρίζεται από ένα αναγνωριστικό, χωρίς να φορτώνεται ξανά ολόκληρη η σελίδα. Για παράδειγμα, ένα στρώμα με αυτό το id:
Στα επόμενα βήματα θα δούμε πώς να δημιουργήσετε μια XMLHttpRequest και να λάβετε απάντηση από το διακομιστή.
1. Δημιουργήστε XMLhttpRequest
Τα διαφορετικά προγράμματα περιήγησης χρησιμοποιούν διαφορετικές μεθόδους για να δημιουργήσουν το αντικείμενο XMLHttpRequest. Ο Internet Explorer χρησιμοποιεί ένα στοιχείο ActiveXObject, ενώ άλλα προγράμματα περιήγησης χρησιμοποιούν το ενσωματωμένο αντικείμενο JavaScript που ονομάζεται XMLHttpRequest.
Για να δημιουργήσετε αυτό το αντικείμενο και να ασχοληθείτε με διαφορετικά προγράμματα περιήγησης, πρόκειται να χρησιμοποιήσουμε μια δήλωση "δοκιμάστε και πιάστε".
λειτουργία ajaxFunction ()
{
var xmlHttp;
δοκιμάστε
{
// Firefox, Opera 8.0+, Safari
xmlHttp = νέα XMLHttpRequest ();
}}
αλιευμάτων (ε)
{
// Internet Explorer
δοκιμάστε
{
xmlHttp = νέο ActiveXObject ("Msxml2.XMLHTTP");
}}
αλιευμάτων (ε)
{
δοκιμάστε
{
xmlHttp = νέο ActiveXObject ("Microsoft.XMLHTTP");
}}
αλιευμάτων (ε)
{
alert ("Το πρόγραμμα περιήγησής σας δεν υποστηρίζει AJAX!");
επιστροφή ψευδής?
}}
}}
}}
2. Αποστολή αίτησης στον διακομιστή
Για να στείλουμε ένα αίτημα στο διακομιστή, χρησιμοποιούμε τη μέθοδο open () και τη μέθοδο send ().
Η μέθοδος open () λαμβάνει τρία επιχειρήματα. Το πρώτο όρισμα καθορίζει τη μέθοδο που θα χρησιμοποιηθεί κατά την αποστολή της αίτησης (GET ή POST). Το δεύτερο όρισμα καθορίζει τη διεύθυνση URL του σεναρίου διακομιστή. Το τρίτο επιχείρημα ορίζει ότι το αίτημα πρέπει να γίνεται ασύγχρονα. Η μέθοδος send () στέλνει την αίτηση στο διακομιστή.
xmlHttp.open ("GET", "time.asp", αληθές);
xmlHttp.send (null);
3. Γράφοντας script πλευρά πλευράς
Το responseText θα αποθηκεύσει τα δεδομένα που έχουν επιστραφεί από το διακομιστή. Εδώ θέλουμε να στείλουμε πίσω την τρέχουσα ώρα. Ο κώδικας στο "time.asp" μοιάζει με αυτό:
<%
response.expires = -1
response.write (ώρα)
%>
4. Κατανοώντας την απάντηση
Τώρα πρέπει να καταναλώσουμε την απάντηση που λάβαμε και να την εμφανίσουμε στον χρήστη.
xmlHttp.onreadystatechange = λειτουργία ()
{
αν (xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}}
}}
xmlHttp.open ("GET", "time.asp", αληθές);
xmlHttp.send (null);
}}
5. Συμπληρώστε τον κώδικα
Τώρα πρέπει να αποφασίσουμε πότε πρέπει να εκτελεστεί η λειτουργία AJAX. Θα αφήσουμε τη λειτουργία να εκτελείται "πίσω από τις σκηνές" όταν ο χρήστης πληκτρολογεί κάτι στο πεδίο κειμένου ονόματος χρήστη. Ο πλήρης κώδικας μοιάζει με αυτό: