[Παίζει μουσική] DOUG LLOYD: Έτσι μια πιο το είδος της αντίληψη ότι είδος της πέφτει κάτω από την ομπρέλα του JavaScript είναι κάτι που ονομάζεται AJAX. Μέχρι αυτό το σημείο, μας αλληλεπίδραση με JavaScript έχει περιοριστεί σε μια ωθήσει κουμπί και κάτι συμβαίνει. Και συγκεκριμένα, το κάτι που συμβαίνει Είναι ιστοσελίδες μας δείχνετε και να αισθάνεστε αλλαγές. Δικαίωμα? Όπως ειδικότερα, στην έγγραφο βίντεο μοντέλο αντικειμένου, Έχω αλλάξει το χρώμα του φόντου. Αλλά όταν το έκανα αυτό, δεν είχα να κάνει οποιαδήποτε ειδική πρόσθετη αιτήματα. Δεν είχα να ζητήσει ο server μου στείλει μια νέα σελίδα. Μόλις άλλαξα αυτό που ήδη είχε. Δεν είχα να φορτώσετε τη σελίδα μου, και σίγουρα τα πράγματα άλλαξαν, έτσι ώστε να είναι μεγάλη. Αλλά υπάρχει σίγουρα κάποια χειροκίνητη αλληλεπίδραση ενδιαφερόμενο χρήστη. AJAX είναι ένα δροσερό τεχνική που επιτρέπει μας για να ενημερώσετε το περιεχόμενο μιας σελίδας, και όχι μόνο την εμφάνιση και την αίσθηση, χωρίς την επαναφόρτωση. 

Και από ειδικά όταν δηλαδή την ενημέρωση του περιεχομένου μιας σελίδας, Δεν λέω ότι έχουμε ξαναγράψει η σελίδα με τη χρήση JavaScript. Λέω στην πραγματικότητα να ζητήσει περισσότερες πληροφορίες από το διακομιστή χωρίς σελίδα χρειάζεται να φορτώσετε εκ νέου. 

Τώρα αυτό το είδος της ένα κομμάτι της μια πιο προηγμένη τεχνική ότι θα πάμε να μιλήσουμε περίπου σε αυτό το βίντεο. Εμείς πάμε για να έχουν κάποια αλληλεπίδραση. Αλλά όταν το κάνουμε, είμαι πρόκειται να είναι ζητάει να τον web server. Στην περίπτωση αυτή, ακριβώς ό, τι είναι την εκτέλεση του Apache web server μου. Πάω να κάνει πρόσθετες αιτήσεις, ενώ είμαι επίσκεψη σε μια ιστοσελίδα, αλλά η σελίδα μου δεν θα ανανεωθεί. 

Είναι ακριβώς πρόκειται να ασύγχρονα ενημερώσετε τη σελίδα μου. Και αυτό είναι, στην πραγματικότητα, AJAX οποίο σημαίνει, είναι Asynchronous JavaScript και XML. XML είναι ένα άλλο είδος της σήμανσης γλώσσα, και μπορείτε να ταξινομήσετε του σκεφτείτε ότι ακριβώς όπως HTML. Δεν είναι ακριβώς το ίδιο πράγμα, αλλά είναι ουσιαστικά μόνο μια γλώσσα σήμανσης. Έτσι, είναι μια ασύγχρονη JavaScript και μια γλώσσα σήμανσης. 

Έτσι για να χρησιμοποιήσετε αυτό το AJAX technique-- AJAX δεν είναι ένα ξεχωριστό γλώσσα προγραμματισμού. Είναι απλά ένα είδος σύνολο των techniques-- μας Πρέπει να δημιουργήσουμε ένα ειδικό JavaScript αντικείμενο, το οποίο ονομάζεται XMLHttpRequest. Τώρα, είναι πολύ εύκολο να το κάνουμε αυτό. Εμείς απλώς να πω var, ανεξαρτήτως θέλουμε να καλέσετε αυτό το αντικείμενο, ισούται με νέα XMLHttpRequest. Και τώρα έχουμε τώρα λαμβάνεται AJAX ένα είδος αντικειμένου, ή ένα XMLHttpRequest αντικείμενο, το οποίο θα επιτρέψει μας επιτρέπει να αναβαθμίσουμε ασύγχρονα σελίδα μας. 

Αφού έχουμε πάρει αυτό το νέο αντικείμενο, αυτό XMLHttpRequest, πρέπει να κάνουμε κάτι για να του onreadystatechange συμπεριφορά. Onreadystatechange συμπεριφορά είναι πραγματικά μόνο όταν κάνετε μία αίτηση σε μια ιστοσελίδα, η σελίδα περνά μέσα από μια σειρά από βήματα. Πρώτον, η αίτηση δεν έχει αποσταλεί. Στη συνέχεια, η αίτηση έχει σταλεί, αλλά δεν τις δέουσες ενέργειες. Στη συνέχεια, η αίτηση έχει ενεργήσει επάνω. Στη συνέχεια, η αίτηση είναι αποστέλλεται πίσω σε σας. 

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

Κάτι συνέβη όταν κάτι που έγινε κλικ. Σε αυτήν την περίπτωση, είναι απλώς κάτι που είναι συμβαίνει όταν η κατάσταση της σελίδας μας αλλαγές. Υπάρχουν δύο άλλες ιδιότητες που είναι το είδος of-- ότι δεν είναι οι μόνες ιδιότητες που είναι εγγενή XMLHttpRequest, αλλά είναι αρκετά σημαντικές. Υπάρχει κάτι που ονομάζεται readyState, το οποίο όπως μπορείτε να μαντέψετε, είναι σχετικές με onreadystatechange. Σας λέει στην πραγματικότητα ποια είναι η readyState είναι. 0, 1, 2, 3, και 4 είναι οι δυνατότητες εκεί, και το είδος των περίπου αντιστοιχούν σε ό, τι Ήμουν απλά μιλάμε για ένα δευτερόλεπτο πριν. 

Και τότε κατάσταση, η οποία ελπίζουμε ότι αν όλα πήγαν ΟΚ, είναι 200, η ​​οποία είναι μικρή για, βέβαια, εντάξει, το οποίο είμαστε εξοικειωμένοι με από το http. Έτσι, ελπίζουμε ότι η κατάσταση ετοιμότητας μας είναι τέσσερα, και η κατάσταση μας είναι 200. Και αν έτοιμο το κράτος μας είναι τέσσερις, και η απόκριση είναι έτοιμα να τεθούν σχετικά με την σελίδα, και η κατάσταση είναι 200, ήμασταν σε θέση να κάνουμε πάντα με επιτυχία, τώρα μπορούμε ασύγχρονα ενημερώσετε τη σελίδα μας χωρίς να χρειάζεται να φορτώσετε Το σύνολο του περιεχομένου του. 

Αφού έχουμε καθορίσει τι θα συμβεί με τη συμπεριφορά onreadystatechange, και έχουμε ελέγξει ότι readyState είναι 4 και η κατάσταση είναι 200, τότε το μόνο που χρειάζεται να κάνετε είναι να να ανοίξει μια ασύγχρονη αίτημα, το οποίο είναι μόνο το γεγονός, μια διεύθυνση http γενικά GET αίτημα. Απλά κάνει με προγραμματισμό, αντί μέσω του web browser μας. Και τότε στέλνουμε το αίτημα αυτό. Έτσι, αυτό που κάνει αυτό ίσως μοιάζουν σε ένα πλαίσιο; Έτσι, εδώ είναι μια λειτουργία που ασχολείται με τα αιτήματα AJAX. ΕΝΤΆΞΕΙ? Και έχω αυθαίρετα είπε δέχεται ένα επιχείρημα. Και αυτό το είδος της μια γενικό σκελετό εδώ. Στην αρχή, έχουμε εαυτούς μας ένα νέο αντικείμενο XMLHttpRequest. Στη συνέχεια, θα πρέπει να ρυθμίσετε το onreadystatechange συμπεριφορά. Και έτσι Πάω να πω όταν οι αλλαγές readyState, Θέλω να καλέσετε τη λειτουργία αυτή. 

Η οποία πρόκειται να ζητήσει η ερώτηση, εάν το readyState είναι 4, εάν η readyState άλλαξε να είναι 4, και η κατάσταση ήταν 200, έτσι είχαμε μια επιτυχημένη αίτηση, Ι θέλουν να κάνουν κάτι για την σελίδα. Και θα ρίξουμε μια ματιά σε ένα παράδειγμα του τι ότι κάτι θα μπορούσε να είναι σε ένα δευτερόλεπτο. Έτσι, λοιπόν, τώρα έχω ορίζεται ανώνυμο μου λειτουργία, λειτουργία απάντησή μου, όποτε οι αλλαγές readyState. 

Έτσι, τότε το μόνο που χρειάζεται για να ανοίξει ένα να ζητήσει, σύμφωνα με την ανοικτή μέθοδο. Και στη συνέχεια, να στείλω αυτό το αίτημα. Και ας ρίξουμε μια ματιά ένα πιο συγκεκριμένο παράδειγμα του τι μπορεί να κάνει AJAX στις ιστοσελίδες μας. Γι 'αυτό έχουμε εδώ ένα πολύ απλό σελίδα που ονομάζεται home.html. Και έχω μια πληροφορία πηγαίνει εδώ και κάποιο είδος του drop-down μενού. 

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

Και εδώ, θα έχουν προφανώς Α Τμήμα του οποίου η ταυτότητα είναι infodiv, και κάποιες πληροφορίες πρόκειται να πάει εκεί. Και τότε έχω αυτή τη μορφή. Και μέσα από αυτό μορφή, έχω κάτι Επιλέξτε ονομάζεται, το οποίο είναι απλά ένα drop-down μενού με μια δέσμη των διαφορετικών επιλογών. Και προφανώς, όταν αυτό αλλάζει, όταν η επιλογή που έχει επιλεγεί έχει αλλάξει, Πάω να καλέσω κάποια λειτουργία cs50Info, και, στη συνέχεια, Πάω να περάσει σε this.value, όπου αυτό αναφέρεται σε ποια επιλογή επιλέχθηκε, και η αξία είναι μία από αυτές εδώ, η επιλογή = αξία ισούται άδειο, "Blumberg," "Bowden", "Chan," και "Malan". 

Λοιπόν, τι θα μπορούσε πράγματι να συμβεί εδώ όταν το κάνω αυτό; Λοιπόν, ας ρίξουμε μια δείτε blumberg.html. Μοιάζει να είναι απλώς μια απόσπασμα από κάποια μορφή html. Και στην πραγματικότητα, αυτό που ελπίζω πρόκειται να συμβεί εδώ είναι Πάω να είναι σε θέση να συνδέσετε Αυτό το HTML απευθείας στην ιστοσελίδα μου χωρίς να χρειάζεται να φορτώσετε η σελίδα, έτσι ώστε όταν Επιλέγω Χάνα από το drop-down μενού, πληροφορίες σχετικά με Hannah, ειδικότερα, τις πληροφορίες εδώ στην blumberg.html, είναι ό, τι εμφανίζεται στην σελίδα. Και δεν έχω να ανανεώσετε. Και αν επέλεξα κάποιος άλλος, πληροφορίες τους θα εμφανιστούν. Πώς μπορώ να το κάνω αυτό; Πάλι, αυτό απαιτεί να χρησιμοποιήσουμε κάποια AJAX. Και έτσι, θα ανοίξει ajax.js. Και εδώ είναι η λειτουργία, cs50Info. Αν το όνομα δεν είναι τίποτα, έχω επιστρέψει. Είμαι δεν πρόκειται να κάνει τίποτα, αν ο κενός τι έχει επιλέξει. Διαφορετικά, θα πάω να δημιουργήσετε ένα νέο XMLHttpRequest. Και τότε Πάω να πω, όταν η readyState αλλαγές, να ζητήσει αυτή τη λειτουργία. 

Και αν η readyState είναι 4 και η κατάσταση είναι 200, εδώ είναι λίγο της jQuery στη γραμμή 13. Αλλά όλα τα κάνω λέει, να αλλάξουν το περιεχόμενο του infodiv να είναι ό, τι πήρα πίσω ως απάντηση από HttpRequest μου. 

Τι είναι HttpRequest μου; Λοιπόν, αυτό είναι σωστό εδώ στη γραμμή 18 και 19. Γραμμή 18, είμαι βασικά προετοιμασία ένα GET αίτημα για όνομα + .html. Και πάλι, το όνομα είναι εδώ το επιχείρημα ότι ήταν πέρασε στην ως παράμετρος σε cs50Info. 

Έτσι, βασικά, είμαι περνώντας κάποιου όνομα, το οποίο ήταν αυτό το σύνολο των επιλογών που είδαμε στο drop-down μενού στη φόρμα. Παίρνω αυτό το όνομα. Και εγώ λέω ότι θα θέλατε να παρακαλώ να αποκτήσουν για μένα ότι file.html, και στη συνέχεια να στείλετε το αίτημα αυτό. 

Και έτσι ότι πρόκειται onreadystatechange να ακούει και περιμένει και περιμένει και να περιμένει μέχρι την readyState είναι 4, και η κατάσταση είναι 200. Έτσι είναι έτοιμο να σερβιριστεί, και το αίτημα ήταν επιτυχές. Και στη συνέχεια, αν είναι, πρόκειται να να αλλάξουν το περιεχόμενο του infodiv να είναι το κείμενο απάντηση που πήρα πίσω. 

Ας δούμε πώς αυτό μπορούσε πραγματικά να λειτουργήσει. Γι 'αυτό και θα το κεφάλι πάνω στο πρόγραμμα περιήγησής μου παράθυρο, και θα εξετάσουμε εδώ. Έτσι, ας ρίξουμε μια ματιά τι συμβαίνει εδώ στο AJAX. Έτσι θα επιλέξουμε κάποιον από το drop-down μενού. Έτσι, σε αυτή την περίπτωση, ας απλά επιλέξτε Χάνα. Και παρατηρήστε ότι της Hannah πληροφορίες έχει αλλάξει, αλλά δεν είχα any-- μου σελίδα δεν reload εντελώς. Τα πράγματα έμειναν. Τα περισσότερα από τα πράγματα έμειναν. AJAX δοκιμής δεν αλλάζει. Το ίδιο το κουμπί, αυτό drop-down μενού δεν άλλαξε. Πληροφοριών, αλλά εκεί έκανε αλλαγή. Και ανάλογα με το πώς γρήγορα τις κινήσεις του υπολογιστή μου, μπορείτε πραγματικά να δείτε ότι το περιεχόμενο εξαφανίζεται και επανεμφανίζεται έπειτα πραγματικά γρήγορα. Αυτό είναι το περιεχόμενο να είναι διαγράφονται από infodiv, και στη συνέχεια αντικαταστάθηκε με ένα νέα ασύγχρονη αίτηση. 

Έτσι, αν μπορώ να στραφούν να πω, Rob-- και πάλι, ρίξτε μια ματιά, και ίσως θα το δούμε στην πραγματικότητα εξαφανίζονται και επανεμφανίζονται γρήγορα. Μπορείτε να δείτε αυτό; Πώς ακριβώς έσκασε μακριά, και στη συνέχεια να ξαναγεμίζει; Αυτό είναι το αίτημα AJAX είδος που λαμβάνουν χώρα. Και έτσι, ανάλογα με την πρόσωπο μπορώ να επιλέξω, είμαι δίνοντας μια διαφορετική ασύγχρονη αίτηση σε ένα διαφορετικό αρχείο ότι έχω στον server μου. Και το περιεχόμενο του μου infodiv Ενημερώνουμε τους, βάσει των οποίων αυτά που έχω επιλέξει. Έτσι, αυτό είναι πραγματικά όλα είναι εκεί για να AJAX. Μας επιτρέπει να κάνουμε αυτές τις ασύγχρονη αιτήματα, ενημερώσεις σε μια σελίδα. Χωρίς να χρειάζεται να ανανεώσετε ολόκληρη τη σελίδα, θα πάμε για να πάρει νέα περιεχόμενο από αυτό κάνοντας νέα νέα αίτηση στο διακομιστή. Και έτσι, οι σελίδες μας μπορεί να γίνει αρκετά πιο δυναμική. 

Και, όπως έχουμε περισσότερα και πιο προηγμένες, θα θα μπορούσε να πάρει τα πράγματα όπως ας πούμε, τα εισερχόμενα e-mail σας, όπου δεν έχετε να κάνετε τίποτα. Δεν χρειάζεται να κάνετε κλικ μία drop-down μενού ή κάντε κλικ τίποτα, και ξαφνικά, νεότερο σας email εμφανίζεται στην κορυφή. Αυτό είναι επίσης μόλις ένα αίτημα Ajax. Αίας ζητά σας εξυπηρετητή, ο εξυπηρετητής ηλεκτρονικού ταχυδρομείου, να στείλει πάνω από όλες τις πληροφορίες σχετικά με τις τελευταίες e-mail σας, και την αλλαγή που βλέπεις στην ο οθόνη να είναι νεότερο σετ emails σας. Και αν έχετε ένα νέο σε εκεί, τότε το περιεχόμενο του div θα αλλάξει ώστε να αντικατοπτρίζει το ενημερωμένο περιεχόμενο. Είμαι ο Νταγκ Lloyd. Αυτό είναι CS50.