[Musik spiller] DOUG LLOYD: Så en mere slags forestilling om, at slags falder ind under paraplyen af JavaScript er noget, der hedder AJAX. Indtil dette punkt, vores interaktion med JavaScript har været begrænset til at skubbe en knap og der sker noget. Og specifikt noget, der sker er vores websites udseende og ændringer. Højre? Ligesom navnlig i dokument objekt model video, Jeg har ændret baggrundsfarven. Men da jeg gjorde det, havde jeg ikke til at gøre eventuelle særlige ekstra anmodninger. Jeg behøvede ikke at anmode om, at serveren sende mig en ny side. Jeg har lige skiftet det, jeg allerede havde. Jeg behøvede ikke at genindlæse min side, og tingene afgjort ændret sig, så det er fantastisk. Men der er helt sikkert nogle manuel brugerinteraktion involveret. AJAX er en cool teknik, der giver os til at opdatere en sides indhold, og ikke kun udseendet og føler, uden at genindlæse. 

Og ved specifikt, da jeg sige opdatere en sides indhold, Jeg siger ikke, at vi omskrive siden ved hjælp af JavaScript. Jeg siger vi faktisk anmode mere information fra serveren uden vores side skulle genindlæse. 

Nu slags lidt af en mere avanceret teknik at vi kommer til at tale om i denne video. Vi kommer til at have en vis interaktion. Men når vi gør, jeg har tænkt mig at være gør anmodninger til webserveren. I dette tilfælde, bare hvad der er kører min Apache webserver. Jeg har tænkt mig at gøre yderligere anmodninger mens jeg besøger en webside, men min side vil ikke opdatere. 

Det er bare at gå til asynkront opdatere min side. Og det er i virkeligheden, som AJAX står for, er Asynchronous JavaScript og XML. XML er en anden form for opmærkning sprog, og du kan sortere på tænke på det ligesom HTML. Det er ikke helt det samme, men det er dybest set bare et kodesprog. Så det er en asynkron JavaScript og et kodesprog. 

Så for at bruge denne AJAX technique-- AJAX er ikke en separat programmeringssprog. Det er bare en slags sæt af techniques-- vi nødt til at oprette en særlig JavaScript objekt, som kaldes en XMLHttpRequest. Nu er det meget nemt at gøre dette. Vi bare sige var, uanset vi ønsker at kalde dette objekt, lig ny XMLHttpRequest. Og nu har vi nu fået en AJAX slags objekt, eller en XMLHttpRequest formål, som vil give os til asynkront opdatere vores side. 

Efter at vi har fået denne nye objekt, denne XMLHttpRequest, vi er nødt til at gøre noget til sin onreadystatechange adfærd. Onreadystatechange adfærd er virkelig bare når du laver en anmodning til en webside, siden går gennem en række trin. For det første har en anmodning ikke er blevet sendt. Da har anmodningen været sendt, men ikke reageret på. Så anmodningen er blevet imødekommet. Så anmodningen er at blive sendt tilbage til dig. 

Derefter anmodningen er fuldt lastet i din side. De er forskellige tilstande. Og så er vi nødt til at sætte vores nye XMLHttpRequest objekt at ændre sig, når de færdige tilstandsændringer. Og typisk, vi gør dette ved definerer en anonym funktion, som Vi er bekendt med fra JavaScript nu, at kaldes, når tilstanden Klar ændringer. Det er virkelig ikke meget mere end det. Vi er lige kommer til at definere en anonym funktion, lidt ligesom hvad vi lavede i JavaScript, hvor vi ville har en anonym funktion reagere på en on klik, eller når vi gjorde et kort over de forskellige objekter i et array. 

Noget skete, da noget blev klikket. I dette tilfælde, det er bare noget er sker, når tilstanden af ​​vores side ændringer. Der er to andre egenskaber der er sortere of-- de ikke er de eneste egenskaber, som er uløseligt forbundet med XMLHttpRequest, men de er temmelig vigtige. Der er noget, der hedder readyState, der som du nok kan gætte, er relateret til onreadystatechange. Det faktisk fortæller dig hvad readyState er. 0, 1, 2, 3 og 4 er mulighederne der, og de slags ca. svarer til det Jeg var bare tale om et sekund siden. 

Og så status, hvilket forhåbentlig, hvis alt gik OK, er 200, hvilket er en forkortelse for naturligvis OK, som vi er bekendt med fra http. Så vi håber, at vores klar tilstand er fire, og vores status er 200. Og hvis vores klar tilstand er fire, og svaret er klar til at blive sat på side, og status er 200, vi var i stand til at gøre alt held, Nu kan vi asynkront opdatere vores side uden at skulle genindlæse hele indholdet af det. 

Efter at vi har defineret, hvad der sker til onreadystatechange adfærd, og vi har kontrolleret, at readyState er 4, og status er 200, så alt vi skal gøre, er åbne en asynkron anmodning, der er bare at gøre en HTTP generelt GET-anmodning. Bare gør det programmeringsmæssigt, i stedet for gennem vores web browser. Og så sender vi denne anmodning. Så hvad betyder det måske se ud i sammenhæng? Så her er en funktion, omhandler AJAX anmodninger. OK? Og jeg har vilkårligt sagt det accepterer et argument. Og dette en slags generelt skelet her. I begyndelsen, får vi selv en ny XMLHttpRequest objekt. Så jeg har brug for at indstille onreadystatechange adfærd. Og så jeg har tænkt mig at sige når readyState ændringer, Jeg vil have dig til at kalde denne funktion. 

Som vil spørge spørgsmål, hvis readyState er 4, hvis readyState har ændret at være 4, og status var 200, så vi havde en vellykket anmodning, jeg ønsker at gøre noget til siden. Og vi vil tage et kig på et eksempel på, hvad at noget kan være i en anden. Så, nu har jeg defineret min anonyme funktion, min responsfunktion når de readyState ændringer. 

Så så jeg bare nødt til at åbne op for en anmode, ved hjælp af den åbne metode. Og så, jeg sender denne anmodning. Og lad os tage et kig på en mere konkret eksempel af, hvad AJAX kan gøre på vores websider. Så jeg har her en meget enkel side kaldet home.html. Og jeg har fået en information går her og en slags drop-down menuen. 

Og vi vil revidere dette i et sekund. Men jeg synes, vi skal nu tage en se på de faktiske kildekode. Og så, jeg har tænkt mig at åbne op home.html. Og vi vil se, hvad der foregår. Så op på toppen her, jeg har nogle JavaScript ting, der foregår. 

Og her, jeg har tilsyneladende en div, hvis id er infodiv, og nogle oplysninger kommer til at gå der. Og så har jeg denne formular. Og inde i denne formular, jeg har noget kaldes en Select, som er blot en rullemenu med en masse forskellige muligheder. Og tilsyneladende når det ændrer sig, når den indstilling, der er blevet valgt har ændret sig, jeg vil kalde en funktion cs50Info, og så vil jeg passere i this.value, hvor det drejer sig om hvilken løsning blev valgt, og værdi er en af ​​disse her, mulighed værdi = lig tom, "Blumberg," "bowden", "chan" og "Malan." 

Så hvad kan faktisk ske her, når jeg gør det? Nå, lad os tage et se på blumberg.html. Ligner det er bare en uddrag af nogle HTML. Og i virkeligheden, hvad jeg håber kommer til at ske her er jeg har tænkt mig at være i stand til at tilslutte Denne HTML direkte ind i min hjemmeside uden at skulle genindlæse siden, således at når Jeg vælger Hannah fra drop-down menuen, information om Hannah, især denne information her i blumberg.html, er det dukker op på siden. Og jeg behøver ikke at opdatere. Og hvis jeg valgte en anden, deres oplysninger ville dukke op. Hvordan gør jeg det? Igen, dette kræver os at bruge nogle AJAX. Og så vil vi åbne op ajax.js. Og her er, at funktion, cs50Info. Hvis navnet ikke er noget, returnere jeg. Jeg har ikke tænkt mig at gøre noget, hvis den tomme indstilling er valgt. Ellers vil jeg oprette en ny XMLHttpRequest. Og så vil jeg sige, når readyState ændringer, kalder denne funktion. 

Og hvis readyState er 4 og status er 200, her er en lille smule af jQuery på linje 13. Men alt jeg gør er at sige, ændre indholdet af infodiv at være, hvad jeg kom tilbage som en respons fra min HttpRequest. 

Hvad er min HttpRequest? Tja, det er rigtigt her på linje 18 og 19. Linje 18, jeg dybest set at forberede en GET anmodning om navn + .html. Og igen, navn her er argumentet om, at var bestået i som en parameter til cs50Info. 

Så dybest set, jeg passerer i nogens navn, som var det sæt af muligheder at vi så i drop-down menuen i form. Jeg får det navn. Og jeg siger, jeg vil gerne have dig til bedes du skaffe mig, at file.html, og derefter sende denne anmodning. 

Og så onreadystatechange går at være lytte og venter og venter og venter, indtil readyState er 4, og status er 200. Så det er klar til at blive serveret, og anmodningen var vellykket. Og derefter, hvis det er, det kommer til at ændre indholdet af infodiv at være svaret tekst, jeg fik tilbage. 

Så lad os se, hvordan dette kan faktisk fungere. Så vi vil hovedet over til min browser vindue, og vi vil se her. Så lad os tage et kig på hvad der foregår her i AJAX. Så vi vil vælge nogen fra drop-down menuen. Så i dette tilfælde, lad os bare vælge Hannah. Og bemærk, at Hannahs har ændret sig, men jeg havde ikke any-- min side ikke helt genindlæse. De ting opholdt sig. De fleste af de ting opholdt sig. AJAX Test ændrede sig ikke. Selve knappen, dette drop-down menuen ikke ændre. Men information der gjorde forandring. Og afhængigt af hvor hurtigt min computer bevæger sig, du faktisk kan se, at indholdet forsvinder, og derefter dukker op igen virkelig hurtigt. Det er det indhold, der slettet fra infodiv, og derefter erstattet med en nye asynkron anmodning. 

Så hvis jeg skifter det at være sige, Rob-- og igen, tage et kig, og måske vil vi se det faktisk forsvinde og dukke op igen hurtigt. Du ser det? Hvordan det blot dukkede væk, og så er det genopfyldes? Det er anmodningen AJAX slags finder sted. Og så afhængig af person, jeg vælger, jeg er gør en anden asynkron anmodning til en anden fil at jeg har på min server. Og indholdet af min infodiv opdaterer, baseret på hvilke af disse jeg har valgt. Så det er virkelig alt der er til AJAX. Det giver os mulighed for at gøre disse asynkron anmodninger, opdateringer til en side. Uden at skulle opdatere hele siden, vi kommer til at få nye indhold fra det ved at gøre en ny, frisk anmodning til serveren. Og så kan vores sider blive ganske lidt mere dynamisk. 

Og som vi får mere og mere avancerede, du måske få ting som siger, din indbakke, hvor du ikke behøver at gøre noget. Du behøver ikke at klikke på en drop-down menuen eller klik på noget, og lige pludselig, din nyeste e dukker op på toppen. Det er også bare en anmodning Ajax. Ajax anmoder din server, e-mail-server, at sende over alle de oplysninger om dine seneste e-mails, og ændre, hvad du ser på skærmen for at være din nyeste sæt af e-mails. Og hvis du har en ny i der, så indholdet af denne div skifte for at afspejle det opdaterede indhold. Jeg er Doug Lloyd. Det er CS50.