1
00:00:00,000 --> 00:00:02,400
[SKAN MŪZIKA ]

2
00:00:02,400 --> 00:00:03,549
DAGS LOIDS: Turpinot JavaScript
izpēti, ir vēl viens paņēmiens, kas 

3
00:00:03,549 --> 00:00:04,698
patiešām varētu noderēt, kad sākat
veidot sarežģītākas tīmekļvietnes, 

4
00:00:04,698 --> 00:00:05,847
tas ir, izmantojot kaut ko, ko sauc
par Ajax. 

5
00:00:16,890 --> 00:00:19,735
Līdz šim, izpētot JavaScript,
vizualizācijas nolūkos esam veikuši 

6
00:00:19,735 --> 00:00:22,580
tikai dažas ļoti vienkāršas
darbības, piemēram, jūs noklikšķināt uz 

7
00:00:22,580 --> 00:00:25,426
pogas, un kaut kas notiek. 

8
00:00:25,426 --> 00:00:29,040
Iespējams, jūsu vietnē mainās krāsa
vai arī daži vārdi mainās.

9
00:00:29,040 --> 00:00:32,479
Taču viss, ko mēs līdz šim esam
darījuši, ir bijis klientu pusē.

10
00:00:32,479 --> 00:00:34,170
Tas viss notiek mūsu datorā.

11
00:00:34,170 --> 00:00:37,050
Mēs nekad īsti nerunājam ar
ārpasauli.

12
00:00:37,050 --> 00:00:40,135
Tomēr mēs varam runāt ar ārpasauli
un veikt izmaiņas savā 

13
00:00:40,135 --> 00:00:43,220
tīmekļvietnē, kaut kas notiek, kas
mijiedarbojas ar serveri, bet 

14
00:00:43,220 --> 00:00:46,305
varbūt tas nepārlādē visu mūsu
lapu. 

15
00:00:46,305 --> 00:00:49,200
Mēs vēlamies radīt patīkamāku
lietotāja pieredzi.

16
00:00:49,200 --> 00:00:51,390
Ajax ļauj mums to izdarīt.

17
00:00:51,390 --> 00:00:54,870
Ajax apzīmēja kaut ko, ko sauc par
asinhrono JavaScript iekš XML.

18
00:00:54,870 --> 00:00:56,180
Tas ir bakronīms.

19
00:00:56,180 --> 00:00:58,710
Tā vairs to īsti nesauc.

20
00:00:58,710 --> 00:01:03,120
Un patiesībā, visbiežāk tagad XML
vietā mēs izmantojam JSON.

21
00:01:03,120 --> 00:01:05,160
Bet Ajax ir bijis tikai nosaukums,
kas tehnikai ir savā veidā 

22
00:01:05,160 --> 00:01:07,200
iestrēdzis. 

23
00:01:07,200 --> 00:01:10,210
Un tas, ko Ajax ļauj mums darīt, ir
būtībā pārlādēt mūsu lapas 

24
00:01:10,210 --> 00:01:13,220
sadaļas bez visas lapas. 

25
00:01:13,220 --> 00:01:17,633
Un, piemēram, ja esat kāds, kas
seko sportam, jūs to varat redzēt, ja 

26
00:01:17,633 --> 00:01:22,046
atrodaties sporta vietnē, kurā tiek
atjauninātas daudzas pašlaik 

27
00:01:22,046 --> 00:01:26,460
notiekošās spēles, bet visa lapa
netiek pārlādēta. 

28
00:01:26,460 --> 00:01:29,670
Tas nozīmē, ka lapa pamatā izmanto
Ajax priekšrocības, lai 

29
00:01:29,670 --> 00:01:32,880
atjauninātu tikai nelielas lapas
daļas. 

30
00:01:32,880 --> 00:01:36,005
Paņēmieni, ko varat izpildīt ar
Ajax, ir diezgan neierobežoti.

31
00:01:36,005 --> 00:01:37,880
Ar to jūs varat paveikt daudz
dažādu lietu.

32
00:01:37,880 --> 00:01:40,180
Un mēs koncentrēsimies uz ļoti
konkrētu piemēru, kur mēs atkal 

33
00:01:40,180 --> 00:01:42,480
noklikšķinām uz pogas un kaut kas
notiek. 

34
00:01:42,480 --> 00:01:44,775
Taču atšķirība ir tāda, ka šoreiz,
kad kaut kas notiek, mēs veicam 

35
00:01:44,775 --> 00:01:47,070
servera pieprasījumu. 

36
00:01:47,070 --> 00:01:49,050
Mēs veicam izejošu pieprasījumu no
lapas.

37
00:01:49,050 --> 00:01:51,970
Tas nenotiek tikai mūsu mašīnā.

38
00:01:51,970 --> 00:01:56,165
Taču varat veikt tādas darbības kā
atjaunināt, piemēram, sporta 

39
00:01:56,165 --> 00:02:00,360
rezultātus tīmekļvietnē, kas izseko
šo informāciju vai jūsu e-pastu. 

40
00:02:00,360 --> 00:02:02,535
Iespējams, pamanīsit, ka dažreiz,
kad saņemat jaunu e-pasta ziņojumu, 

41
00:02:02,535 --> 00:02:04,710
viss jūsu lapas pamatteksts tiek
pārlādēts, lai jaunais e-pasta 

42
00:02:04,710 --> 00:02:06,885
ziņojums tiktu ievietots iesūtnes
augšdaļā, taču visa lapa netiek 

43
00:02:06,885 --> 00:02:09,060
pārlādēta. 

44
00:02:09,060 --> 00:02:10,710
Tas notiek arī ar Ajax.

45
00:02:10,710 --> 00:02:13,339
Bet tas pastāvīgi darbojas visu
laiku.

46
00:02:13,339 --> 00:02:14,880
Tas tikai būtībā vaicā bezgalīgi.

47
00:02:14,880 --> 00:02:18,495
Mēs atkal koncentrēsimies tikai uz
pogas noklikšķināšanu, un kaut kas 

48
00:02:18,495 --> 00:02:22,110
notiek, taču tas mūsu mašīnai vairs
nav tikai vietējais . 

49
00:02:22,110 --> 00:02:25,485
Tātad, lai to izdarītu, mums ir
jāizveido vēl viens īpašs JavaScript 

50
00:02:25,485 --> 00:02:28,860
objekta veids, ko sauc par
XMLHttpRequest. 

51
00:02:28,860 --> 00:02:32,173
Un tas ļauj mums padarīt to
asinhronu, nevis vienlaikus ar lapas 

52
00:02:32,173 --> 00:02:35,486
pārlādēšanu vai lapas ielādi, bet
kaut kad pēc tam, kad mēs joprojām 

53
00:02:35,486 --> 00:02:38,800
atrodamies lapā. 

54
00:02:38,800 --> 00:02:40,940
Tas ir tas, ko mēs domājam, sakot
asinhroni.

55
00:02:40,940 --> 00:02:43,447
tas ļauj mums veikt asinhronu
pieprasījumu serverim, lai iegūtu 

56
00:02:43,447 --> 00:02:45,954
vairāk informācijas. 

57
00:02:45,954 --> 00:02:48,120
Par laimi, to ir ļoti viegli
izveidot.

58
00:02:48,120 --> 00:02:50,280
Piemēram, šī rindiņa izveidotu
jaunu x apjoma HTTP pieprasījuma 

59
00:02:50,280 --> 00:02:52,440
objektu. 

60
00:02:52,440 --> 00:02:56,445
Un šajā gadījumā es vienkārši saucu
šo xhttp un piešķiru to tikai 

61
00:02:56,445 --> 00:03:00,450
nejaušam, lokālam JavaScript
mainīgajam. 

62
00:03:00,450 --> 00:03:04,965
Kad objekts ir izveidots, vispirms
ir jādefinē gatavības stāvokļa 

63
00:03:04,965 --> 00:03:09,480
maiņas darbība. 

64
00:03:09,480 --> 00:03:13,385
Gatavības stāvokļa maiņa patiesībā
ir tikai vārdisks veids, kā 

65
00:03:13,385 --> 00:03:17,290
aprakstīt darbības, kas notiek, kad
apmeklējat lapu. 

66
00:03:17,290 --> 00:03:21,510
Piemēram, jūs noklikšķiniet uz —
atrodaties lapā.

67
00:03:21,510 --> 00:03:22,410
Jūs pārlādējat lapu.

68
00:03:22,410 --> 00:03:25,782
Viss uz sekundi pazūd, pēc tam daži
dati sāk aizpildīties.

69
00:03:25,782 --> 00:03:27,990
Un tad tas pārstāj pārlādēt, un jūs
esat gatavs doties.

70
00:03:27,990 --> 00:03:30,722
Tas notiek vairākos dažādos
stāvokļos, kad pieprasījums nav uzsākts 

71
00:03:30,722 --> 00:03:33,455
līdz pieprasījuma nosūtīšanai un
pieprasījums ir saņemts, līdz 

72
00:03:33,455 --> 00:03:36,187
pieprasījums ir ceļā atpakaļ pie
jums, un tad pieprasījums ir 

73
00:03:36,187 --> 00:03:38,920
pabeigts. 

74
00:03:38,920 --> 00:03:41,435
Tās ir, piemēram, dažas dažādas
stāvokļa izmaiņas, kas var notikt, 

75
00:03:41,435 --> 00:03:43,950
kad apmeklējat vietni. 

76
00:03:43,950 --> 00:03:47,010
Un tās būs arī stāvokļa izmaiņas,
kas notiks, atjauninot mazāku 

77
00:03:47,010 --> 00:03:50,070
vietnes sadaļu. 

78
00:03:50,070 --> 00:03:52,605
Parasti mēs definējam kaut ko, kam
ir jānotiek, kad stāvokļa maiņa 

79
00:03:52,605 --> 00:03:55,140
izmanto anonīmu funkciju. 

80
00:03:55,140 --> 00:03:58,400
Un mēs redzēsim piemēru tam pēc
mirkļa.

81
00:03:58,400 --> 00:04:01,056
Mums nav jāpiešķir šai funkcijai
nosaukums, mēs vienkārši vēlamies, 

82
00:04:01,056 --> 00:04:03,713
lai tā kaut ko darītu ikreiz, kad
tā konstatē kādas izmaiņas vietnes 

83
00:04:03,713 --> 00:04:06,370
ielādes statusā. 

84
00:04:06,370 --> 00:04:09,420
Ir pieci dažādi stāvokļi.

85
00:04:09,420 --> 00:04:10,680
Tie ir no 0 līdz 4.

86
00:04:10,680 --> 00:04:12,445
Tā ir gatavības stāvokļa īpašība,
tāpēc tā ir daļa no gatavības 

87
00:04:12,445 --> 00:04:14,210
stāvokļa maiņas. 

88
00:04:14,210 --> 00:04:15,603
Tas ir skaidri saistīts.

89
00:04:15,603 --> 00:04:19,524
Un tas ir tas, ko es principā tikko
aprakstīju, kur 0 ir pieprasījums 

90
00:04:19,524 --> 00:04:23,446
vēl nav inicializēts un 4, kas ir
beigas, kas ir gatavības stāvokļa 

91
00:04:23,446 --> 00:04:27,368
maiņas pieprasījuma vai Ajax
pieprasījuma galvenais mērķis ir panākt, 

92
00:04:27,368 --> 00:04:31,290
lai šis readyState ir 4, kas būtībā
nozīmē, ka visi tie ir ielādēti. 

93
00:04:31,290 --> 00:04:33,965
Un, cerams, statuss, ko mēs
atgūsim, ir 200.

94
00:04:33,965 --> 00:04:36,090
Tās ir divas lietas, par kurām mēs
patiešām rūpējamies.

95
00:04:36,090 --> 00:04:38,980
Mēs vēlamies pārliecināties, ka
tad, kad mūsu Ajax pieprasījums ir 

96
00:04:38,980 --> 00:04:41,870
pabeigts, readyState ir 4, tātad
dati ir saņemti un dati tika saņemti 

97
00:04:41,870 --> 00:04:44,760
labi. 

98
00:04:44,760 --> 00:04:49,800
Iespējams, atceraties, ka 200 ir
HTTP kods priekš OK.

99
00:04:49,800 --> 00:04:51,870
Tas bija tas, ko mēs, par laimi,
nekad neredzējām.

100
00:04:51,870 --> 00:04:54,797
Mēs neapmeklējām tīmekļvietni un
nesaņemam — jūs neapmeklējat 

101
00:04:54,797 --> 00:04:57,725
tīmekļvietni un nesaņemat 200, kā,
piemēram, jūs saņemat 404. 

102
00:04:57,725 --> 00:04:59,567
Tāpēc mēs galu galā vēlamies, lai
readyState būtu 4 un statuss būtu 

103
00:04:59,567 --> 00:05:01,410
200. 

104
00:05:01,410 --> 00:05:05,980
Šādā gadījumā mēs varam atjaunināt
savu vietni.

105
00:05:05,980 --> 00:05:08,073
Kad tas ir iegūts, mums vienkārši
jāatver pieprasījums un jānosūta 

106
00:05:08,073 --> 00:05:10,167
pieprasījums. 

107
00:05:10,167 --> 00:05:11,500
Un tad mūsu vietne tiks pārlādēta.

108
00:05:11,500 --> 00:05:14,420
Atkal mēs redzēsim ļoti konkrētu
piemēru tam tikai minūtes laikā.

109
00:05:14,420 --> 00:05:17,286
Tātad, ja tas nav skaidrs tieši
tagad, cerams, tas būs tad, kad mēs 

110
00:05:17,286 --> 00:05:20,153
sāksim redzēt kādu kodu un jūs
redzēsit, kā šī mijiedarbība notiek 

111
00:05:20,153 --> 00:05:23,020
reāli tīmekļvietnē. 

112
00:05:23,020 --> 00:05:25,420
Es vēlos vēlreiz norādīt, ka ir
ļoti nedaudz atšķirīgs veids, kā to 

113
00:05:25,420 --> 00:05:27,820
izdarīt sintaktiski, izmantojot
jQuery. 

114
00:05:27,820 --> 00:05:31,045
Un patiesībā mūsdienās ļoti bieži
redzēsit Ajax pieprasījumus, kas 

115
00:05:31,045 --> 00:05:34,270
tiek veikti, izmantojot jQuery. 

116
00:05:34,270 --> 00:05:38,950
Mēs skaidri rādām jums šo tīro
JavaScript versiju, lai jūs to redzētu.

117
00:05:38,950 --> 00:05:42,803
Bet, kad kļūst ērtāk izmantot
jQuery klienta puses skriptēšanai, 

118
00:05:42,803 --> 00:05:46,656
piemēram, DOM manipulācijām vai
Ajax pieprasījumam jūs, iespējams, 

119
00:05:46,656 --> 00:05:50,510
redzēsit š sintaksi nedaudz
citādāk. 

120
00:05:50,510 --> 00:05:54,045
Tātad šeit ir JavaScript funkcija,
kas sagatavo, atver un nosūta Ajax 

121
00:05:54,045 --> 00:05:57,580
pieprasījumu. 

122
00:05:57,580 --> 00:06:00,330
Tāpēc pirmā lieta, ko es darītu, ir
izveidotu savu jauno 

123
00:06:00,330 --> 00:06:03,080
XMLHttpRequest, un es atkal
piešķiršu nejaušam mainīgajam, ko šoreiz 

124
00:06:03,080 --> 00:06:05,830
sauc par aj priekš Ajax. 

125
00:06:05,830 --> 00:06:11,850
Pēc tam es definēšu funkciju, kas
tiks izpildīta, mainot readyState.

126
00:06:11,850 --> 00:06:15,241
Tātad katru reizi, kad mainās
readyState, šī funkcija tiks izpildīta.

127
00:06:15,241 --> 00:06:18,660
Bet, kā redzat, tas patiešām kaut
ko darīs tikai tad, kad readyState 

128
00:06:18,660 --> 00:06:22,080
ir 4 un statuss ir 200. 

129
00:06:22,080 --> 00:06:26,463
Tātad tas notiks — šī funkcija tiks
izpildīta katru reizi, kad 

130
00:06:26,463 --> 00:06:30,846
mainīsies stāvoklis, taču tā būs
jēgpilna darbība tikai tad, kad 

131
00:06:30,846 --> 00:06:35,230
readyState būs 4 un statuss — 200. 

132
00:06:35,230 --> 00:06:39,325
Konkrētu piemēru tam mēs redzēsim
pēc mirkļa, kad mēs atjaunināsim 

133
00:06:39,325 --> 00:06:43,420
mūsu vietnes sadaļu ar dažādiem
fotoattēliem un informāciju. 

134
00:06:43,420 --> 00:06:47,255
Kad tas būs izdarīts, mēs atvērsim
savus XML pieprasījumus vai Ajax 

135
00:06:47,255 --> 00:06:51,090
pieprasījumus. 

136
00:06:51,090 --> 00:06:53,380
Tas ir tikai vienkāršs veids, kā to
izdarīt.

137
00:06:53,380 --> 00:06:57,527
Mēs pamatā veidojam konkrēta
URL GET pieprasījumu.

138
00:06:57,527 --> 00:06:59,110
Neuztraucieties par to, ko nozīmē
patiess.

139
00:06:59,110 --> 00:07:02,080
Un tad mēs vienkārši nosūtīsim šo
pieprasījumu.

140
00:07:02,080 --> 00:07:06,197
Tātad, atkal jūs visbiežāk
redzēsit, ka tas ir rakstīts jQuery, nevis 

141
00:07:06,197 --> 00:07:10,314
tīrā JavaScript. 

142
00:07:10,314 --> 00:07:12,572
Tātad, ja vēlaties uzzināt mazliet
par to, kā to izdarīt, varat 

143
00:07:12,572 --> 00:07:14,830
apskatīt šo URL šeit. 

144
00:07:14,830 --> 00:07:18,706
Bet pagaidām pievērsīsimies IDE un
apskatīsim šo piemēru darbībā, 

145
00:07:18,706 --> 00:07:22,583
veicot Ajax pieprasījumus serverim,
kur serveris darbojas lokāli manā 

146
00:07:22,583 --> 00:07:26,460
datorā, lai redzētu, kā mēs varam
asinhroni mainīt lapu. 

147
00:07:26,460 --> 00:07:29,993
Tātad, ja lejupielādējat pirmkodu,
kas iekļauts šajā short, un tajā 

148
00:07:29,993 --> 00:07:33,526
atverat index.html, jūs atradīsit
lapu, kas izskatās šādi, ko sauc 

149
00:07:33,526 --> 00:07:37,060
par Ajax test. 

150
00:07:37,060 --> 00:07:40,167
Sadaļā ir nolaižamā izvēlne, kurā
teikts, ka informācija ir šeit.

151
00:07:40,167 --> 00:07:41,750
Pēc sekundes redzēsim, ko tas
nozīmē.

152
00:07:41,750 --> 00:07:42,580
Pagaidām es netaisos pie tā
ķerties.

153
00:07:42,580 --> 00:07:45,330
Es vēlos jums parādīt, kas ir
aizkulisēs, pirms mēs to aplūkojam.

154
00:07:45,330 --> 00:07:47,850
Tātad šeit ir pirmkods tam.

155
00:07:47,850 --> 00:07:50,950
Šeit, augšā es 

156
00:07:50,950 --> 00:07:52,855
ielādēju jQuery, jo arī šajā
gadījumā es izmantošu nedaudz jQuery, 

157
00:07:52,855 --> 00:07:54,760
lai jums radītu priekšstatu. 

158
00:07:54,760 --> 00:07:58,410
Man ir savs JavaScript skripts, ko
es uzrakstīju, ar nosaukumu 

159
00:07:58,410 --> 00:08:02,060
Ajax.js, mēs to apskatīsim pēc
mirkļa. 

160
00:08:02,060 --> 00:08:06,645
Šeit jūs redzēsit, ka informācija,
ko mēs tikko skatījāmies vietnē, 

161
00:08:06,645 --> 00:08:11,230
ir div, kuras ID ir infodiv. 

162
00:08:11,230 --> 00:08:13,610
Tas būs ļoti svarīgi pēc minūtes.

163
00:08:13,610 --> 00:08:17,380
Un tad man ir form, kurā man ir
pāris dažādi varianti.

164
00:08:17,380 --> 00:08:22,200
Un, kad kaut kas notiek, it īpaši,
ja mainās vērtība, kad es sarakstā 

165
00:08:22,200 --> 00:08:27,020
atlasu citas opcijas, es izsaukšu
šo funkciju cs50info un pēc tam 

166
00:08:27,020 --> 00:08:31,840
nododu parametru this.value. 

167
00:08:31,840 --> 00:08:36,196
Iespējams, no mūsu video par
JavaScript atceraties, ka tas ir veids, 

168
00:08:36,196 --> 00:08:40,553
kā pašam atsaukties uz notikumu,
kas vispirms aktivizēja JavaScript 

169
00:08:40,553 --> 00:08:44,910
funkcijas izsaukšanu. 

170
00:08:44,910 --> 00:08:47,490
Tātad šis ir cits notikumu
apstrādāšanas veids, pretēji on click, tas 

171
00:08:47,490 --> 00:08:50,071
ir on change. 

172
00:08:50,071 --> 00:08:56,725
Un tas ļaus man noskaidrot, kura no
opcijām izraisīja izmaiņas.

173
00:08:56,725 --> 00:09:00,652
Un es ņemšu this.value, tātad to es
domāju ar vērtību, vai es iegūšu 

174
00:09:00,652 --> 00:09:04,580
šo informāciju. 

175
00:09:04,580 --> 00:09:06,808
Tātad, ja es no šī saraksta izvēlos
Robu Boudenu, būtībā es nododu 

176
00:09:06,808 --> 00:09:09,036
CS50 informāciju . 

177
00:09:09,036 --> 00:09:12,160
Un tad vērtība, kas faktiski tiek
nodota šai funkcijai, ir bowden.

178
00:09:12,160 --> 00:09:15,730
Tie visi ir ar mazajiem burtiem -
chan, malan un zlatkova. Tātad

179
00:09:15,730 --> 00:09:17,940
tās ir dažādas lietas, kas tiks
nodotas šai CS50 informācijas 

180
00:09:17,940 --> 00:09:20,150
funkcijai. 

181
00:09:20,150 --> 00:09:22,000
Ko dara šī CS50 informācijas
funkcija?

182
00:09:22,000 --> 00:09:24,610
Apskatīsim Ajax.js.

183
00:09:24,610 --> 00:09:27,030
Šeit ir CS50 informācija, ja name
ir tukšs, ja es neizvēlējos kādu no 

184
00:09:27,030 --> 00:09:29,450
faktiskajām opcijām, ja es tikai
izvēlējos noklusējuma opciju 

185
00:09:29,450 --> 00:09:31,870
augšpusē, iespējams, jūs to zināt,
izmantojot nolaižamās izvēlnes, 

186
00:09:31,870 --> 00:09:34,290
kur ir tukša vieta, un jums tiešām
kaut kas ir jāizvēlas — es 

187
00:09:34,290 --> 00:09:36,710
atgriežos. 

188
00:09:36,710 --> 00:09:37,543
Es neko nedaru.

189
00:09:37,543 --> 00:09:39,640
Es nevēlos mēģināt darīt neko
smalku.

190
00:09:39,640 --> 00:09:42,850
Pretējā gadījumā es izveidoju
XMLHttpRequest.

191
00:09:42,850 --> 00:09:45,730
Mēs to redzējām slaidos pirms
brīža.

192
00:09:45,730 --> 00:09:48,400
Un es definēju funkciju, kas
gaidīs, līdz readyState būs 4 un statuss 

193
00:09:48,400 --> 00:09:51,070
būs 200. 

194
00:09:51,070 --> 00:09:54,730
Un kad tas notiek, kad tas ir tur,
ko es vēlos darīt?

195
00:09:54,730 --> 00:09:59,650
Es vēlos atjaunināt HTML
informāciju iekš infodiv.

196
00:09:59,650 --> 00:10:01,410
Šis ir jQuery veids, kā to
aprakstīt.

197
00:10:01,410 --> 00:10:04,340
Šī ir jQuery rinda, ko jūs redzēsit
šajā — pārējā daļa ir JavaScript, 

198
00:10:04,340 --> 00:10:07,270
šī ir jQuery — neatkarīgi no tā, ko
es saņemšu no sava Ajax 

199
00:10:07,270 --> 00:10:10,200
pieprasījuma. 

200
00:10:10,200 --> 00:10:12,700
Atcerieties, ka es vēl neesmu
pilnībā iesniedzis Ajax pieprasījumu.

201
00:10:12,700 --> 00:10:15,850
Tas būs tieši šeit, ar open un
send.

202
00:10:15,850 --> 00:10:19,373
Bet, kad es to darīšu, es atgūšu
datus un atjaunināšu visu HTML no 

203
00:10:19,373 --> 00:10:22,896
infodiv , kas sākumā bija
information goes here — tas bija starp div 

204
00:10:22,896 --> 00:10:26,420
tagiem. 

205
00:10:26,420 --> 00:10:29,567
Es to mainīšu uz to, ko saņemšu
atpakaļ savā pieprasījumā.

206
00:10:29,567 --> 00:10:31,900
Bet es to darīšu, neatjauninot visu
lapu.

207
00:10:31,900 --> 00:10:38,668
Es gatavojos pārlādēt, tā teikt,
tikai to div, tikai to lapas sadaļu.

208
00:10:38,668 --> 00:10:40,600
Tātad, kādu failu es atveru?

209
00:10:40,600 --> 00:10:44,520
Nu, es nosūtu GET pieprasījumu
priekš name plus .HTML.

210
00:10:44,520 --> 00:10:46,985
Atcerieties, ka name ir tikai
vērtības nosaukums, mainīgais, kas šeit 

211
00:10:46,985 --> 00:10:49,450
tiek nodots kā parametrs. 

212
00:10:49,450 --> 00:10:50,860
Tātad tas ir name.

213
00:10:50,860 --> 00:10:56,350
Tātad name būs Boudens vai Čan,
Meilans vai Zlatkova. Un

214
00:10:56,350 --> 00:10:58,810
acīmredzot, es pievienošu .HTML tā
beigās.

215
00:10:58,810 --> 00:10:59,890
Nu, pēc kā izskatās viens no šiem?

216
00:10:59,890 --> 00:11:02,150
Nu, tas izskatās pēc sava veida
HTML fragmenta.

217
00:11:02,150 --> 00:11:05,193
Acīmredzot tas nav pilnīgi pareizs
HTML, jo man nav HTML tagu tā 

218
00:11:05,193 --> 00:11:08,236
augšpusē un apakšpusē. 

219
00:11:08,236 --> 00:11:09,610
Tam apkārt nav body tagu.

220
00:11:09,610 --> 00:11:12,030
Bet tas ir mazliet HTML.

221
00:11:12,030 --> 00:11:15,850
Tajā ir rindkopa ar name, attēla
tags un vēl pāris rindkopas ar 

222
00:11:15,850 --> 00:11:19,670
informāciju. 

223
00:11:19,670 --> 00:11:22,940
Tātad, apskatīsim to reāli darbībā
un redzēsim, ko tas dara.

224
00:11:22,940 --> 00:11:24,760
Tātad šobrīd man ir Ajax testi.

225
00:11:24,760 --> 00:11:28,390
Un atcerieties, kad es izvēlos
opciju, šī funkcija izpildīs šo CS50 

226
00:11:28,390 --> 00:11:32,020
informācijas funkciju, nododot to,
ko es izvēlos. 

227
00:11:32,020 --> 00:11:35,196
Tāpēc izvēlēsimies Zamailu.

228
00:11:35,196 --> 00:11:36,320
Tātād ievērojiet, ko tas šeit
darīja.

229
00:11:36,320 --> 00:11:39,150
Šeit parādījās visa šī informācija
no mūsu lapas.

230
00:11:39,150 --> 00:11:41,020
Tur ir tas Zamailas tags.

231
00:11:41,020 --> 00:11:43,310
Tātad es uz mirkli atgriezīšos pie
ID.

232
00:11:43,310 --> 00:11:46,285
Mums ir rindkopa ar viņas vārdu,
attēlu, 2014. gada klasi un Winthrop 

233
00:11:46,285 --> 00:11:49,260
House. 

234
00:11:49,260 --> 00:11:52,287
Patiešām, visa šī informācija tagad
ir šeit.

235
00:11:52,287 --> 00:11:53,620
Bet kas notiks, ja es to mainīšu?

236
00:11:53,620 --> 00:11:56,115
Es nevēlos, lai visa mana lapa
tiktu pārlādēta, taču es vēlos, lai 

237
00:11:56,115 --> 00:11:58,610
mainītos šī div saturs. 

238
00:11:58,610 --> 00:12:01,110
Tāpēc mēģināsim pārslēgt to uz,
piemēram, Robu.

239
00:12:01,110 --> 00:12:04,233
Un, ja paskatās ļoti uzmanīgi un
atkarībā no tā, vai mans dators ir 

240
00:12:04,233 --> 00:12:07,356
nedaudz lēnāks vai ātrāks, jūs
varat ātri redzēt, ka viss saturs tiek 

241
00:12:07,356 --> 00:12:10,480
izdzēsts un pēc tam aizstāts. 

242
00:12:10,480 --> 00:12:14,240
Tas ir asinhronais pieprasījums,
kas notiek ļoti ātri.

243
00:12:14,240 --> 00:12:16,660
Tātad, paskatīsimies, vai mēs to
varam redzēt.

244
00:12:16,660 --> 00:12:19,440
Jūs, iespējams, pamanījāt, ka viss
tika izdzēsts un pēc tam 

245
00:12:19,440 --> 00:12:22,220
atgriezās, taču tagad man ir jauni
dati, jo es izvēlējos jaunu opciju 

246
00:12:22,220 --> 00:12:25,000
no saraksta. 

247
00:12:25,000 --> 00:12:27,570
Atcerieties, ka, ja es izvēlos
Select Someone, nekas nenotiks.

248
00:12:27,570 --> 00:12:31,250
Es nekavējoties atgriezos, tāpēc
tas neatgriežas pie information goes 

249
00:12:31,250 --> 00:12:34,930
here, lai gan es varēju rakstīt
funkciju citādi, lai to izdarītu. 

250
00:12:34,930 --> 00:12:38,793
Bet es varu vienkārši veikt šos
dažādos asinhronos pieprasījumus, un 

251
00:12:38,793 --> 00:12:42,656
tas turpinās atjaunināt
informāciju, ko redzu lapā, nepārlādējot visu 

252
00:12:42,656 --> 00:12:46,520
lapu, tikai to sadaļu, kas man ir
svarīga. 

253
00:12:46,520 --> 00:12:47,570
Tātad tas ir diezgan forši.

254
00:12:47,570 --> 00:12:50,148
Tagad mēs varam ne tikai mainīt
lietas lokāli mūsu iekārtā, 

255
00:12:50,148 --> 00:12:52,726
vienkāršas lietas, piemēram,
krāsas, bet arī tagad varam nosūtīt 

256
00:12:52,726 --> 00:12:55,304
izejošos pieprasījumus serveriem. 

257
00:12:55,304 --> 00:12:57,970
Un tiem pat nav jābūt serveriem,
kas darbojas lokāli.

258
00:12:57,970 --> 00:13:01,150
Iespējams, es varētu iegūt
informāciju no Yahoo Finance, ja vēlos 

259
00:13:01,150 --> 00:13:04,330
asinhroni iegūt datus no Yahoo
Finance. 

260
00:13:04,330 --> 00:13:06,923
Varbūt es to izdarīšu un ielādēšu
savā lapā, un tā būs informācija, 

261
00:13:06,923 --> 00:13:09,516
kas tiek pastāvīgi atjaunināta, jo,
iespējams, man ir atšķirīgs datu 

262
00:13:09,516 --> 00:13:12,110
parādīšanas veids vai kaut kas
cits. 

263
00:13:12,110 --> 00:13:17,110
Tātad tā ir interesanta jauna
stratēģija, kas ir mūsu rīcībā.

264
00:13:17,110 --> 00:13:18,520
Mēs varam nosūtīt pieprasījumus
lokāli.

265
00:13:18,520 --> 00:13:21,353
Mēs varam nosūtīt izejošos
pieprasījumus uz citiem serveriem un 

266
00:13:21,353 --> 00:13:24,186
patiešām izmantot priekšrocības, ko
sniedz labākas lietotāja 

267
00:13:24,186 --> 00:13:27,020
pieredzes radīšana, izmantojot
Ajax. 

268
00:13:27,020 --> 00:13:28,270
Es esmu Dags Loids.

269
00:13:28,270 --> 00:13:30,220
Šis ir CS50.