[Speel van musiek] DOUG LLOYD: So een soort van idee dat soort van val onder die sambreel van JavaScript is iets genoem AJAX. Tot hierdie punt, ons interaksie met JavaScript is beperk tot 'n druk knoppie en iets gebeur. En spesifiek die iets wat gebeur is ons webtuistes lyk en voel veranderinge. Reg? Soos in die besonder, in die dokument model voorwerp video, Ek verander die agtergrond. Maar toe ek dit gedoen het, het ek nie ' enige spesiale versoeke ekstra te doen. Ek het nie om te vra dat die bediener stuur vir my 'n nuwe bladsy. Ek het net verander wat ek reeds gehad het. Ek het nie op my bladsy laai, en dinge beslis verander, so dit is 'n groot. Maar daar is beslis 'n paar handleiding gebruiker interaksie betrokke is. AJAX is 'n koel tegniek wat toelaat ons inhoud van die bladsy te werk, en nie net die voorkoms en voel, sonder herlaai. 

En deur spesifiek toe ek sê die opdatering inhoud van die bladsy, Ek sê nie ons herskryf die bladsy met JavaScript. Ek sê ons eintlik versoek meer inligting van die bediener sonder ons bladsy om te herlaai. 

Nou dat die soort van 'n bietjie van 'n meer gevorderde tegniek dat ons gaan om te praat oor wat in hierdie video. Ons gaan 'n paar interaksie te hê. Maar wanneer ons dit doen, ek gaan wees versoeke om die web-bediener. In hierdie geval, net wat hardloop my Apache web server. Ek gaan word om bykomende versoeke terwyl ek besoek 'n webblad, maar my bladsy sal nie verfris. 

Dit is net gaan om te asynchroon werk my bladsy. En dit is, in werklikheid, wat AJAX staan, is Asynchronous JavaScript en XML. XML is 'n ander soort van opmaak taal, en jy kan soort van dink dit net soos HTML. Dit is nie heeltemal dieselfde ding, maar dit is basies net 'n opmaak taal. So dit is 'n asinchrone JavaScript en 'n opmaak taal. 

So om dit te gebruik AJAX technique-- AJAX is nie 'n aparte programmeertaal. Dis net soort van 'n stel techniques-- ons nodig om 'n spesiale te skep JavaScript voorwerp, wat is 'n XMLHttpRequest genoem. Nou, dit is baie maklik om dit te doen. Ons sê net var, ongeag Ons wil hierdie voorwerp noem, gelyk nuwe XMLHttpRequest. En nou het ons nou verkry 'n AJAX soort voorwerp, of 'n XMLHttpRequest voorwerp, wat sal toelaat dat ons asynchroon werk ons ​​bladsy. 

Nadat ons gekry het hierdie nuwe voorwerp, hierdie XMLHttpRequest, ons het om iets te doen om sy onreadystatechange gedrag. Onreadystatechange gedrag is regtig net wanneer jy 'n versoek om 'n web bladsy, die bladsy gaan deur 'n aantal stappe. Eerstens, het 'n versoek nie gestuur. Toe het die versoek was gestuur, maar nie daarop te reageer. Toe het die versoek gereageer. Dan is die versoek word terug gestuur na jou. 

Dan, die versoek in jou bladsy ten volle gelaai. Dit is die verskillende state. En so moet ons ons stel nuwe XMLHttpRequest voorwerp wanneer die gereed staat veranderinge te verander. En tipies, ons doen dit deur definieer 'n anonieme funksie, wat ons is vertroud met van JavaScript nou, wat genoem wanneer die gereed staat verander. Dit is regtig nie veel meer as dit. Ons is net gaan om te definieer 'n anonieme funksie, soort van soos wat ons besig was om in JavaScript, waar ons sou het 'n anonieme funksie reageer op 'n on kliek, of wanneer ons 'n kaart van doen die verskillende voorwerpe in 'n verskeidenheid. 

Iets het gebeur toe iets gekliek. In hierdie geval, is dit net iets is gebeur wanneer die toestand van ons bladsy veranderinge. Daar is twee ander eiendomme dat die soort of-- hulle is nie die enigste eienskappe wat inherent aan XMLHttpRequest, maar hulle is redelik belangrike mense. Daar is iets genoem readyState, wat as jy waarskynlik kan raai, is verwant aan onreadystatechange. Dit vertel jy eintlik wat die readyState is. 0, 1, 2, 3, en 4 die moontlikhede is daar, en hulle soort van rofweg ooreenstem met wat Ek was net te praat oor 'n tweede gelede. 

En dan status, wat hopelik as alles OK, is 200, wat is kort vir, natuurlik, OK, wat ons vertroud is met van http. So ons hoop dat ons gereed staat vier, en ons status is 200. En as ons gereed staat vier, en die reaksie is gereed om op die plaas te wees bladsy, en die status is 200, ons in staat was om te doen alles suksesvol, Nou kan ons asynchroon werk ons ​​bladsy sonder om te herlaai die hele inhoud daarvan. 

Na ons gedefinieer wat gebeur die onreadystatechange gedrag, en ons het bewys dat readyState 4 en status is 200, dan sal al wat ons nodig het om te doen is oop 'n asinchrone versoek, wat net maak 'n HTTP GET algemeen versoek. Net om dit te doen programmaties, in plaas van deur ons webblaaier. En dan stuur ons dat versoek. So wat beteken dit dalk lyk soos in konteks? So hier is 'n funksie wat handel oor AJAX versoeke. OK? En ek het gesê arbitrêr dit 'n argument aanvaar. En dit 'n soort van 'n algemene geraamte hier. Aan die begin, kry ons onsself 'n nuwe XMLHttpRequest voorwerp. Dan moet ek die stel onreadystatechange gedrag. En so ek gaan om te sê toe die readyState veranderinge, Ek wil hê jy moet hierdie funksie noem. 

Wat gaan die vra vraag, as die readyState 4, indien die readyState verander te wees 4, en die status was 200, so ons het 'n suksesvolle versoek ek wil iets om die bladsy te doen. En ons sal 'n blik na 'n voorbeeld van wat dat iets kan wees in 'n tweede. So dan, ek het gedefinieer my anonieme funksie, my reaksie funksie wanneer die readyState veranderinge. 

So dan het ek net nodig om oop te maak 'n versoek, met behulp van die Open metode. En dan is Ek wat versoek te stuur. En laat ons 'n blik op 'n meer konkrete voorbeeld van wat AJAX kan doen op ons webblaaie. So ek het hier 'n baie eenvoudige bladsy genoem home.html. En ek het 'n inligting gaan hier en 'n soort van drop-down menu. 

En ons sal dit weer in 'n sekonde. Maar ek dink ons ​​moet nou neem 'n kyk na die werklike bron-kode. En so, ek gaan om oop te maak home.html. En ons sal sien wat aangaan. So by hier die heel boonste, ek het sommige JavaScript dinge wat aangaan. 

En hier, ek het blykbaar 'n div wie ID is infodiv, en 'n paar inligting gaan om daar te gaan. En dan het ek hierdie vorm. En binnekant van hierdie vorm, ek het iets bekend as 'n Select, wat is net 'n drop-down menu met 'n klomp van die verskillende opsies. En blykbaar toe dat veranderinge, wanneer die opsie wat gekies is het verander, ek gaan om te bel 'n funksie cs50Info, en dan gaan ek slaag in this.value, waar dit verwys na watter opsie gekies is, en waarde is een van hierdie hier, opsie waarde = gelyk leeg, "Blumberg," "Bowden", "Chan," en "Malan." 

So, wat kan eintlik hier gebeur wanneer ek dit doen? Wel, laat ons neem 'n kyk na blumberg.html. Lyk soos dit is net 'n uittreksel van 'n HTML. En in die feit, wat ek hoop gaan hier gebeur is ek in staat sal wees om aan te sluit hierdie Html direk in my webblad sonder om te herlaai die bladsy, soos dat wanneer Ek kies Hannah van die drop-down menu, inligting oor Hannah, in die besonder, hierdie inligting hier in blumberg.html, is wat dui op die bladsy. En ek hoef nie te verfris. En as ek gekies iemand anders, hulle inligting sal wys. Hoe kan ek dit doen? Weereens, dit vereis ons om 'n paar AJAX gebruik. En so sal ons oop ajax.js. En hier is die funksie, cs50Info. As naam is niks nie, ek terugkom. Ek is nie van plan om iets te doen as die leë opsie gekies is. Anders, ek gaan skep 'n nuwe XMLHttpRequest. En dan gaan ek om te sê, toe die readyState veranderinge, noem hierdie funksie. 

En as die readyState is 4 en die status is 200, hier is 'n bietjie van jQuery op die lyn 13. Maar al wat ek doen, is gesê, die inhoud van infodiv verander te wees wat ek het terug as 'n reaksie van my HttpRequest. 

Wat is my HttpRequest? Wel, dit is reg hier op die lyn 18 en 19. Line 18, ek basies voorbereiding 'n get versoek om die naam + Html. En weer, noem hier is die argument dat was geslaag in as 'n parameter te cs50Info. 

So basies, ek verby in iemand se noem, wat daardie stel opsies was wat ons gesien het in die drop-down menu in die vorm. Ek kry die naam. En ek sê: Ek wil hê jy moet asseblief 'vir my dat file.html, en dan stuur die versoek. 

En sodat onreadystatechange gaan te wees luister en wag en wag en wag totdat die readyState is 4, en die status is 200. So dit is gereed om te bedien, en die versoek was suksesvol. En dan is dit, dit gaan om die inhoud van infodiv verander om die reaksie teks wat ek terug wees. 

So laat ons sien hoe dit kan eintlik werk. So ons sal kop bo aan my browser venster, en ons sal kyk hier. So laat ons neem 'n blik op wat gaan aan hier in AJAX. So sal ons iemand kies uit die drop-down menu. So in hierdie geval, laat ons net kies Hannah. En kennis dat Hannah se inligting verander het, maar ek het nie any-- het my bladsy nie heeltemal op te laai. Die dinge gebly. Die meeste van die dinge wat gebly. AJAX toets het nie verander nie. Die knoppie self, dit drop-down menu het nie verander nie. Maar inligting het daar verandering. En afhangende van hoe vinnig my rekenaar beweeg, jy kan eintlik sien dat die inhoud verdwyn en dan weer verskyn regtig vinnig. Dit is die inhoud om verwyder uit infodiv, en dan vervang met 'n nuwe asynchrone versoek. 

So as ek skakel dit om te sê, Rob-- en weer, 'n blik, en miskien sal ons dit eintlik sien verdwyn en vinnig weer verskyn. Jy sien dat? Hoe is dit net inloer weg, en dan is dit hervul? Dit is die AJAX versoek soort plaasvind. En so afhangende van die persoon wat ek kies, ek is maak 'n ander asynchrone versoek om 'n ander lêer dat ek op my bediener. En die inhoud van my infodiv opdatering, gebaseer op wat van hierdie ek het gekies. So dit is regtig al wat daar is om AJAX. Dit stel ons in staat om hierdie asynchrone maak versoeke, updates na 'n bladsy. Sonder om verfris die hele bladsy, ons gaan kry nuwe inhoud daarvan deur 'n nuwe vars versoek aan die bediener. En so, ons bladsye kan raak nogal 'n bietjie meer dinamiese. 

En as ons meer en meer gevorderde, jy kan dinge soos te kry sê, jou e-pos inboks, waar jy nie hoef te doen nie. Jy hoef nie na 'n klik drop-down menu of kliek enigiets, en al van 'n skielike, jou nuutste e-pos toon tot by die top. Dit is ook net 'n Ajax versoek. Ajax versoek jou bediener, die e-pos bediener, stuur oor al die inligting oor jou jongste e-pos, en verander wat jy sien op die skerm om jou nuutste stel e-pos wees. En as jy 'n nuwe een in daar is, dan die inhoud van daardie div sal verander om te besin die opgedateer inhoud. Ek is Doug Lloyd. Dit is CS50.