[MUSIC PLAYING] DOUG LLOYD: Belə ki, bir daha anlayışı sort ki, sort damı altında düşür JavaScript AJAX deyilən bir şey var. Bu baxımdan qədər, bizim JavaScript qarşılıqlı bir təkan məhdud olmuşdur düyməsinə basın və bir şey olur. Və xüsusi, olur ki, bir şey Bizim web baxmaq və dəyişikliklər hiss edir. Sağ? Xüsusilə kimi, sənəd obyekt model video, Mən fon rəngi dəyişdi. Hesab edirəm ki, nə zaman, mən yox idi Hər hansı bir xüsusi əlavə sorğu etmək. Hesab edirəm ki, tələb yox idi server mənə yeni bir saytın göndərin. Mən yalnız mən artıq nə dəyişdi. Mən səhifə yeniden yox idi və hər şeyi mütləq dəyişib belə ki, böyük deyil. Amma mütləq var bir manual istifadəçi qarşılıqlı cəlb. AJAX imkan verir ki, sərin texnika Bizə bir saytın content yeniləmə, və yalnız görünüşünü və yeniden olmadan, hiss edirəm. 

Və xüsusi mən bir saytın məzmununu yenilənməsi demək, Mən biz yeniden yazmaq demirəm JavaScript istifadə səhifə. Edirəm ki, biz, həqiqətən, xahiş deyirəm server daha çox məlumat Bizim səhifə yeniden olmadan. 

Bir az artıq ki, sort daha inkişaf etmiş bir texnika biz danışmaq olacaq ki, Bu video haqqında. Biz bəzi qarşılıqlı olacaq. Biz nə zaman, mən gedirəm web server sorğu edilməsi. Bu halda, yalnız nə var Mənim Apache web server çalışır. Mən əlavə edilməsi üçün gedirəm sorğu Mən bir web page ziyaret alıram isə lakin mənim səhifə yenilemek deyil. 

Bu, sadəcə olacaq asynchronously mənim səhifə yeniləmə. Və əslində, var AJAX üçün dayanır, Asynchronous JavaScript and XML edir. XML biçimlendirme başqa cür deyil dil, və siz düzmək bilər Yalnız HTML kimi düşünün. Bu, tamamilə eyni şey deyil, lakin Bu, əsasən yalnız bir biçimlendirme dili var. Belə ki, bir asinxron var JavaScript və biçimlendirme dili. 

Belə ki, bu istifadə etmək üçün AJAX technique-- AJAX ayrı proqramlaşdırma dili deyil. Bu yalnız sort var techniques-- biz set xüsusi yaratmaq lazımdır JavaScript obyekt olan bir XMLHttpRequest adlanır. İndi bunu etmək çox asandır. Biz yalnız demək var, nə bu obyekt zəng etmək istəyirəm, yeni XMLHttpRequest bərabərdir. İndi biz indi əldə obyektin bir AJAX sort, və ya XMLHttpRequest imkan verir obyekt, Bizə asynchronously bizim səhifə yeniləmək üçün. 

Bu yeni kazanılmış sonra obyekt, bu XMLHttpRequest, biz bir şey var onun onreadystatechange davranış. Onreadystatechange davranış həqiqətən yalnız Bir sorğu etmək zaman bir web page, səhifə addımlar bir sıra keçir. Birincisi, sorğu göndərilmədi. Sonra tələb olmuşdur göndərdik, lakin sonra çıxış deyil. Sonra tələbi üzərinə hərəkətə keçdi edilmişdir. Sonra tələb edir sizə geri göndərilir. 

Sonra tələb edir tam səhifə yükləndi. Bu müxtəlif dövlətlərdir. Və belə ki, biz müəyyən etmək lazımdır yeni XMLHttpRequest obyekt zaman hazır dövlət dəyişikliklər dəyişdirmək üçün. Və adətən, biz bunu anonim funksiyası müəyyən olan biz ilə tanış edirik İndi JavaScript ki, zaman hazır dövlət dəyişikliklər adlanır. Bu daha həqiqətən çox deyil çox var. Biz yalnız bir müəyyən olacaq anonim funksiyası sort istəyirəm nə biz edirdik JavaScript, biz anonim funksiyası var klik bir cavab, və ya biz bir xəritə bunu zaman bir sıra müxtəlif obyektləri. 

Something zaman baş bir şey tıklayan edilib. Bu halda, yalnız bir şey deyil var baş zaman bizim səhifənin dövlət dəyişikliklər. Iki xüsusiyyətləri var sort of-- onlar deyilik ki, yalnız xassələri XMLHttpRequest xas, lakin onlar olduqca mühüm olanları istəyirik. ReadyState deyilən bir şey var, siz yəqin ki, təxmin edə bilər kimi, onreadystatechange ilə bağlı deyil. Bu, həqiqətən sizə deyir readyState nə. 0, 1, 2, 3 və 4 var orada imkanları, və onlar sort təxminən uyğun nə Mən yalnız bir ikinci əvvəl bəhs edirdi. 

Və sonra status hansı Ümid edirəm hər şey OK getdi əgər, qısa olan 200 üçün, əlbəttə, OK, biz http ilə tanış edirik ki. Beləliklə, biz ümid edirik ki, bizim hazır dövlət Dörd və bizim status 200. Və hazır dövlət əgər Dörd və cavab qoymaq hazırdır səhifə və status 200, biz bunu bacardıq hər şey uğurla, indi biz asynchronously bilər Bizim səhifə yeniləmə yeniden olmadan Bunun bütün content. 

Biz nə müəyyən sonra onreadystatechange davranış, və biz təslim etdik readyState 4 və status 200 onda biz nə etmək lazımdır bütün edir bir asinxron açmaq tələb, yalnız edir bir Http ümumiyyətlə sorğu GET. Just program bunu, yerinə web browser vasitəsilə. Və sonra biz ki, sorğu göndərin. Belə ki, nə bəlkə bu yoxdur kontekstində kimi baxmaq? Belə ki, burada bir funksiyası var ki, AJAX sorğu ilə məşğul olur. OLDU? Mən özbaşına bildirib etdik Bu bir dəlil qəbul edir. Və bu bir növ Burada ümumi skelet. Çox əvvəlində, biz almaq özümüzü yeni XMLHttpRequest obyekt. Sonra mən təyin etmək lazımdır onreadystatechange davranış. Və mən demək gedirəm zaman readyState dəyişikliklər Mən sizə bu funksiyası zəng etmək istəyirəm. 

Xahiş edir ki, sual readyState əgər readyState dəyişib əgər 4 4 ola bilər, və status 200 idi, belə ki, biz Mən bir uğurlu tələbi var idi səhifə bir şey etmək istəyirəm. Və biz bir nəzər lazımdır nümunə nə bir şey ikinci ola bilər. Beləliklə, indi müəyyən etmişik Mənim anonim funksiyası, mənim cavab funksiyası zaman readyState dəyişikliklər. 

Beləliklə mən yalnız bir açmaq lazımdır Open metodundan istifadə tələb. Və sonra, mən ki, sorğu göndərin. Və bir nəzər salaq daha konkret nümunəsi nə AJAX bizim web pages edə bilərsiniz. Mən burada bir çox sadə var səhifə home.html çağırıb. Mən bir məlumat gedir var burada açılan menyu bir növ. 

Və biz bir ikinci bu yenidən lazımdır. Amma indi bir almaq lazımdır faktiki mənbə kodu baxmaq. Beləliklə, mən home.html açmaq üçün gedirəm. Və biz neler görəcəksiniz. Burada çox üst qədər ki, mən gedən bəzi JavaScript stuff. 

Və burada, mən yəqin var kimin ID infodiv bir div, və bəzi məlumat orada getmək gedir. Və sonra mən bu forma var. Bu daxilində forması, mən bir şey var bir seçin adlanan yalnız bir açılan menyu müxtəlif variantları bir dəstə ilə. Və zaman dəyişikliklər yəqin zaman seçilib seçimi var dəyişdi, mən zəng etmək üçün gedirəm bir funksiyası cs50Info, və sonra mən gedirəm this.value keçmək, bu aiddir olan seçim idi, və dəyəri, burada seçim bu bir deyil value = bərabərdir boş "Blumberg" "Bowden", "chan" və "Malan." 

Belə ki, nə həqiqətən bilər Mən bunu zaman burada baş? Yaxşı, bir götürək blumberg.html baxmaq. Yalnız bir var kimi görünür Bəzi HTML parçasını. Və əslində, mən nə ümid edirəm burada baş verəcək Mən plug etmək gedirəm ki, web page birbaşa bu Html yeniden olmadan səhifə bu cür zaman Mən açılan Hannah seçin menyu, Hannah haqqında məlumat Xüsusilə bu məlumat burada blumberg.html da, səhifə göstərir nə. Mən yenilemek üçün yoxdur. Mən başqası seçtiyseniz onların informasiya göstərmək olardı. Bunu necə edə bilərəm? Yenə də, bu tələb Bizə bəzi AJAX istifadə etmək. Və belə ki, biz ajax.js. açmaq lazımdır Və burada, cs50Info ki funksiyası var. Adı bir şey deyil, mən qayıtmaq. Mən əgər bir şey etmək fikrində deyiləm boş seçimi seçilmişdir. Əks halda, mən gedirəm yeni XMLHttpRequest yaradır. Və sonra mən demək gedirəm readyState dəyişikliklər bu funksiyası zəng. 

Və readyState əgər 4 və status 200, Burada bir az var line 13-də jQuery. Amma deyib edirəm bütün, infodiv məzmunu dəyişmək Mən geri almışdır nə olmaq Mənim HttpRequest cavab. 

Mənim HttpRequest nədir? Bəli, doğru burada xətti 18 və 19. Line 18, mən əsasən hazırlıq edirəm ad + Html üçün sorğu almaq. Və yenə, adı burada idi arqument cs50Info bir parametr kimi keçdi. 

Belə ki, əsasən, Mən kimsə nin keçən edirəm variantları ki, set olan, adı biz gördük ki, açılan menyu şəklində. Hesab edirəm ki, adını alıram. Mən sizi istəyirəm dedi alıram mənim üçün file.html əldə edin, və sonra sorğu göndərin. 

Və belə ki, onreadystatechange gedir dinləmək və gözləmə və gözləmə olmaq və readyState qədər gözləyir 4, və status 200. Belə ki, xidmət üçün hazır və sorğu uğurlu oldu. Bu Əgər Və sonra, bu olacaq infodiv məzmunu dəyişmək Mən geri almışdır cavab mətn olmalıdır. 

Belə ki, necə bu görək iş bilər. Beləliklə, biz mənim brauzerinizin üzərində rəhbərlik lazımdır pəncərə, və biz burada baxmaq lazımdır. Belə ki, bir nəzər salaq nə AJAX burada olur. Beləliklə, biz kimsə seçə bilərsiniz açılan menudan. Bu halda, belə ki, edək yalnız Hannah download. Və bildiriş ki Hannah nin məlumat dəyişdi, amma any-- yox idi mənim səhifə tamamilə yenidən vermədi. stuff qaldı. Məhsullarının ən qaldı. AJAX Test dəyişməyib. düyməsini özü bu açılan menyu dəyişməyib. Lakin orada dəyişiklik etdi. Və necə asılı olaraq tez mənim kompüter hərəkət, Siz, həqiqətən, content ki, görə bilərsiniz yox və sonra, həqiqətən, reappears tez. Ki, olan content var infodiv silindi, və sonra bir ilə əvəz yeni asynchronous tələbi. 

Mən demək üçün keçid Belə ki, Rob-- və yenə bir nəzər, və bəlkə biz, həqiqətən, görmək lazımdır yox və tez yeniden. Siz ki, görəcəksiniz? Necə yalnız üz atdı və sonra artırıldığı? Ki, AJAX tələb var yaşanır sort. Və belə asılı olaraq şəxs Mən deyiləm, seçin fərqli asynchronous edilməsi fərqli bir fayl tələb Mən server var. Və məzmunu mənim infodiv təzələyirik, Mən seçdiyiniz bu əsasında. Belə ki, həqiqətən, bütün AJAX var var. Bu, bizə bu asynchronous etmək üçün imkan verir sorğu, bir səhifə yenilikləri. Olmadan bütün səhifə yenilemek, yeni almaq olacaq edərək bu content server yeni təzə sorğu. Belə ki, bizim pages ola bilər bir qədər daha dinamik. 

Və daha çox almaq kimi və daha inkişaf etmiş, sizə kimi şeylər əldə edə bilər demək, e-poçt gelen qutusu, harada bir şey yoxdur. Siz basın yoxdur menyu aşağı açılan və ya bir şey basın və qəflətən, sizin yeni e-poçt üst göstərir. Bu da yalnız bir Ajax sorğu var. Ajax sorğu Sizin server, e-poçt server, bütün məlumat göndərmək üçün son e-poçt haqqında, və siz görmək nə dəyişən ekran e-poçt sizin yeni set olmalıdır. Və yeni bir var, əgər ki, div var, onda content əks etdirmək üçün dəyişəcək yeniləndi content. Mən Doug Lloyd edirəm. Bu CS50 edir.