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

2
00:00:00,500 --> 00:00:04,810
[Jouer de la musique]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Donc, un de plus
sorte d'idée que

4
00:00:06,940 --> 00:00:12,120
sorte de tombe sous l'égide de
JavaScript est quelque chose appelé AJAX.

5
00:00:12,120 --> 00:00:15,310
Jusqu'à ce point, notre
interaction avec JavaScript

6
00:00:15,310 --> 00:00:17,727
a été limitée à pousser un
bouton et quelque chose se passe.

7
00:00:17,727 --> 00:00:19,560
Et plus précisément, le
quelque chose qui arrive

8
00:00:19,560 --> 00:00:22,950
est de nos sites Web regardent et se sentent changements.

9
00:00:22,950 --> 00:00:23,450
Droit?

10
00:00:23,450 --> 00:00:26,540
Comme, en particulier, dans le
document de modèle d'objet vidéo,

11
00:00:26,540 --> 00:00:29,060
Je l'ai changé la couleur de fond.

12
00:00:29,060 --> 00:00:33,240
Mais quand je l'ai fait, je ne dois
à faire des demandes spéciales supplémentaires.

13
00:00:33,240 --> 00:00:36,800
Je ne dois demander que
le serveur me faire parvenir une nouvelle page.

14
00:00:36,800 --> 00:00:39,620
Je viens de changer ce que je avais déjà.

15
00:00:39,620 --> 00:00:42,245
Je ne dois recharger ma page,
et les choses définitivement changé,

16
00:00:42,245 --> 00:00:43,760
ce est très bien.

17
00:00:43,760 --> 00:00:48,400
Mais il ya certainement une certaine
interaction manuelle utilisateur impliqué.

18
00:00:48,400 --> 00:00:53,140
AJAX est une technique qui permet fraîche
nous mettre à jour le contenu d'une page,

19
00:00:53,140 --> 00:00:55,750
et pas seulement l'apparence et
sentir, sans recharger.

20
00:00:55,750 --> 00:00:58,610
>> Et en particulier quand je
dire mettre à jour le contenu d'une page,

21
00:00:58,610 --> 00:01:01,990
Je ne dis pas que nous réécrivons
la page en utilisant JavaScript.

22
00:01:01,990 --> 00:01:06,560
Je dis que nous demandons effectivement
plus d'informations à partir du serveur

23
00:01:06,560 --> 00:01:08,640
sans notre page avoir à recharger.

24
00:01:08,640 --> 00:01:10,850
>> Maintenant, ce genre d'un peu de
une technique plus avancée

25
00:01:10,850 --> 00:01:11,950
que nous allons parler
dans cette vidéo.

26
00:01:11,950 --> 00:01:13,720
Nous allons avoir une certaine interaction.

27
00:01:13,720 --> 00:01:17,750
Mais quand nous le faisons, je vais être
faire des requêtes au serveur Web.

28
00:01:17,750 --> 00:01:21,140
Dans ce cas, tout ce qui est
courir mon serveur web Apache.

29
00:01:21,140 --> 00:01:25,010
Je vais être prise additionnelle
demandes alors que je suis visitant une page Web,

30
00:01:25,010 --> 00:01:26,890
mais ma page ne sera pas rafraîchir.

31
00:01:26,890 --> 00:01:30,000
>> Il va juste
mettre à jour de manière asynchrone ma page.

32
00:01:30,000 --> 00:01:31,840
Et qui est, en fait,
AJAX qui signifie,

33
00:01:31,840 --> 00:01:35,400
est Asynchronous JavaScript and XML.

34
00:01:35,400 --> 00:01:37,910
XML est un autre type de balisage
la langue, et vous pouvez trier des

35
00:01:37,910 --> 00:01:39,680
penser à elle comme le HTML.

36
00:01:39,680 --> 00:01:42,990
Il est pas tout à fait la même chose, mais
il est fondamentalement juste un langage de balisage.

37
00:01:42,990 --> 00:01:47,770
Il est donc asynchrone
JavaScript et un langage de balisage.

38
00:01:47,770 --> 00:01:50,590
>> Ainsi, afin d'utiliser cette
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
est pas un langage de programmation distincte.

40
00:01:52,230 --> 00:01:55,300
Il est juste une sorte de
ensemble de techniques-- nous

41
00:01:55,300 --> 00:01:57,870
besoin de créer une spéciale
Objet JavaScript, qui

42
00:01:57,870 --> 00:02:00,689
est appelé un XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Maintenant, il est très facile de le faire.

44
00:02:01,980 --> 00:02:04,550
Nous disons simplement var, quel que soit
nous voulons appeler cet objet,

45
00:02:04,550 --> 00:02:07,030
égaux new XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Et maintenant, nous avons maintenant obtenu
une sorte d'objet AJAX,

47
00:02:11,050 --> 00:02:14,370
ou un XMLHttpRequest
objet, qui permettra

48
00:02:14,370 --> 00:02:18,360
nous de mettre à jour de manière asynchrone notre page.

49
00:02:18,360 --> 00:02:23,100
>> Après nous avons obtenu cette nouvelle
objet, ce XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
nous devons faire quelque chose pour son
onreadystatechange comportement.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
comportement est vraiment juste

52
00:02:30,360 --> 00:02:34,080
quand vous faites une demande
à une page Web, la page

53
00:02:34,080 --> 00:02:35,880
passe par un certain nombre d'étapes.

54
00:02:35,880 --> 00:02:37,370
Tout d'abord, une demande n'a pas été envoyé.

55
00:02:37,370 --> 00:02:39,860
Ensuite, la demande a été
envoyé, mais pas donné suite.

56
00:02:39,860 --> 00:02:41,580
Ensuite, la demande a été suivie d'effet.

57
00:02:41,580 --> 00:02:43,680
Ensuite, la demande est
d'être envoyé de nouveau à vous.

58
00:02:43,680 --> 00:02:46,930
>> Puis, la demande est
entièrement chargé dans votre page.

59
00:02:46,930 --> 00:02:48,640
Ce sont des états différents.

60
00:02:48,640 --> 00:02:53,890
Et donc nous avons besoin de mettre notre
nouvel objet XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
à changer lorsque le prêt de l'Etat.

62
00:02:58,740 --> 00:03:01,925
Et généralement, nous faisons cela en
définir une fonction anonyme, qui

63
00:03:01,925 --> 00:03:04,490
nous sommes familiers avec de
JavaScript maintenant, que

64
00:03:04,490 --> 00:03:09,840
est appelée lorsque les changements prêts de l'Etat.

65
00:03:09,840 --> 00:03:11,340
Il est vraiment pas beaucoup plus que cela.

66
00:03:11,340 --> 00:03:14,340
Nous allons juste à la définition d'un
fonction anonyme, un peu comme ce que

67
00:03:14,340 --> 00:03:16,440
nous faisions dans
JavaScript, où nous

68
00:03:16,440 --> 00:03:18,750
avoir une fonction anonyme
répondre à un clic sur,

69
00:03:18,750 --> 00:03:23,230
ou lorsque nous faisions une carte de
les divers objets dans un tableau.

70
00:03:23,230 --> 00:03:25,220
>> Quelque chose est arrivé lorsque
quelque chose a cliqué.

71
00:03:25,220 --> 00:03:28,810
Dans ce cas, il est juste quelque chose est
passe lorsque l'état de notre page

72
00:03:28,810 --> 00:03:30,160
Changements.

73
00:03:30,160 --> 00:03:32,730
Il existe deux autres propriétés
qui sont en quelque sorte de-- ils ne sont pas

74
00:03:32,730 --> 00:03:35,524
les seuls biens qui sont
inhérent à XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
mais ils sont ceux assez importants.

76
00:03:36,940 --> 00:03:39,815
Il ya quelque chose appelé readyState,
qui, comme vous pouvez probablement le deviner,

77
00:03:39,815 --> 00:03:41,750
est liée à onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Il vous indique effectivement
ce que le readyState est.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, et 4 sont
les possibilités là-bas,

80
00:03:46,289 --> 00:03:48,080
et ils sorte d'environ
correspondre à ce que

81
00:03:48,080 --> 00:03:50,030
Je parlais il ya environ une seconde.

82
00:03:50,030 --> 00:03:53,100
>> Et puis l'état, qui
Espérons que si tout allait OK,

83
00:03:53,100 --> 00:03:56,710
est de 200, ce qui est court
pour, bien sûr, OK,

84
00:03:56,710 --> 00:03:58,330
dont nous sommes familiers avec de HTTP.

85
00:03:58,330 --> 00:04:03,735
Nous espérons donc que notre état prêt
est quatre, et notre statut est 200.

86
00:04:03,735 --> 00:04:07,940
Et si notre état prêt
est quatre, et la réponse

87
00:04:07,940 --> 00:04:11,490
est prêt à être mis sur le
la page, et le statut est 200,

88
00:04:11,490 --> 00:04:13,580
nous étions en mesure de faire
tout avec succès,

89
00:04:13,580 --> 00:04:17,209
maintenant, nous pouvons de manière asynchrone
mettre à jour notre page

90
00:04:17,209 --> 00:04:21,730
sans avoir à recharger
la totalité du contenu de celui-ci.

91
00:04:21,730 --> 00:04:27,710
>> Après nous avons défini ce qui se passe
le comportement par onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
et nous avons vérifié que readyState
est 4 et le statut est 200,

93
00:04:31,020 --> 00:04:33,900
alors tout ce que nous devons faire est
ouvrir un asynchrone

94
00:04:33,900 --> 00:04:38,530
demande, qui est juste faire
un HTTP GET généralement demande.

95
00:04:38,530 --> 00:04:41,950
Il suffit de faire ce programme,
au lieu de passer notre navigateur web.

96
00:04:41,950 --> 00:04:43,786
Et puis nous envoyons cette demande.

97
00:04:43,786 --> 00:04:45,660
Alors qu'est-ce peut-être
ressembler dans le contexte?

98
00:04:45,660 --> 00:04:49,790
Alors, voici une fonction qui
traite les requêtes AJAX.

99
00:04:49,790 --> 00:04:50,290
D'accord?

100
00:04:50,290 --> 00:04:52,430
Et je l'ai dit arbitrairement
il accepte un argument.

101
00:04:52,430 --> 00:04:55,550
Et ce une sorte de
squelette générale ici.

102
00:04:55,550 --> 00:05:00,890
Au tout début, nous obtenons
nous un nouvel objet XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Ensuite, je dois régler la
onreadystatechange comportement.

104
00:05:03,830 --> 00:05:06,970
Et donc je vais dire
lors du changement de readyState,

105
00:05:06,970 --> 00:05:10,110
Je veux que vous appelez cette fonction.

106
00:05:10,110 --> 00:05:12,570
>> Qui va demander à la
question, si le readyState

107
00:05:12,570 --> 00:05:17,240
4 est, si le readyState a changé
être 4, et l'état était de 200,

108
00:05:17,240 --> 00:05:20,799
donc nous avons eu une demande réussie, je
vouloir faire quelque chose à la page.

109
00:05:20,799 --> 00:05:22,590
Et nous allons jeter un oeil
un exemple de ce que

110
00:05:22,590 --> 00:05:25,010
que quelque chose pourrait être dans une seconde.

111
00:05:25,010 --> 00:05:27,830
Alors, maintenant, je l'ai définie
ma fonction anonyme,

112
00:05:27,830 --> 00:05:31,340
ma fonction de réponse à chaque fois
les changements de readyState.

113
00:05:31,340 --> 00:05:37,120
>> Alors je juste besoin d'ouvrir un
demander, en utilisant la méthode Open.

114
00:05:37,120 --> 00:05:39,160
Et puis, je vous envoie cette demande.

115
00:05:39,160 --> 00:05:41,980
Et nous allons jeter un oeil à
un exemple plus concret

116
00:05:41,980 --> 00:05:46,290
de ce que peut faire AJAX sur nos pages web.

117
00:05:46,290 --> 00:05:49,740
Je dois donc ici très simple
Page appelé home.html.

118
00:05:49,740 --> 00:05:53,620
Et je dois une information va
ici et une sorte de menu déroulant.

119
00:05:53,620 --> 00:05:55,390
>> Et nous nous pencherons sur ce en une seconde.

120
00:05:55,390 --> 00:05:59,150
Mais je pense que nous devrions maintenant prendre une
regarder le code source réelle.

121
00:05:59,150 --> 00:06:01,080
Et donc, je vais ouvrir home.html.

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

123
00:06:03,490 --> 00:06:04,740
Et nous allons voir ce qui se passe.

124
00:06:04,740 --> 00:06:08,240
Alors au sommet très ici, je dois
des trucs JavaScript qui se passe.

125
00:06:08,240 --> 00:06:12,470
>> Et ici, je dois apparemment
un div dont l'ID est infodiv,

126
00:06:12,470 --> 00:06:15,290
et quelques informations
va y aller.

127
00:06:15,290 --> 00:06:16,374
Et puis je dois cette forme.

128
00:06:16,374 --> 00:06:18,081
Et à l'intérieur de cette
forme, je dois quelque chose

129
00:06:18,081 --> 00:06:20,200
appelé Select, qui
est juste un menu déroulant

130
00:06:20,200 --> 00:06:22,150
avec un tas d'options différentes.

131
00:06:22,150 --> 00:06:26,150
Et apparemment, lorsque cela change, lorsque
l'option qui a été sélectionnée comporte

132
00:06:26,150 --> 00:06:30,600
changé, je vais appeler
une fonction cs50Info,

133
00:06:30,600 --> 00:06:33,190
et puis je vais
passer this.value,

134
00:06:33,190 --> 00:06:35,740
où cela fait référence à
l'option qui a été choisie,

135
00:06:35,740 --> 00:06:39,820
et la valeur est l'un de ceux-ci ici, l'option
= valeur est égale à vide, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden", "chan" et "Malan."

137
00:06:42,610 --> 00:06:45,090
>> Donc, ce qui pourrait effectivement
arriver ici quand je fais cela?

138
00:06:45,090 --> 00:06:48,800
Eh bien, nous allons jeter un
regarder blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
On dirait qu'il est juste un
extrait de code HTML.

141
00:06:53,924 --> 00:06:56,090
Et en fait, ce que je suis en espérant
qui va se passer ici

142
00:06:56,090 --> 00:07:00,020
est que je vais être capable de brancher
Ce code HTML directement dans ma page web

143
00:07:00,020 --> 00:07:02,970
sans avoir à recharger
la page, de sorte que lorsque

144
00:07:02,970 --> 00:07:07,510
Je choisis Hannah de la liste déroulante
menu, des informations sur Hannah,

145
00:07:07,510 --> 00:07:11,100
en particulier, cette information
ici à blumberg.html,

146
00:07:11,100 --> 00:07:12,574
est ce qui apparaît sur la page.

147
00:07:12,574 --> 00:07:13,740
Et je ne dois rafraîchir.

148
00:07:13,740 --> 00:07:16,842
Et si je choisi quelqu'un d'autre,
leurs informations apparaîtrait.

149
00:07:16,842 --> 00:07:17,550
Comment fais-je ceci?

150
00:07:17,550 --> 00:07:20,290
Encore une fois, cela exige
nous d'utiliser certains AJAX.

151
00:07:20,290 --> 00:07:22,540
Et donc, nous allons ouvrir ajax.js.

152
00:07:22,540 --> 00:07:25,550
Et voici que la fonction, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Si le nom est rien, je reviens.

154
00:07:27,410 --> 00:07:31,450
Je ne vais pas faire quelque chose si
l'option vide a été choisie.

155
00:07:31,450 --> 00:07:35,420
Sinon, je vais
créer un nouveau XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Et puis je vais vous dire, lorsque le
changements readyState, appellent cette fonction.

157
00:07:39,020 --> 00:07:43,630
>> Et si le readyState est
4 et le statut est 200,

158
00:07:43,630 --> 00:07:45,740
voici un peu
de jQuery sur la ligne 13.

159
00:07:45,740 --> 00:07:50,450
Mais tout ce que je fais est disant,
modifier le contenu de infodiv

160
00:07:50,450 --> 00:07:57,820
d'être ce que je suis rentré comme un
réponse de mon HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Quel est mon HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Eh bien, que ce droit
ici sur la ligne 18 et 19.

163
00:08:02,020 --> 00:08:08,550
Ligne 18, je suis fondamentalement préparation
une requête GET pour le nom + .html.

164
00:08:08,550 --> 00:08:11,170
Et encore une fois, le nom est ici
l'argument qui était

165
00:08:11,170 --> 00:08:14,280
passé en tant que paramètre à cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Donc, fondamentalement, je suis de passage à quelqu'un d'
nom, qui était que jeu d'options

167
00:08:18,460 --> 00:08:22,980
que nous avons vu dans le
dans le menu déroulant sous la forme.

168
00:08:22,980 --> 00:08:24,450
Je reçois ce nom.

169
00:08:24,450 --> 00:08:29,530
Et je dis que je voudrais que vous
s'il vous plaît obtenir pour moi que file.html,

170
00:08:29,530 --> 00:08:31,020
et ensuite envoyer cette demande.

171
00:08:31,020 --> 00:08:34,820
>> Et pour que onreadystatechange va
être à l'écoute et attendre et attendre

172
00:08:34,820 --> 00:08:39,460
et d'attente, jusqu'à ce que le readyState
est 4, et de l'état est de 200.

173
00:08:39,460 --> 00:08:44,970
Donc, il est prêt à être servi,
et la demande a réussi.

174
00:08:44,970 --> 00:08:49,500
Et puis, si elle est, ça va
modifier le contenu de infodiv

175
00:08:49,500 --> 00:08:53,030
être le texte de réponse que je suis rentré.

176
00:08:53,030 --> 00:08:54,930
>> Voyons donc comment cette
pourrait en fait travailler.

177
00:08:54,930 --> 00:08:58,860
Donc, nous allons la tête sur mon navigateur
fenêtre, et nous allons voir ici.

178
00:08:58,860 --> 00:09:01,359
Donc, nous allons jeter un oeil à
ce qui se passe ici en AJAX.

179
00:09:01,359 --> 00:09:03,400
Donc, nous allons choisir quelqu'un
dans le menu déroulant.

180
00:09:03,400 --> 00:09:06,079
Donc dans ce cas, nous allons
il suffit de choisir Hannah.

181
00:09:06,079 --> 00:09:08,120
Et remarquez que Hannah
l'information a changé,

182
00:09:08,120 --> 00:09:11,030
mais je ne dois mon any--
la page n'a pas entièrement recharger.

183
00:09:11,030 --> 00:09:12,190
Le truc est resté.

184
00:09:12,190 --> 00:09:13,320
La plupart des choses sont restés.

185
00:09:13,320 --> 00:09:14,320
AJAX test n'a pas changé.

186
00:09:14,320 --> 00:09:16,700
Le bouton lui-même, ce
menu déroulant n'a pas changé.

187
00:09:16,700 --> 00:09:18,260
Mais il a changé d'informations.

188
00:09:18,260 --> 00:09:20,218
Et en fonction de la
rapidement mes mouvements informatiques,

189
00:09:20,218 --> 00:09:24,430
vous avez réellement pourriez voir que le contenu
disparaît et puis réapparaît vraiment

190
00:09:24,430 --> 00:09:24,930
rapidement.

191
00:09:24,930 --> 00:09:27,320
Voilà le contenu étant
infodiv retirés,

192
00:09:27,320 --> 00:09:29,940
et ensuite remplacé par un
nouvelle demande asynchrone.

193
00:09:29,940 --> 00:09:34,410
>> Donc, si je l'allume à-dire,
Rob-- et encore, jetez un oeil,

194
00:09:34,410 --> 00:09:38,379
et peut-être nous verrons qu'il fait
disparaître et réapparaître rapidement.

195
00:09:38,379 --> 00:09:38,920
Tu vois ça?

196
00:09:38,920 --> 00:09:41,400
Comment ça juste sauté loin,
et puis il rempli?

197
00:09:41,400 --> 00:09:43,640
Voilà la requête AJAX
sorte d'avoir lieu.

198
00:09:43,640 --> 00:09:46,060
Et si en fonction de la
personne que je choisis, je suis

199
00:09:46,060 --> 00:09:50,690
faisant un asynchrone différent
demande à un fichier différent

200
00:09:50,690 --> 00:09:52,730
que je dois sur mon serveur.

201
00:09:52,730 --> 00:09:55,550
Et le contenu de mon
infodiv sont mise à jour,

202
00:09:55,550 --> 00:09:58,457
sur la base de laquelle de ces Je l'ai choisi.

203
00:09:58,457 --> 00:10:00,040
Voilà donc vraiment tout ce qu'il ya à AJAX.

204
00:10:00,040 --> 00:10:04,090
Il nous permet de faire ces asynchrone
demandes, des mises à jour à une page.

205
00:10:04,090 --> 00:10:06,450
Sans avoir à
rafraîchir la page entière,

206
00:10:06,450 --> 00:10:08,520
nous allons obtenir de nouvelles
Contenu de ce en faisant

207
00:10:08,520 --> 00:10:11,170
une nouvelle nouvelle demande au serveur.

208
00:10:11,170 --> 00:10:13,420
Et oui, nos pages peuvent devenir
un peu plus dynamique.

209
00:10:13,420 --> 00:10:15,128
>> Et que nous aurons plus
et plus avancé, vous

210
00:10:15,128 --> 00:10:17,700
pourraient obtenir des choses comme
par exemple, votre boîte e-mail,

211
00:10:17,700 --> 00:10:19,850
où vous ne devez rien faire.

212
00:10:19,850 --> 00:10:22,560
Vous ne devez pas cliquer sur un
dans le menu déroulant ou cliquez sur quoi que ce soit,

213
00:10:22,560 --> 00:10:25,920
et tout d'un coup, votre plus récent
email montre au sommet.

214
00:10:25,920 --> 00:10:27,840
Cela est également juste une requête Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax est votre demande
serveur, le serveur de messagerie,

216
00:10:30,460 --> 00:10:33,360
d'envoyer plus de toutes les informations
à propos de vos derniers e-mails,

217
00:10:33,360 --> 00:10:38,110
et de changer ce que vous voyez sur la
écran pour être votre plus récent ensemble de courriels.

218
00:10:38,110 --> 00:10:41,080
Et si vous avez un nouveau dans
là, alors le contenu de cette div

219
00:10:41,080 --> 00:10:44,580
va changer pour refléter
le contenu mis à jour.

220
00:10:44,580 --> 00:10:45,480
Je suis Doug Lloyd.

221
00:10:45,480 --> 00:10:47,500
Ceci est CS50.

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