[MUSIC SPILLE] DOUG LLOYD: Så man mer slags forestilling om at liksom faller under paraplyen Javascript er noe som kalles AJAX. Frem til dette punktet, vår interaksjon med Javascript har vært begrenset til en presse knappen og noe skjer. Og spesifikt, noe som skjer er våre nettsteder ser og føles endringer. Høyre? Som særlig i Document Object Model video, Jeg endret bakgrunnsfargen. Men da jeg gjorde det, hadde jeg ikke å gjøre noen spesielle ekstra forespørsler. Jeg trengte ikke å be om at serveren sende meg en ny side. Jeg endret nettopp det jeg allerede hadde. Jeg trengte ikke å laste siden min, og ting definitivt endret, så det er flott. Men det er definitivt noen manual brukermedvirkning involvert. AJAX er en kul teknikk som gjør at oss å oppdatere innholdet på en side, og ikke bare utseendet og føler, uten omlasting. 

Og spesielt når jeg si oppdatere innholdet på en side, Jeg sier ikke at vi omskrive siden ved hjelp av Javascript. Jeg sier vi faktisk be mer informasjon fra serveren uten vår side å måtte lesse. 

Nå som liksom litt av en mer avansert teknikk at vi kommer til å snakke om i denne videoen. Vi kommer til å ha noen interaksjon. Men når vi gjør det, kommer jeg til å være gjøre forespørsler til webserveren. I dette tilfellet, akkurat hva som er kjører min Apache webserver. Jeg kommer til å være å gjøre ytterligere forespørsler mens jeg besøker en nettside, men siden min vil ikke oppdatere. 

Det er bare kommer til asynkront oppdatere siden min. Og det er, faktisk, som AJAX står for, er Asynkron Javascript og XML. XML er en annen form for markering språk, og du kan sortere på tenke på det akkurat som HTML. Det er ikke helt det samme, men det er i utgangspunktet bare et kodespråk. Så det er en asynkron Javascript og et kodespråk. 

Så for å kunne bruke dette AJAX technique-- AJAX er ikke et eget programmeringsspråk. Det er bare en slags sett techniques-- vi trenger for å lage en spesiell Javascript objekt, som kalles en XMLHttpRequest. Nå er det veldig enkelt å gjøre dette. Vi bare si var, uansett vi ønsker å kalle dette objektet, tilsvarer nye XMLHttpRequest. Og nå har vi nå fått en AJAX slags objekt, eller en XMLHttpRequest objekt, som vil tillate oss til asynkront oppdatere vår side. 

Etter at vi har fått denne nye objekt, dette XMLHttpRequest, vi må gjøre noe til sin onreadystatechange oppførsel. Onreadystatechange atferd er egentlig bare Når du gjør en forespørsel til en nettside, siden går gjennom et antall trinn. For det første har en anmodning ikke er sendt. Da har anmodning vært sendt, men ikke handlet på. Da forespørselen har blitt handlet på. Deretter forespørselen er blir sendt tilbake til deg. 

Deretter er en forespørsel fullastet på siden din. De er forskjellige stater. Og så vi må sette vår nye XMLHttpRequest objektet å endre seg når de er klare tilstandsendringer. Og typisk, vi gjør dette ved å å definere en anonym funksjon, hvilken vi er kjent med fra Javascript nå, at kalles Når klar tilstandsendringer. Det er egentlig ikke så mye mer enn det. Vi kommer bare til å bli å definere en anonym funksjon, liksom liker det vi gjorde i Javascript, der vi ville har en anonym funksjon svare på en på klikk, eller når vi gjorde et kart over de ulike objektene i en matrise. 

Noe skjedde da noe ble klikket. I dette tilfellet er det bare noe er skjer når staten vår side Endringer. Det er to andre eiendommer som er slags of-- de er ikke de eneste egenskapene som er iboende til XMLHttpRequest, men de er ganske viktige. Det er noe som heter readyState, som som du kan sikkert gjette, er relatert til onreadystatechange. Det faktisk forteller deg hva readyState er. 0, 1, 2, 3, og 4 er muligheter der, og de slags lag tilsvare hva Jeg var bare snakk om en andre siden. 

Og da status som forhåpentligvis hvis alt gikk OK, er 200, som er en forkortelse for, selvfølgelig, OK, som vi er kjent med fra Http. Så vi håper at vår klar tilstand er fire, og vår status er 200. Og hvis vår klar tilstand er fire, og responsen er klar til å bli satt på side, og statusen er 200, vi var i stand til å gjøre alt hell, Nå kan vi asynkront oppdatere vår side uten å måtte laste hele innholdet i den. 

Etter at vi har definert hva som skjer til onreadystatechange atferd, og vi har sjekket at readyState er fire og status er 200, så alt vi trenger å gjøre er å åpne opp en asynkron forespørsel, som er bare å gjøre En HTTP generelt GET forespørsel. Bare gjør det programmatisk, i stedet for gjennom vår nettleser. Og så sender vi at forespørselen. Så hva betyr dette kanskje se ut i sammenheng? Så her er en funksjon som avtaler med AJAX forespørsler. OK? Og jeg har vilkårlig sa Det aksepterer et argument. Og dette er en slags Generelt skjelett her. Helt i begynnelsen, får vi oss selv en ny XMLHttpRequest objektet. Så, jeg trenger å sette onreadystatechange oppførsel. Og så kommer jeg til å si når readyState endringer, Jeg vil at du skal kalle denne funksjonen. 

Som kommer til å be Spørsmålet om den readyState er 4, hvis readyState er endret å være 4, og status var 200, så vi hadde en vellykket forespørsel, jeg ønsker å gjøre noe til siden. Og vi vil ta en titt ved et eksempel på hva at noe kan være i et sekund. Så da, nå har jeg definert min anonym funksjon, mitt svar funksjon når de readyState endringer. 

Så da trenger jeg bare å åpne opp en be, hjelp av Open-metoden. Og så, jeg sender denne forespørselen. Og la oss ta en titt på et mer konkret eksempel av hva AJAX kan gjøre på våre nettsider. Så jeg har her en veldig enkel side som heter home.html. Og jeg har fått en informasjons går her og en slags rullegardinmenyen. 

Og vi vil se dette i ett sekund. Men jeg tror vi skal nå ta en se på selve kildekoden. Og så, jeg kommer til å åpne opp home.html. Og vi får se hva som skjer. Så opp på toppen her, har jeg noen Script ting som skjer. 

Og her, jeg tilsynelatende har en div hvis ID er infodiv, og litt informasjon kommer til å gå dit. Og så har jeg dette skjemaet. Og inne i denne form, har jeg noe kalles en Select, som er bare en rullegardinmeny med en haug med forskjellige alternativer. Og tilsynelatende når som endres når det alternativet som er valgt har endret seg, kommer jeg til å ringe noen funksjon cs50Info, og så kommer jeg til å passere i this.value, hvor dette refererer til som alternativet ble valgt, og verdien er en av disse her, alternativ value = lik tom, "Blumberg," "Bowden," "chan" og "Malan." 

Så hva kan faktisk skje her når jeg gjør dette? Vel, la oss ta en se på blumberg.html. Ser ut som det er bare en snippet av noen HTML. Og faktisk, det jeg håpet kommer til å skje her er jeg kommer til å være i stand til å koble dette Html direkte inn i min nettside uten å måtte laste siden, slik at når Jeg velger Hannah fra rullegardin menyen, informasjon om Hannah, særlig denne informasjonen her i blumberg.html, er hva som dukker opp på siden. Og jeg trenger ikke å oppdatere. Og hvis jeg valgte en annen, deres informasjon vil dukke opp. Hvordan gjør jeg dette? Igjen, dette krever oss å bruke noen AJAX. Og så vil vi åpne opp ajax.js. Og her er den funksjonen, cs50Info. Hvis navn er ingenting, jeg kommer tilbake. Jeg har ikke tenkt å gjøre noe hvis den tomme alternativet er valgt. Ellers kommer jeg til å opprette et nytt XMLHttpRequest. Og så kommer jeg til å si, når readyState endringer, kaller denne funksjonen. 

Og hvis readyState er 4 og statusen er 200, her er en liten bit av jQuery på linje 13. Men alt jeg gjør er å si, endre innholdet i infodiv å være hva jeg kom tilbake som en respons fra min HttpRequest. 

Hva er min HttpRequest? Vel, det er rett her på linje 18 og 19. Linje 18, jeg er i utgangspunktet forbereder en GET forespørsel om navn + .html. Og igjen, her er navn argumentet som var gått inn som en parameter til cs50Info. 

Så i utgangspunktet er jeg passerer i noens navn, som var det sett av alternativer som vi så i rullegardinmenyen i form. Jeg får det navnet. Og jeg sier jeg vil gjerne at du kan få for meg at file.html, og deretter sende forespørsel. 

Og slik at onreadystatechange kommer å være lytter og venter og venter og å vente inntil readyState er fire, og statusen er 200. Så det er klar til å bli servert, , og forespørselen var vellykket. Og så hvis det er, det kommer til å endre innholdet i infodiv å være svaret teksten at jeg kom tilbake. 

Så la oss se hvordan dette faktisk kan fungere. Så vi vil gå over til nettleseren min vindu, og vi vil se her. Så la oss ta en titt på hva som skjer her i AJAX. Så vi vil velge noen fra rullegardinmenyen. Slik at i dette tilfellet, la oss bare velge Hannah. Og legg merke til at Hannahs informasjon har endret seg, men jeg hadde ikke any-- min side ikke helt på nytt. Den ting bodde. Det meste av ting bodde. AJAX Test ble ikke endret. Selve knappen, dette drop-down menyen ble ikke endret. Men informasjon der gjorde endringen. Og avhengig av hvordan raskt min datamaskin trekk, du kan faktisk se at innholdet forsvinner og deretter dukker opp igjen virkelig raskt. Det er innholdet som slettet fra infodiv, og deretter erstattet med en ny asynkron forespørsel. 

Så hvis jeg bytter det skal si, Rob-- og igjen, ta en titt, og kanskje vi får se det faktisk forsvinne og dukke opp igjen raskt. Du ser det? Hvordan det bare dukket unna, og da er det etterfylt? Det er AJAX forespørsel slags finner sted. Og så avhengig person jeg velger, jeg er å lage en annen asynkron forespørsel til en annen fil som jeg har på min server. Og innholdet av mitt infodiv oppdaterer, basert på hvilken av disse jeg har valgt. Så det er egentlig alt som skal til AJAX. Det tillater oss å gjøre disse asynkron forespørsler, oppdateringer til en side. Uten å måtte oppdatere hele siden, vi kommer til å få ny Innholdet fra den ved å gjøre en ny frisk forespørsel til serveren. Og så kan våre sider blir ganske mye mer dynamisk. 

Og som vi får mer og mer avansert, du kan få ting som si, e-postinnboksen, der du ikke trenger å gjøre noe. Du trenger ikke å klikke en rullegardinmenyen, eller klikk på noe, og plutselig, din nyeste e-post dukker opp på toppen. Det er også bare en Ajax forespørsel. Ajax ber om din server, e-postserveren, å sende over all informasjon om dine siste e-post, og endre det du ser på skjermen for å være din nyeste sett med e-poster. Og hvis du har en ny en i der, da innholdet av at div vil endres til å reflektere det oppdaterte innholdet. Jeg er Doug Lloyd. Dette er CS50.