1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,810
[Παίζει μουσική]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Έτσι μια πιο
το είδος της αντίληψη ότι

4
00:00:06,940 --> 00:00:12,120
είδος της πέφτει κάτω από την ομπρέλα του
JavaScript είναι κάτι που ονομάζεται AJAX.

5
00:00:12,120 --> 00:00:15,310
Μέχρι αυτό το σημείο, μας
αλληλεπίδραση με JavaScript

6
00:00:15,310 --> 00:00:17,727
έχει περιοριστεί σε μια ωθήσει
κουμπί και κάτι συμβαίνει.

7
00:00:17,727 --> 00:00:19,560
Και συγκεκριμένα, το
κάτι που συμβαίνει

8
00:00:19,560 --> 00:00:22,950
Είναι ιστοσελίδες μας δείχνετε και να αισθάνεστε αλλαγές.

9
00:00:22,950 --> 00:00:23,450
Δικαίωμα?

10
00:00:23,450 --> 00:00:26,540
Όπως ειδικότερα, στην
έγγραφο βίντεο μοντέλο αντικειμένου,

11
00:00:26,540 --> 00:00:29,060
Έχω αλλάξει το χρώμα του φόντου.

12
00:00:29,060 --> 00:00:33,240
Αλλά όταν το έκανα αυτό, δεν είχα
να κάνει οποιαδήποτε ειδική πρόσθετη αιτήματα.

13
00:00:33,240 --> 00:00:36,800
Δεν είχα να ζητήσει
ο server μου στείλει μια νέα σελίδα.

14
00:00:36,800 --> 00:00:39,620
Μόλις άλλαξα αυτό που ήδη είχε.

15
00:00:39,620 --> 00:00:42,245
Δεν είχα να φορτώσετε τη σελίδα μου,
και σίγουρα τα πράγματα άλλαξαν,

16
00:00:42,245 --> 00:00:43,760
έτσι ώστε να είναι μεγάλη.

17
00:00:43,760 --> 00:00:48,400
Αλλά υπάρχει σίγουρα κάποια
χειροκίνητη αλληλεπίδραση ενδιαφερόμενο χρήστη.

18
00:00:48,400 --> 00:00:53,140
AJAX είναι ένα δροσερό τεχνική που επιτρέπει
μας για να ενημερώσετε το περιεχόμενο μιας σελίδας,

19
00:00:53,140 --> 00:00:55,750
και όχι μόνο την εμφάνιση και την
αίσθηση, χωρίς την επαναφόρτωση.

20
00:00:55,750 --> 00:00:58,610
>> Και από ειδικά όταν
δηλαδή την ενημέρωση του περιεχομένου μιας σελίδας,

21
00:00:58,610 --> 00:01:01,990
Δεν λέω ότι έχουμε ξαναγράψει
η σελίδα με τη χρήση JavaScript.

22
00:01:01,990 --> 00:01:06,560
Λέω στην πραγματικότητα να ζητήσει
περισσότερες πληροφορίες από το διακομιστή

23
00:01:06,560 --> 00:01:08,640
χωρίς σελίδα χρειάζεται να φορτώσετε εκ νέου.

24
00:01:08,640 --> 00:01:10,850
>> Τώρα αυτό το είδος της ένα κομμάτι της
μια πιο προηγμένη τεχνική

25
00:01:10,850 --> 00:01:11,950
ότι θα πάμε να μιλήσουμε
περίπου σε αυτό το βίντεο.

26
00:01:11,950 --> 00:01:13,720
Εμείς πάμε για να έχουν κάποια αλληλεπίδραση.

27
00:01:13,720 --> 00:01:17,750
Αλλά όταν το κάνουμε, είμαι πρόκειται να είναι
ζητάει να τον web server.

28
00:01:17,750 --> 00:01:21,140
Στην περίπτωση αυτή, ακριβώς ό, τι είναι
την εκτέλεση του Apache web server μου.

29
00:01:21,140 --> 00:01:25,010
Πάω να κάνει πρόσθετες
αιτήσεις, ενώ είμαι επίσκεψη σε μια ιστοσελίδα,

30
00:01:25,010 --> 00:01:26,890
αλλά η σελίδα μου δεν θα ανανεωθεί.

31
00:01:26,890 --> 00:01:30,000
>> Είναι ακριβώς πρόκειται να
ασύγχρονα ενημερώσετε τη σελίδα μου.

32
00:01:30,000 --> 00:01:31,840
Και αυτό είναι, στην πραγματικότητα,
AJAX οποίο σημαίνει,

33
00:01:31,840 --> 00:01:35,400
είναι Asynchronous JavaScript και XML.

34
00:01:35,400 --> 00:01:37,910
XML είναι ένα άλλο είδος της σήμανσης
γλώσσα, και μπορείτε να ταξινομήσετε του

35
00:01:37,910 --> 00:01:39,680
σκεφτείτε ότι ακριβώς όπως HTML.

36
00:01:39,680 --> 00:01:42,990
Δεν είναι ακριβώς το ίδιο πράγμα, αλλά
είναι ουσιαστικά μόνο μια γλώσσα σήμανσης.

37
00:01:42,990 --> 00:01:47,770
Έτσι, είναι μια ασύγχρονη
JavaScript και μια γλώσσα σήμανσης.

38
00:01:47,770 --> 00:01:50,590
>> Έτσι για να χρησιμοποιήσετε αυτό το
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
δεν είναι ένα ξεχωριστό γλώσσα προγραμματισμού.

40
00:01:52,230 --> 00:01:55,300
Είναι απλά ένα είδος
σύνολο των techniques-- μας

41
00:01:55,300 --> 00:01:57,870
Πρέπει να δημιουργήσουμε ένα ειδικό
JavaScript αντικείμενο, το οποίο

42
00:01:57,870 --> 00:02:00,689
ονομάζεται XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Τώρα, είναι πολύ εύκολο να το κάνουμε αυτό.

44
00:02:01,980 --> 00:02:04,550
Εμείς απλώς να πω var, ανεξαρτήτως
θέλουμε να καλέσετε αυτό το αντικείμενο,

45
00:02:04,550 --> 00:02:07,030
ισούται με νέα XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Και τώρα έχουμε τώρα λαμβάνεται
AJAX ένα είδος αντικειμένου,

47
00:02:11,050 --> 00:02:14,370
ή ένα XMLHttpRequest
αντικείμενο, το οποίο θα επιτρέψει

48
00:02:14,370 --> 00:02:18,360
μας επιτρέπει να αναβαθμίσουμε ασύγχρονα σελίδα μας.

49
00:02:18,360 --> 00:02:23,100
>> Αφού έχουμε πάρει αυτό το νέο
αντικείμενο, αυτό XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
πρέπει να κάνουμε κάτι για να του
onreadystatechange συμπεριφορά.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
συμπεριφορά είναι πραγματικά μόνο

52
00:02:30,360 --> 00:02:34,080
όταν κάνετε μία αίτηση
σε μια ιστοσελίδα, η σελίδα

53
00:02:34,080 --> 00:02:35,880
περνά μέσα από μια σειρά από βήματα.

54
00:02:35,880 --> 00:02:37,370
Πρώτον, η αίτηση δεν έχει αποσταλεί.

55
00:02:37,370 --> 00:02:39,860
Στη συνέχεια, η αίτηση έχει
σταλεί, αλλά δεν τις δέουσες ενέργειες.

56
00:02:39,860 --> 00:02:41,580
Στη συνέχεια, η αίτηση έχει ενεργήσει επάνω.

57
00:02:41,580 --> 00:02:43,680
Στη συνέχεια, η αίτηση είναι
αποστέλλεται πίσω σε σας.

58
00:02:43,680 --> 00:02:46,930
>> Στη συνέχεια, η αίτηση είναι
πλήρως φορτωμένο στη σελίδα σας.

59
00:02:46,930 --> 00:02:48,640
Αυτές είναι διαφορετικές καταστάσεις.

60
00:02:48,640 --> 00:02:53,890
Και έτσι πρέπει να θέσουμε μας
νέο αντικείμενο XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
να αλλάξει όταν κατάσταση ετοιμότητας αλλαγές.

62
00:02:58,740 --> 00:03:01,925
Και συνήθως, το κάνουμε αυτό με
καθορίζοντας μια ανώνυμη συνάρτηση, η οποία

63
00:03:01,925 --> 00:03:04,490
είμαστε εξοικειωμένοι με από
JavaScript τώρα, ότι

64
00:03:04,490 --> 00:03:09,840
καλείται όταν τα έτοιμα αλλαγές κατάστασης.

65
00:03:09,840 --> 00:03:11,340
Είναι πραγματικά δεν είναι πολύ περισσότερο από αυτό.

66
00:03:11,340 --> 00:03:14,340
Εμείς απλά θα πρέπει να ορίζει ένα
λειτουργία ανώνυμο, το είδος του αρέσει αυτό

67
00:03:14,340 --> 00:03:16,440
κάναμε στο
JavaScript, όπου θα

68
00:03:16,440 --> 00:03:18,750
έχουν μια ανώνυμη συνάρτηση
ανταποκρίνονται σε ένα on κλικ,

69
00:03:18,750 --> 00:03:23,230
ή όταν κάναμε ένα χάρτη
τα διάφορα αντικείμενα σε μία συστοιχία.

70
00:03:23,230 --> 00:03:25,220
>> Κάτι συνέβη όταν
κάτι που έγινε κλικ.

71
00:03:25,220 --> 00:03:28,810
Σε αυτήν την περίπτωση, είναι απλώς κάτι που είναι
συμβαίνει όταν η κατάσταση της σελίδας μας

72
00:03:28,810 --> 00:03:30,160
αλλαγές.

73
00:03:30,160 --> 00:03:32,730
Υπάρχουν δύο άλλες ιδιότητες
που είναι το είδος of-- ότι δεν είναι

74
00:03:32,730 --> 00:03:35,524
οι μόνες ιδιότητες που είναι
εγγενή XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
αλλά είναι αρκετά σημαντικές.

76
00:03:36,940 --> 00:03:39,815
Υπάρχει κάτι που ονομάζεται readyState,
το οποίο όπως μπορείτε να μαντέψετε,

77
00:03:39,815 --> 00:03:41,750
είναι σχετικές με onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Σας λέει στην πραγματικότητα
ποια είναι η readyState είναι.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, και 4 είναι
οι δυνατότητες εκεί,

80
00:03:46,289 --> 00:03:48,080
και το είδος των περίπου
αντιστοιχούν σε ό, τι

81
00:03:48,080 --> 00:03:50,030
Ήμουν απλά μιλάμε για ένα δευτερόλεπτο πριν.

82
00:03:50,030 --> 00:03:53,100
>> Και τότε κατάσταση, η οποία
ελπίζουμε ότι αν όλα πήγαν ΟΚ,

83
00:03:53,100 --> 00:03:56,710
είναι 200, η ​​οποία είναι μικρή
για, βέβαια, εντάξει,

84
00:03:56,710 --> 00:03:58,330
το οποίο είμαστε εξοικειωμένοι με από το http.

85
00:03:58,330 --> 00:04:03,735
Έτσι, ελπίζουμε ότι η κατάσταση ετοιμότητας μας
είναι τέσσερα, και η κατάσταση μας είναι 200.

86
00:04:03,735 --> 00:04:07,940
Και αν έτοιμο το κράτος μας
είναι τέσσερις, και η απόκριση

87
00:04:07,940 --> 00:04:11,490
είναι έτοιμα να τεθούν σχετικά με την
σελίδα, και η κατάσταση είναι 200,

88
00:04:11,490 --> 00:04:13,580
ήμασταν σε θέση να κάνουμε
πάντα με επιτυχία,

89
00:04:13,580 --> 00:04:17,209
τώρα μπορούμε ασύγχρονα
ενημερώσετε τη σελίδα μας

90
00:04:17,209 --> 00:04:21,730
χωρίς να χρειάζεται να φορτώσετε
Το σύνολο του περιεχομένου του.

91
00:04:21,730 --> 00:04:27,710
>> Αφού έχουμε καθορίσει τι θα συμβεί
με τη συμπεριφορά onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
και έχουμε ελέγξει ότι readyState
είναι 4 και η κατάσταση είναι 200,

93
00:04:31,020 --> 00:04:33,900
τότε το μόνο που χρειάζεται να κάνετε είναι να
να ανοίξει μια ασύγχρονη

94
00:04:33,900 --> 00:04:38,530
αίτημα, το οποίο είναι μόνο το γεγονός,
μια διεύθυνση http γενικά GET αίτημα.

95
00:04:38,530 --> 00:04:41,950
Απλά κάνει με προγραμματισμό,
αντί μέσω του web browser μας.

96
00:04:41,950 --> 00:04:43,786
Και τότε στέλνουμε το αίτημα αυτό.

97
00:04:43,786 --> 00:04:45,660
Έτσι, αυτό που κάνει αυτό ίσως
μοιάζουν σε ένα πλαίσιο;

98
00:04:45,660 --> 00:04:49,790
Έτσι, εδώ είναι μια λειτουργία που
ασχολείται με τα αιτήματα AJAX.

99
00:04:49,790 --> 00:04:50,290
ΕΝΤΆΞΕΙ?

100
00:04:50,290 --> 00:04:52,430
Και έχω αυθαίρετα είπε
δέχεται ένα επιχείρημα.

101
00:04:52,430 --> 00:04:55,550
Και αυτό το είδος της μια
γενικό σκελετό εδώ.

102
00:04:55,550 --> 00:05:00,890
Στην αρχή, έχουμε
εαυτούς μας ένα νέο αντικείμενο XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Στη συνέχεια, θα πρέπει να ρυθμίσετε το
onreadystatechange συμπεριφορά.

104
00:05:03,830 --> 00:05:06,970
Και έτσι Πάω να πω
όταν οι αλλαγές readyState,

105
00:05:06,970 --> 00:05:10,110
Θέλω να καλέσετε τη λειτουργία αυτή.

106
00:05:10,110 --> 00:05:12,570
>> Η οποία πρόκειται να ζητήσει η
ερώτηση, εάν το readyState

107
00:05:12,570 --> 00:05:17,240
είναι 4, εάν η readyState άλλαξε
να είναι 4, και η κατάσταση ήταν 200,

108
00:05:17,240 --> 00:05:20,799
έτσι είχαμε μια επιτυχημένη αίτηση, Ι
θέλουν να κάνουν κάτι για την σελίδα.

109
00:05:20,799 --> 00:05:22,590
Και θα ρίξουμε μια ματιά
σε ένα παράδειγμα του τι

110
00:05:22,590 --> 00:05:25,010
ότι κάτι θα μπορούσε να είναι σε ένα δευτερόλεπτο.

111
00:05:25,010 --> 00:05:27,830
Έτσι, λοιπόν, τώρα έχω ορίζεται
ανώνυμο μου λειτουργία,

112
00:05:27,830 --> 00:05:31,340
λειτουργία απάντησή μου, όποτε
οι αλλαγές readyState.

113
00:05:31,340 --> 00:05:37,120
>> Έτσι, τότε το μόνο που χρειάζεται για να ανοίξει ένα
να ζητήσει, σύμφωνα με την ανοικτή μέθοδο.

114
00:05:37,120 --> 00:05:39,160
Και στη συνέχεια, να στείλω αυτό το αίτημα.

115
00:05:39,160 --> 00:05:41,980
Και ας ρίξουμε μια ματιά
ένα πιο συγκεκριμένο παράδειγμα

116
00:05:41,980 --> 00:05:46,290
του τι μπορεί να κάνει AJAX στις ιστοσελίδες μας.

117
00:05:46,290 --> 00:05:49,740
Γι 'αυτό έχουμε εδώ ένα πολύ απλό
σελίδα που ονομάζεται home.html.

118
00:05:49,740 --> 00:05:53,620
Και έχω μια πληροφορία πηγαίνει
εδώ και κάποιο είδος του drop-down μενού.

119
00:05:53,620 --> 00:05:55,390
>> Και εμείς θα επανεξετάσουμε αυτό σε ένα δευτερόλεπτο.

120
00:05:55,390 --> 00:05:59,150
Αλλά νομίζω ότι πρέπει να πάρουμε τώρα ένα
δούμε την πραγματική του πηγαίου κώδικα.

121
00:05:59,150 --> 00:06:01,080
Και έτσι, θα πάω να ανοίξει home.html.

122
00:06:01,080 --> 00:06:03,490

123
00:06:03,490 --> 00:06:04,740
Και θα δούμε τι συμβαίνει.

124
00:06:04,740 --> 00:06:08,240
Έτσι, μέχρι στην κορυφή εδώ, έχω
κάποια πράγματα JavaScript που συμβαίνει.

125
00:06:08,240 --> 00:06:12,470
>> Και εδώ, θα έχουν προφανώς
Α Τμήμα του οποίου η ταυτότητα είναι infodiv,

126
00:06:12,470 --> 00:06:15,290
και κάποιες πληροφορίες
πρόκειται να πάει εκεί.

127
00:06:15,290 --> 00:06:16,374
Και τότε έχω αυτή τη μορφή.

128
00:06:16,374 --> 00:06:18,081
Και μέσα από αυτό
μορφή, έχω κάτι

129
00:06:18,081 --> 00:06:20,200
Επιλέξτε ονομάζεται, το οποίο
είναι απλά ένα drop-down μενού

130
00:06:20,200 --> 00:06:22,150
με μια δέσμη των διαφορετικών επιλογών.

131
00:06:22,150 --> 00:06:26,150
Και προφανώς, όταν αυτό αλλάζει, όταν
η επιλογή που έχει επιλεγεί έχει

132
00:06:26,150 --> 00:06:30,600
αλλάξει, Πάω να καλέσω
κάποια λειτουργία cs50Info,

133
00:06:30,600 --> 00:06:33,190
και, στη συνέχεια, Πάω να
περάσει σε this.value,

134
00:06:33,190 --> 00:06:35,740
όπου αυτό αναφέρεται σε
ποια επιλογή επιλέχθηκε,

135
00:06:35,740 --> 00:06:39,820
και η αξία είναι μία από αυτές εδώ, η επιλογή
= αξία ισούται άδειο, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden", "Chan," και "Malan".

137
00:06:42,610 --> 00:06:45,090
>> Λοιπόν, τι θα μπορούσε πράγματι
να συμβεί εδώ όταν το κάνω αυτό;

138
00:06:45,090 --> 00:06:48,800
Λοιπόν, ας ρίξουμε μια
δείτε blumberg.html.

139
00:06:48,800 --> 00:06:51,330

140
00:06:51,330 --> 00:06:53,924
Μοιάζει να είναι απλώς μια
απόσπασμα από κάποια μορφή html.

141
00:06:53,924 --> 00:06:56,090
Και στην πραγματικότητα, αυτό που ελπίζω
πρόκειται να συμβεί εδώ

142
00:06:56,090 --> 00:07:00,020
είναι Πάω να είναι σε θέση να συνδέσετε
Αυτό το HTML απευθείας στην ιστοσελίδα μου

143
00:07:00,020 --> 00:07:02,970
χωρίς να χρειάζεται να φορτώσετε
η σελίδα, έτσι ώστε όταν

144
00:07:02,970 --> 00:07:07,510
Επιλέγω Χάνα από το drop-down
μενού, πληροφορίες σχετικά με Hannah,

145
00:07:07,510 --> 00:07:11,100
ειδικότερα, τις πληροφορίες
εδώ στην blumberg.html,

146
00:07:11,100 --> 00:07:12,574
είναι ό, τι εμφανίζεται στην σελίδα.

147
00:07:12,574 --> 00:07:13,740
Και δεν έχω να ανανεώσετε.

148
00:07:13,740 --> 00:07:16,842
Και αν επέλεξα κάποιος άλλος,
πληροφορίες τους θα εμφανιστούν.

149
00:07:16,842 --> 00:07:17,550
Πώς μπορώ να το κάνω αυτό;

150
00:07:17,550 --> 00:07:20,290
Πάλι, αυτό απαιτεί
να χρησιμοποιήσουμε κάποια AJAX.

151
00:07:20,290 --> 00:07:22,540
Και έτσι, θα ανοίξει ajax.js.

152
00:07:22,540 --> 00:07:25,550
Και εδώ είναι η λειτουργία, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Αν το όνομα δεν είναι τίποτα, έχω επιστρέψει.

154
00:07:27,410 --> 00:07:31,450
Είμαι δεν πρόκειται να κάνει τίποτα, αν
ο κενός τι έχει επιλέξει.

155
00:07:31,450 --> 00:07:35,420
Διαφορετικά, θα πάω να
δημιουργήσετε ένα νέο XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Και τότε Πάω να πω, όταν η
readyState αλλαγές, να ζητήσει αυτή τη λειτουργία.

157
00:07:39,020 --> 00:07:43,630
>> Και αν η readyState είναι
4 και η κατάσταση είναι 200,

158
00:07:43,630 --> 00:07:45,740
εδώ είναι λίγο
της jQuery στη γραμμή 13.

159
00:07:45,740 --> 00:07:50,450
Αλλά όλα τα κάνω λέει,
να αλλάξουν το περιεχόμενο του infodiv

160
00:07:50,450 --> 00:07:57,820
να είναι ό, τι πήρα πίσω ως
απάντηση από HttpRequest μου.

161
00:07:57,820 --> 00:07:59,590
>> Τι είναι HttpRequest μου;

162
00:07:59,590 --> 00:08:02,020
Λοιπόν, αυτό είναι σωστό
εδώ στη γραμμή 18 και 19.

163
00:08:02,020 --> 00:08:08,550
Γραμμή 18, είμαι βασικά προετοιμασία
ένα GET αίτημα για όνομα + .html.

164
00:08:08,550 --> 00:08:11,170
Και πάλι, το όνομα είναι εδώ
το επιχείρημα ότι ήταν

165
00:08:11,170 --> 00:08:14,280
πέρασε στην ως παράμετρος σε cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Έτσι, βασικά, είμαι περνώντας κάποιου
όνομα, το οποίο ήταν αυτό το σύνολο των επιλογών

167
00:08:18,460 --> 00:08:22,980
που είδαμε στο
drop-down μενού στη φόρμα.

168
00:08:22,980 --> 00:08:24,450
Παίρνω αυτό το όνομα.

169
00:08:24,450 --> 00:08:29,530
Και εγώ λέω ότι θα θέλατε να
παρακαλώ να αποκτήσουν για μένα ότι file.html,

170
00:08:29,530 --> 00:08:31,020
και στη συνέχεια να στείλετε το αίτημα αυτό.

171
00:08:31,020 --> 00:08:34,820
>> Και έτσι ότι πρόκειται onreadystatechange
να ακούει και περιμένει και περιμένει

172
00:08:34,820 --> 00:08:39,460
και να περιμένει μέχρι την readyState
είναι 4, και η κατάσταση είναι 200.

173
00:08:39,460 --> 00:08:44,970
Έτσι είναι έτοιμο να σερβιριστεί,
και το αίτημα ήταν επιτυχές.

174
00:08:44,970 --> 00:08:49,500
Και στη συνέχεια, αν είναι, πρόκειται να
να αλλάξουν το περιεχόμενο του infodiv

175
00:08:49,500 --> 00:08:53,030
να είναι το κείμενο απάντηση που πήρα πίσω.

176
00:08:53,030 --> 00:08:54,930
>> Ας δούμε πώς αυτό
μπορούσε πραγματικά να λειτουργήσει.

177
00:08:54,930 --> 00:08:58,860
Γι 'αυτό και θα το κεφάλι πάνω στο πρόγραμμα περιήγησής μου
παράθυρο, και θα εξετάσουμε εδώ.

178
00:08:58,860 --> 00:09:01,359
Έτσι, ας ρίξουμε μια ματιά
τι συμβαίνει εδώ στο AJAX.

179
00:09:01,359 --> 00:09:03,400
Έτσι θα επιλέξουμε κάποιον
από το drop-down μενού.

180
00:09:03,400 --> 00:09:06,079
Έτσι, σε αυτή την περίπτωση, ας
απλά επιλέξτε Χάνα.

181
00:09:06,079 --> 00:09:08,120
Και παρατηρήστε ότι της Hannah
πληροφορίες έχει αλλάξει,

182
00:09:08,120 --> 00:09:11,030
αλλά δεν είχα any-- μου
σελίδα δεν reload εντελώς.

183
00:09:11,030 --> 00:09:12,190
Τα πράγματα έμειναν.

184
00:09:12,190 --> 00:09:13,320
Τα περισσότερα από τα πράγματα έμειναν.

185
00:09:13,320 --> 00:09:14,320
AJAX δοκιμής δεν αλλάζει.

186
00:09:14,320 --> 00:09:16,700
Το ίδιο το κουμπί, αυτό
drop-down μενού δεν άλλαξε.

187
00:09:16,700 --> 00:09:18,260
Πληροφοριών, αλλά εκεί έκανε αλλαγή.

188
00:09:18,260 --> 00:09:20,218
Και ανάλογα με το πώς
γρήγορα τις κινήσεις του υπολογιστή μου,

189
00:09:20,218 --> 00:09:24,430
μπορείτε πραγματικά να δείτε ότι το περιεχόμενο
εξαφανίζεται και επανεμφανίζεται έπειτα πραγματικά

190
00:09:24,430 --> 00:09:24,930
γρήγορα.

191
00:09:24,930 --> 00:09:27,320
Αυτό είναι το περιεχόμενο να είναι
διαγράφονται από infodiv,

192
00:09:27,320 --> 00:09:29,940
και στη συνέχεια αντικαταστάθηκε με ένα
νέα ασύγχρονη αίτηση.

193
00:09:29,940 --> 00:09:34,410
>> Έτσι, αν μπορώ να στραφούν να πω,
Rob-- και πάλι, ρίξτε μια ματιά,

194
00:09:34,410 --> 00:09:38,379
και ίσως θα το δούμε στην πραγματικότητα
εξαφανίζονται και επανεμφανίζονται γρήγορα.

195
00:09:38,379 --> 00:09:38,920
Μπορείτε να δείτε αυτό;

196
00:09:38,920 --> 00:09:41,400
Πώς ακριβώς έσκασε μακριά,
και στη συνέχεια να ξαναγεμίζει;

197
00:09:41,400 --> 00:09:43,640
Αυτό είναι το αίτημα AJAX
είδος που λαμβάνουν χώρα.

198
00:09:43,640 --> 00:09:46,060
Και έτσι, ανάλογα με την
πρόσωπο μπορώ να επιλέξω, είμαι

199
00:09:46,060 --> 00:09:50,690
δίνοντας μια διαφορετική ασύγχρονη
αίτηση σε ένα διαφορετικό αρχείο

200
00:09:50,690 --> 00:09:52,730
ότι έχω στον server μου.

201
00:09:52,730 --> 00:09:55,550
Και το περιεχόμενο του μου
infodiv Ενημερώνουμε τους,

202
00:09:55,550 --> 00:09:58,457
βάσει των οποίων αυτά που έχω επιλέξει.

203
00:09:58,457 --> 00:10:00,040
Έτσι, αυτό είναι πραγματικά όλα είναι εκεί για να AJAX.

204
00:10:00,040 --> 00:10:04,090
Μας επιτρέπει να κάνουμε αυτές τις ασύγχρονη
αιτήματα, ενημερώσεις σε μια σελίδα.

205
00:10:04,090 --> 00:10:06,450
Χωρίς να χρειάζεται να
ανανεώσετε ολόκληρη τη σελίδα,

206
00:10:06,450 --> 00:10:08,520
θα πάμε για να πάρει νέα
περιεχόμενο από αυτό κάνοντας

207
00:10:08,520 --> 00:10:11,170
νέα νέα αίτηση στο διακομιστή.

208
00:10:11,170 --> 00:10:13,420
Και έτσι, οι σελίδες μας μπορεί να γίνει
αρκετά πιο δυναμική.

209
00:10:13,420 --> 00:10:15,128
>> Και, όπως έχουμε περισσότερα
και πιο προηγμένες, θα

210
00:10:15,128 --> 00:10:17,700
θα μπορούσε να πάρει τα πράγματα όπως
ας πούμε, τα εισερχόμενα e-mail σας,

211
00:10:17,700 --> 00:10:19,850
όπου δεν έχετε να κάνετε τίποτα.

212
00:10:19,850 --> 00:10:22,560
Δεν χρειάζεται να κάνετε κλικ μία
drop-down μενού ή κάντε κλικ τίποτα,

213
00:10:22,560 --> 00:10:25,920
και ξαφνικά, νεότερο σας
email εμφανίζεται στην κορυφή.

214
00:10:25,920 --> 00:10:27,840
Αυτό είναι επίσης μόλις ένα αίτημα Ajax.

215
00:10:27,840 --> 00:10:30,460
Αίας ζητά σας
εξυπηρετητή, ο εξυπηρετητής ηλεκτρονικού ταχυδρομείου,

216
00:10:30,460 --> 00:10:33,360
να στείλει πάνω από όλες τις πληροφορίες
σχετικά με τις τελευταίες e-mail σας,

217
00:10:33,360 --> 00:10:38,110
και την αλλαγή που βλέπεις στην ο
οθόνη να είναι νεότερο σετ emails σας.

218
00:10:38,110 --> 00:10:41,080
Και αν έχετε ένα νέο σε
εκεί, τότε το περιεχόμενο του div

219
00:10:41,080 --> 00:10:44,580
θα αλλάξει ώστε να αντικατοπτρίζει
το ενημερωμένο περιεχόμενο.

220
00:10:44,580 --> 00:10:45,480
Είμαι ο Νταγκ Lloyd.

221
00:10:45,480 --> 00:10:47,500
Αυτό είναι CS50.

222
00:10:47,500 --> 00:10:49,229