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 จะสิ่งที่เรียกว่าอาแจ็กซ์

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
ฉันไม่ได้มีการขอให้
เซิร์ฟเวอร์ส่งหน้าใหม่

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
แต่เมื่อเราทำฉันจะเป็น
ทำให้การร้องขอไปยังเว็บเซิร์ฟเวอร์

28
00:01:17,750 --> 00:01:21,140
ในกรณีนี้เพียงแค่สิ่งที่เป็น
ใช้เซิร์ฟเวอร์ Apache เว็บของฉัน

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
เราคุ้นเคยกับการจาก
จาวาสคริปต์ในขณะนี้ว่า

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
ที่เรากำลังทำใน
จาวาสคริปต์ที่เราจะ

68
00:03:16,440 --> 00:03:18,750
มีฟังก์ชั่นที่ไม่ระบุชื่อ
ตอบสนองต่อการคลิก,

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 โดยทั่วไปได้รับการร้องขอ

95
00:04:38,530 --> 00:04:41,950
เพียงแค่ทำมันทางโปรแกรม
แทนผ่านเว็บเบราเซอร์ของเรา

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
และผมได้มีข้อมูลไป
ที่นี่และการเรียงลำดับของเมนูแบบเลื่อนลงบางส่วน

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
>> และที่นี่ผมเห็นได้ชัดว่ามี
div ที่มี ID เป็น 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
เรียกว่าเลือกที่
เป็นเพียงเมนูแบบเลื่อนลง

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
และความคุ้มค่าเป็นหนึ่งในเหล่านี้ที่นี่เป็นตัวเลือก
value = เท่ากับที่ว่างเปล่า "Blumberg"

136
00:06:39,820 --> 00:06:42,610
"โบว์", "จัง" และ "ลัน."

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
ฉันเลือกที่ฮันนาห์จากแบบหล่นลง
เมนูข้อมูลเกี่ยวกับฮันนาห์

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
ที่เราเห็นใน
เมนูแบบเลื่อนลงในรูปแบบ

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
ดังนั้นเราจะเลือกใครสักคน
จากเมนูแบบเลื่อนลง

180
00:09:03,400 --> 00:09:06,079
ดังนั้นในกรณีนี้ขอ
เพียงแค่เลือกฮันนาห์

181
00:09:06,079 --> 00:09:08,120
และแจ้งให้ทราบว่าฮันนาห์
ข้อมูลที่มีการเปลี่ยนแปลง

182
00:09:08,120 --> 00:09:11,030
แต่ฉันไม่ได้มี any-- ของฉัน
หน้าไม่ได้โหลดอย่างสิ้นเชิง

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
ปุ่มที่ตัวเองนี้
เมนูแบบเลื่อนลงไม่ได้เปลี่ยน

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
ที่ฉันมีบนเซิร์ฟเวอร์ของฉัน

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
เพื่อที่ว่าจริงๆทั้งหมดที่มีให้อาแจ็กซ์

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
อาจได้รับสิ่งที่ต้องการ
พูด, กล่องจดหมายอีเมลของคุณ

211
00:10:17,700 --> 00:10:19,850
ที่คุณไม่ต้องทำอะไร

212
00:10:19,850 --> 00:10:22,560
คุณจะได้ไม่ต้องคลิก
เมนูแบบเลื่อนลงหรือคลิกอะไร

213
00:10:22,560 --> 00:10:25,920
และในทันทีที่ของคุณใหม่ล่าสุด
อีเมลจะแสดงขึ้นที่ด้านบน

214
00:10:25,920 --> 00:10:27,840
นั่นก็เป็นเพียงแค่การร้องขออาแจ็กซ์

215
00:10:27,840 --> 00:10:30,460
อาแจ็กซ์จะขอของคุณ
เซิร์ฟเวอร์เซิร์ฟเวอร์อีเมล

216
00:10:30,460 --> 00:10:33,360
เพื่อส่งผ่านข้อมูลทั้งหมด
เกี่ยวกับอีเมล์ล่าสุดของคุณ

217
00:10:33,360 --> 00:10:38,110
และการเปลี่ยนแปลงสิ่งที่คุณเห็นใน
หน้าจอจะเป็นชุดใหม่ล่าสุดของอีเมลของคุณ

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
ฉันลอยด์ดั๊ก

221
00:10:45,480 --> 00:10:47,500
นี่คือ CS50

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