1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,810 [MUSIC PLAYING] 3 00:00:04,810 --> 00:00:06,940 >> DOUG LLOYD: Belə ki, bir daha anlayışı sort ki, 4 00:00:06,940 --> 00:00:12,120 sort damı altında düşür JavaScript AJAX deyilən bir şey var. 5 00:00:12,120 --> 00:00:15,310 Bu baxımdan qədər, bizim JavaScript qarşılıqlı 6 00:00:15,310 --> 00:00:17,727 bir təkan məhdud olmuşdur düyməsinə basın və bir şey olur. 7 00:00:17,727 --> 00:00:19,560 Və xüsusi, olur ki, bir şey 8 00:00:19,560 --> 00:00:22,950 Bizim web baxmaq və dəyişikliklər hiss edir. 9 00:00:22,950 --> 00:00:23,450 Sağ? 10 00:00:23,450 --> 00:00:26,540 Xüsusilə kimi, sənəd obyekt model video, 11 00:00:26,540 --> 00:00:29,060 Mən fon rəngi dəyişdi. 12 00:00:29,060 --> 00:00:33,240 Hesab edirəm ki, nə zaman, mən yox idi Hər hansı bir xüsusi əlavə sorğu etmək. 13 00:00:33,240 --> 00:00:36,800 Hesab edirəm ki, tələb yox idi server mənə yeni bir saytın göndərin. 14 00:00:36,800 --> 00:00:39,620 Mən yalnız mən artıq nə dəyişdi. 15 00:00:39,620 --> 00:00:42,245 Mən səhifə yeniden yox idi və hər şeyi mütləq dəyişib 16 00:00:42,245 --> 00:00:43,760 belə ki, böyük deyil. 17 00:00:43,760 --> 00:00:48,400 Amma mütləq var bir manual istifadəçi qarşılıqlı cəlb. 18 00:00:48,400 --> 00:00:53,140 AJAX imkan verir ki, sərin texnika Bizə bir saytın content yeniləmə, 19 00:00:53,140 --> 00:00:55,750 və yalnız görünüşünü və yeniden olmadan, hiss edirəm. 20 00:00:55,750 --> 00:00:58,610 >> Və xüsusi mən bir saytın məzmununu yenilənməsi demək, 21 00:00:58,610 --> 00:01:01,990 Mən biz yeniden yazmaq demirəm JavaScript istifadə səhifə. 22 00:01:01,990 --> 00:01:06,560 Edirəm ki, biz, həqiqətən, xahiş deyirəm server daha çox məlumat 23 00:01:06,560 --> 00:01:08,640 Bizim səhifə yeniden olmadan. 24 00:01:08,640 --> 00:01:10,850 >> Bir az artıq ki, sort daha inkişaf etmiş bir texnika 25 00:01:10,850 --> 00:01:11,950 biz danışmaq olacaq ki, Bu video haqqında. 26 00:01:11,950 --> 00:01:13,720 Biz bəzi qarşılıqlı olacaq. 27 00:01:13,720 --> 00:01:17,750 Biz nə zaman, mən gedirəm web server sorğu edilməsi. 28 00:01:17,750 --> 00:01:21,140 Bu halda, yalnız nə var Mənim Apache web server çalışır. 29 00:01:21,140 --> 00:01:25,010 Mən əlavə edilməsi üçün gedirəm sorğu Mən bir web page ziyaret alıram isə 30 00:01:25,010 --> 00:01:26,890 lakin mənim səhifə yenilemek deyil. 31 00:01:26,890 --> 00:01:30,000 >> Bu, sadəcə olacaq asynchronously mənim səhifə yeniləmə. 32 00:01:30,000 --> 00:01:31,840 Və əslində, var AJAX üçün dayanır, 33 00:01:31,840 --> 00:01:35,400 Asynchronous JavaScript and XML edir. 34 00:01:35,400 --> 00:01:37,910 XML biçimlendirme başqa cür deyil dil, və siz düzmək bilər 35 00:01:37,910 --> 00:01:39,680 Yalnız HTML kimi düşünün. 36 00:01:39,680 --> 00:01:42,990 Bu, tamamilə eyni şey deyil, lakin Bu, əsasən yalnız bir biçimlendirme dili var. 37 00:01:42,990 --> 00:01:47,770 Belə ki, bir asinxron var JavaScript və biçimlendirme dili. 38 00:01:47,770 --> 00:01:50,590 >> Belə ki, bu istifadə etmək üçün AJAX technique-- AJAX 39 00:01:50,590 --> 00:01:52,230 ayrı proqramlaşdırma dili deyil. 40 00:01:52,230 --> 00:01:55,300 Bu yalnız sort var techniques-- biz set 41 00:01:55,300 --> 00:01:57,870 xüsusi yaratmaq lazımdır JavaScript obyekt olan 42 00:01:57,870 --> 00:02:00,689 bir XMLHttpRequest adlanır. 43 00:02:00,689 --> 00:02:01,980 İndi bunu etmək çox asandır. 44 00:02:01,980 --> 00:02:04,550 Biz yalnız demək var, nə bu obyekt zəng etmək istəyirəm, 45 00:02:04,550 --> 00:02:07,030 yeni XMLHttpRequest bərabərdir. 46 00:02:07,030 --> 00:02:11,050 İndi biz indi əldə obyektin bir AJAX sort, 47 00:02:11,050 --> 00:02:14,370 və ya XMLHttpRequest imkan verir obyekt, 48 00:02:14,370 --> 00:02:18,360 Bizə asynchronously bizim səhifə yeniləmək üçün. 49 00:02:18,360 --> 00:02:23,100 >> Bu yeni kazanılmış sonra obyekt, bu XMLHttpRequest, 50 00:02:23,100 --> 00:02:27,760 biz bir şey var onun onreadystatechange davranış. 51 00:02:27,760 --> 00:02:30,360 Onreadystatechange davranış həqiqətən yalnız 52 00:02:30,360 --> 00:02:34,080 Bir sorğu etmək zaman bir web page, səhifə 53 00:02:34,080 --> 00:02:35,880 addımlar bir sıra keçir. 54 00:02:35,880 --> 00:02:37,370 Birincisi, sorğu göndərilmədi. 55 00:02:37,370 --> 00:02:39,860 Sonra tələb olmuşdur göndərdik, lakin sonra çıxış deyil. 56 00:02:39,860 --> 00:02:41,580 Sonra tələbi üzərinə hərəkətə keçdi edilmişdir. 57 00:02:41,580 --> 00:02:43,680 Sonra tələb edir sizə geri göndərilir. 58 00:02:43,680 --> 00:02:46,930 >> Sonra tələb edir tam səhifə yükləndi. 59 00:02:46,930 --> 00:02:48,640 Bu müxtəlif dövlətlərdir. 60 00:02:48,640 --> 00:02:53,890 Və belə ki, biz müəyyən etmək lazımdır yeni XMLHttpRequest obyekt 61 00:02:53,890 --> 00:02:58,740 zaman hazır dövlət dəyişikliklər dəyişdirmək üçün. 62 00:02:58,740 --> 00:03:01,925 Və adətən, biz bunu anonim funksiyası müəyyən olan 63 00:03:01,925 --> 00:03:04,490 biz ilə tanış edirik İndi JavaScript ki, 64 00:03:04,490 --> 00:03:09,840 zaman hazır dövlət dəyişikliklər adlanır. 65 00:03:09,840 --> 00:03:11,340 Bu daha həqiqətən çox deyil çox var. 66 00:03:11,340 --> 00:03:14,340 Biz yalnız bir müəyyən olacaq anonim funksiyası sort istəyirəm nə 67 00:03:14,340 --> 00:03:16,440 biz edirdik JavaScript, biz 68 00:03:16,440 --> 00:03:18,750 anonim funksiyası var klik bir cavab, 69 00:03:18,750 --> 00:03:23,230 və ya biz bir xəritə bunu zaman bir sıra müxtəlif obyektləri. 70 00:03:23,230 --> 00:03:25,220 >> Something zaman baş bir şey tıklayan edilib. 71 00:03:25,220 --> 00:03:28,810 Bu halda, yalnız bir şey deyil var baş zaman bizim səhifənin dövlət 72 00:03:28,810 --> 00:03:30,160 dəyişikliklər. 73 00:03:30,160 --> 00:03:32,730 Iki xüsusiyyətləri var sort of-- onlar deyilik ki, 74 00:03:32,730 --> 00:03:35,524 yalnız xassələri XMLHttpRequest xas, 75 00:03:35,524 --> 00:03:36,940 lakin onlar olduqca mühüm olanları istəyirik. 76 00:03:36,940 --> 00:03:39,815 ReadyState deyilən bir şey var, siz yəqin ki, təxmin edə bilər kimi, 77 00:03:39,815 --> 00:03:41,750 onreadystatechange ilə bağlı deyil. 78 00:03:41,750 --> 00:03:44,250 Bu, həqiqətən sizə deyir readyState nə. 79 00:03:44,250 --> 00:03:46,289 0, 1, 2, 3 və 4 var orada imkanları, 80 00:03:46,289 --> 00:03:48,080 və onlar sort təxminən uyğun nə 81 00:03:48,080 --> 00:03:50,030 Mən yalnız bir ikinci əvvəl bəhs edirdi. 82 00:03:50,030 --> 00:03:53,100 >> Və sonra status hansı Ümid edirəm hər şey OK getdi əgər, 83 00:03:53,100 --> 00:03:56,710 qısa olan 200 üçün, əlbəttə, OK, 84 00:03:56,710 --> 00:03:58,330 biz http ilə tanış edirik ki. 85 00:03:58,330 --> 00:04:03,735 Beləliklə, biz ümid edirik ki, bizim hazır dövlət Dörd və bizim status 200. 86 00:04:03,735 --> 00:04:07,940 Və hazır dövlət əgər Dörd və cavab 87 00:04:07,940 --> 00:04:11,490 qoymaq hazırdır səhifə və status 200, 88 00:04:11,490 --> 00:04:13,580 biz bunu bacardıq hər şey uğurla, 89 00:04:13,580 --> 00:04:17,209 indi biz asynchronously bilər Bizim səhifə yeniləmə 90 00:04:17,209 --> 00:04:21,730 yeniden olmadan Bunun bütün content. 91 00:04:21,730 --> 00:04:27,710 >> Biz nə müəyyən sonra onreadystatechange davranış, 92 00:04:27,710 --> 00:04:31,020 və biz təslim etdik readyState 4 və status 200 93 00:04:31,020 --> 00:04:33,900 onda biz nə etmək lazımdır bütün edir bir asinxron açmaq 94 00:04:33,900 --> 00:04:38,530 tələb, yalnız edir bir Http ümumiyyətlə sorğu GET. 95 00:04:38,530 --> 00:04:41,950 Just program bunu, yerinə web browser vasitəsilə. 96 00:04:41,950 --> 00:04:43,786 Və sonra biz ki, sorğu göndərin. 97 00:04:43,786 --> 00:04:45,660 Belə ki, nə bəlkə bu yoxdur kontekstində kimi baxmaq? 98 00:04:45,660 --> 00:04:49,790 Belə ki, burada bir funksiyası var ki, AJAX sorğu ilə məşğul olur. 99 00:04:49,790 --> 00:04:50,290 OLDU? 100 00:04:50,290 --> 00:04:52,430 Mən özbaşına bildirib etdik Bu bir dəlil qəbul edir. 101 00:04:52,430 --> 00:04:55,550 Və bu bir növ Burada ümumi skelet. 102 00:04:55,550 --> 00:05:00,890 Çox əvvəlində, biz almaq özümüzü yeni XMLHttpRequest obyekt. 103 00:05:00,890 --> 00:05:03,830 Sonra mən təyin etmək lazımdır onreadystatechange davranış. 104 00:05:03,830 --> 00:05:06,970 Və mən demək gedirəm zaman readyState dəyişikliklər 105 00:05:06,970 --> 00:05:10,110 Mən sizə bu funksiyası zəng etmək istəyirəm. 106 00:05:10,110 --> 00:05:12,570 >> Xahiş edir ki, sual readyState əgər 107 00:05:12,570 --> 00:05:17,240 readyState dəyişib əgər 4 4 ola bilər, və status 200 idi, 108 00:05:17,240 --> 00:05:20,799 belə ki, biz Mən bir uğurlu tələbi var idi səhifə bir şey etmək istəyirəm. 109 00:05:20,799 --> 00:05:22,590 Və biz bir nəzər lazımdır nümunə nə 110 00:05:22,590 --> 00:05:25,010 bir şey ikinci ola bilər. 111 00:05:25,010 --> 00:05:27,830 Beləliklə, indi müəyyən etmişik Mənim anonim funksiyası, 112 00:05:27,830 --> 00:05:31,340 mənim cavab funksiyası zaman readyState dəyişikliklər. 113 00:05:31,340 --> 00:05:37,120 >> Beləliklə mən yalnız bir açmaq lazımdır Open metodundan istifadə tələb. 114 00:05:37,120 --> 00:05:39,160 Və sonra, mən ki, sorğu göndərin. 115 00:05:39,160 --> 00:05:41,980 Və bir nəzər salaq daha konkret nümunəsi 116 00:05:41,980 --> 00:05:46,290 nə AJAX bizim web pages edə bilərsiniz. 117 00:05:46,290 --> 00:05:49,740 Mən burada bir çox sadə var səhifə home.html çağırıb. 118 00:05:49,740 --> 00:05:53,620 Mən bir məlumat gedir var burada açılan menyu bir növ. 119 00:05:53,620 --> 00:05:55,390 >> Və biz bir ikinci bu yenidən lazımdır. 120 00:05:55,390 --> 00:05:59,150 Amma indi bir almaq lazımdır faktiki mənbə kodu baxmaq. 121 00:05:59,150 --> 00:06:01,080 Beləliklə, mən home.html açmaq üçün gedirəm. 122 00:06:01,080 --> 00:06:03,490 123 00:06:03,490 --> 00:06:04,740 Və biz neler görəcəksiniz. 124 00:06:04,740 --> 00:06:08,240 Burada çox üst qədər ki, mən gedən bəzi JavaScript stuff. 125 00:06:08,240 --> 00:06:12,470 >> Və burada, mən yəqin var kimin ID infodiv bir div, 126 00:06:12,470 --> 00:06:15,290 və bəzi məlumat orada getmək gedir. 127 00:06:15,290 --> 00:06:16,374 Və sonra mən bu forma var. 128 00:06:16,374 --> 00:06:18,081 Bu daxilində forması, mən bir şey var 129 00:06:18,081 --> 00:06:20,200 bir seçin adlanan yalnız bir açılan menyu 130 00:06:20,200 --> 00:06:22,150 müxtəlif variantları bir dəstə ilə. 131 00:06:22,150 --> 00:06:26,150 Və zaman dəyişikliklər yəqin zaman seçilib seçimi var 132 00:06:26,150 --> 00:06:30,600 dəyişdi, mən zəng etmək üçün gedirəm bir funksiyası cs50Info, 133 00:06:30,600 --> 00:06:33,190 və sonra mən gedirəm this.value keçmək, 134 00:06:33,190 --> 00:06:35,740 bu aiddir olan seçim idi, 135 00:06:35,740 --> 00:06:39,820 və dəyəri, burada seçim bu bir deyil value = bərabərdir boş "Blumberg" 136 00:06:39,820 --> 00:06:42,610 "Bowden", "chan" və "Malan." 137 00:06:42,610 --> 00:06:45,090 >> Belə ki, nə həqiqətən bilər Mən bunu zaman burada baş? 138 00:06:45,090 --> 00:06:48,800 Yaxşı, bir götürək blumberg.html baxmaq. 139 00:06:48,800 --> 00:06:51,330 140 00:06:51,330 --> 00:06:53,924 Yalnız bir var kimi görünür Bəzi HTML parçasını. 141 00:06:53,924 --> 00:06:56,090 Və əslində, mən nə ümid edirəm burada baş verəcək 142 00:06:56,090 --> 00:07:00,020 Mən plug etmək gedirəm ki, web page birbaşa bu Html 143 00:07:00,020 --> 00:07:02,970 yeniden olmadan səhifə bu cür zaman 144 00:07:02,970 --> 00:07:07,510 Mən açılan Hannah seçin menyu, Hannah haqqında məlumat 145 00:07:07,510 --> 00:07:11,100 Xüsusilə bu məlumat burada blumberg.html da, 146 00:07:11,100 --> 00:07:12,574 səhifə göstərir nə. 147 00:07:12,574 --> 00:07:13,740 Mən yenilemek üçün yoxdur. 148 00:07:13,740 --> 00:07:16,842 Mən başqası seçtiyseniz onların informasiya göstərmək olardı. 149 00:07:16,842 --> 00:07:17,550 Bunu necə edə bilərəm? 150 00:07:17,550 --> 00:07:20,290 Yenə də, bu tələb Bizə bəzi AJAX istifadə etmək. 151 00:07:20,290 --> 00:07:22,540 Və belə ki, biz ajax.js. açmaq lazımdır 152 00:07:22,540 --> 00:07:25,550 Və burada, cs50Info ki funksiyası var. 153 00:07:25,550 --> 00:07:27,410 Adı bir şey deyil, mən qayıtmaq. 154 00:07:27,410 --> 00:07:31,450 Mən əgər bir şey etmək fikrində deyiləm boş seçimi seçilmişdir. 155 00:07:31,450 --> 00:07:35,420 Əks halda, mən gedirəm yeni XMLHttpRequest yaradır. 156 00:07:35,420 --> 00:07:39,020 Və sonra mən demək gedirəm readyState dəyişikliklər bu funksiyası zəng. 157 00:07:39,020 --> 00:07:43,630 >> Və readyState əgər 4 və status 200, 158 00:07:43,630 --> 00:07:45,740 Burada bir az var line 13-də jQuery. 159 00:07:45,740 --> 00:07:50,450 Amma deyib edirəm bütün, infodiv məzmunu dəyişmək 160 00:07:50,450 --> 00:07:57,820 Mən geri almışdır nə olmaq Mənim HttpRequest cavab. 161 00:07:57,820 --> 00:07:59,590 >> Mənim HttpRequest nədir? 162 00:07:59,590 --> 00:08:02,020 Bəli, doğru burada xətti 18 və 19. 163 00:08:02,020 --> 00:08:08,550 Line 18, mən əsasən hazırlıq edirəm ad + Html üçün sorğu almaq. 164 00:08:08,550 --> 00:08:11,170 Və yenə, adı burada idi arqument 165 00:08:11,170 --> 00:08:14,280 cs50Info bir parametr kimi keçdi. 166 00:08:14,280 --> 00:08:18,460 >> Belə ki, əsasən, Mən kimsə nin keçən edirəm variantları ki, set olan, adı 167 00:08:18,460 --> 00:08:22,980 biz gördük ki, açılan menyu şəklində. 168 00:08:22,980 --> 00:08:24,450 Hesab edirəm ki, adını alıram. 169 00:08:24,450 --> 00:08:29,530 Mən sizi istəyirəm dedi alıram mənim üçün file.html əldə edin, 170 00:08:29,530 --> 00:08:31,020 və sonra sorğu göndərin. 171 00:08:31,020 --> 00:08:34,820 >> Və belə ki, onreadystatechange gedir dinləmək və gözləmə və gözləmə olmaq 172 00:08:34,820 --> 00:08:39,460 və readyState qədər gözləyir 4, və status 200. 173 00:08:39,460 --> 00:08:44,970 Belə ki, xidmət üçün hazır və sorğu uğurlu oldu. 174 00:08:44,970 --> 00:08:49,500 Bu Əgər Və sonra, bu olacaq infodiv məzmunu dəyişmək 175 00:08:49,500 --> 00:08:53,030 Mən geri almışdır cavab mətn olmalıdır. 176 00:08:53,030 --> 00:08:54,930 >> Belə ki, necə bu görək iş bilər. 177 00:08:54,930 --> 00:08:58,860 Beləliklə, biz mənim brauzerinizin üzərində rəhbərlik lazımdır pəncərə, və biz burada baxmaq lazımdır. 178 00:08:58,860 --> 00:09:01,359 Belə ki, bir nəzər salaq nə AJAX burada olur. 179 00:09:01,359 --> 00:09:03,400 Beləliklə, biz kimsə seçə bilərsiniz açılan menudan. 180 00:09:03,400 --> 00:09:06,079 Bu halda, belə ki, edək yalnız Hannah download. 181 00:09:06,079 --> 00:09:08,120 Və bildiriş ki Hannah nin məlumat dəyişdi, 182 00:09:08,120 --> 00:09:11,030 amma any-- yox idi mənim səhifə tamamilə yenidən vermədi. 183 00:09:11,030 --> 00:09:12,190 stuff qaldı. 184 00:09:12,190 --> 00:09:13,320 Məhsullarının ən qaldı. 185 00:09:13,320 --> 00:09:14,320 AJAX Test dəyişməyib. 186 00:09:14,320 --> 00:09:16,700 düyməsini özü bu açılan menyu dəyişməyib. 187 00:09:16,700 --> 00:09:18,260 Lakin orada dəyişiklik etdi. 188 00:09:18,260 --> 00:09:20,218 Və necə asılı olaraq tez mənim kompüter hərəkət, 189 00:09:20,218 --> 00:09:24,430 Siz, həqiqətən, content ki, görə bilərsiniz yox və sonra, həqiqətən, reappears 190 00:09:24,430 --> 00:09:24,930 tez. 191 00:09:24,930 --> 00:09:27,320 Ki, olan content var infodiv silindi, 192 00:09:27,320 --> 00:09:29,940 və sonra bir ilə əvəz yeni asynchronous tələbi. 193 00:09:29,940 --> 00:09:34,410 >> Mən demək üçün keçid Belə ki, Rob-- və yenə bir nəzər, 194 00:09:34,410 --> 00:09:38,379 və bəlkə biz, həqiqətən, görmək lazımdır yox və tez yeniden. 195 00:09:38,379 --> 00:09:38,920 Siz ki, görəcəksiniz? 196 00:09:38,920 --> 00:09:41,400 Necə yalnız üz atdı və sonra artırıldığı? 197 00:09:41,400 --> 00:09:43,640 Ki, AJAX tələb var yaşanır sort. 198 00:09:43,640 --> 00:09:46,060 Və belə asılı olaraq şəxs Mən deyiləm, seçin 199 00:09:46,060 --> 00:09:50,690 fərqli asynchronous edilməsi fərqli bir fayl tələb 200 00:09:50,690 --> 00:09:52,730 Mən server var. 201 00:09:52,730 --> 00:09:55,550 Və məzmunu mənim infodiv təzələyirik, 202 00:09:55,550 --> 00:09:58,457 Mən seçdiyiniz bu əsasında. 203 00:09:58,457 --> 00:10:00,040 Belə ki, həqiqətən, bütün AJAX var var. 204 00:10:00,040 --> 00:10:04,090 Bu, bizə bu asynchronous etmək üçün imkan verir sorğu, bir səhifə yenilikləri. 205 00:10:04,090 --> 00:10:06,450 Olmadan bütün səhifə yenilemek, 206 00:10:06,450 --> 00:10:08,520 yeni almaq olacaq edərək bu content 207 00:10:08,520 --> 00:10:11,170 server yeni təzə sorğu. 208 00:10:11,170 --> 00:10:13,420 Belə ki, bizim pages ola bilər bir qədər daha dinamik. 209 00:10:13,420 --> 00:10:15,128 >> Və daha çox almaq kimi və daha inkişaf etmiş, sizə 210 00:10:15,128 --> 00:10:17,700 kimi şeylər əldə edə bilər demək, e-poçt gelen qutusu, 211 00:10:17,700 --> 00:10:19,850 harada bir şey yoxdur. 212 00:10:19,850 --> 00:10:22,560 Siz basın yoxdur menyu aşağı açılan və ya bir şey basın 213 00:10:22,560 --> 00:10:25,920 və qəflətən, sizin yeni e-poçt üst göstərir. 214 00:10:25,920 --> 00:10:27,840 Bu da yalnız bir Ajax sorğu var. 215 00:10:27,840 --> 00:10:30,460 Ajax sorğu Sizin server, e-poçt server, 216 00:10:30,460 --> 00:10:33,360 bütün məlumat göndərmək üçün son e-poçt haqqında, 217 00:10:33,360 --> 00:10:38,110 və siz görmək nə dəyişən ekran e-poçt sizin yeni set olmalıdır. 218 00:10:38,110 --> 00:10:41,080 Və yeni bir var, əgər ki, div var, onda content 219 00:10:41,080 --> 00:10:44,580 əks etdirmək üçün dəyişəcək yeniləndi content. 220 00:10:44,580 --> 00:10:45,480 Mən Doug Lloyd edirəm. 221 00:10:45,480 --> 00:10:47,500 Bu CS50 edir. 222 00:10:47,500 --> 00:10:49,229