[Musiikkia] DOUG Lloyd: Niin yksi eräänlainen ajatus, että tavallaan kuuluu alaisuudessa JavaScript on jotain kutsutaan AJAX. Tähän saakka, meidän vuorovaikutus JavaScript on rajoitettu työntää -painiketta ja jotain tapahtuu. Ja erityisesti, tapahdu on meidän sivustot näyttävät ja tuntuvat muutokset. Oikea? Kuten erityisesti Document Object Model video, Vaihdoin taustan väri. Mutta kun tein, että minulla ei ollut tehdä mitään erityisiä ylimääräisiä pyyntöjä. En tarvitse pyytää palvelin lähettää minulle uusi sivu. Muutin juuri mitä olen jo ollut. En tarvitse ladata sivuni ja asiat varmasti muuttuneet, niin se on hienoa. Mutta on varmasti joitakin manuaali käyttäjän toimia mukana. AJAX on viileä tekniikka, jonka avulla meitä päivittää sivun sisältöä, eikä vain katsoa ja tuntuu, ilman lastin purkua. 

Ja erityisesti, kun sanoa päivittää sivun sisältöä, En sano me kirjoittaa sivun JavaScriptin avulla. Sanon me itse pyytää Lisätietoja palvelimelta ilman meidän sivu tarvitse ladata. 

Nyt tällaista vähän kehittyneempi tekniikka että me aiomme puhua Tietoja tämän videon. Aiomme olla vuorovaikutusta. Mutta kun teemme, aion olla jolloin pyyntöjä web-palvelimelle. Tässä tapauksessa, mitä on käynnissä minun Apache www-palvelin. Aion tekevän lisää pyynnöt kun olen vierailulla Web-sivun, mutta sivuni eivät päivity. 

Se on vain menossa asynkronisesti päivitän sivu. Ja se on, itse asiassa, joka AJAX on lyhenne sanoista, on Asynchronous JavaScript ja XML. XML on toisenlainen markup kieli, ja voit lajitella ja ajatella sitä aivan kuin HTML. Se ei ole aivan sama asia, mutta se on pohjimmiltaan vain markup language. Joten se asynkronista JavaScript ja markup language. 

Joten jotta käyttää tätä AJAX technique-- AJAX ei ole erillinen ohjelmointikieli. Se on vain eräänlainen joukko techniques-- me täytyy luoda erityinen JavaScript esine, joka kutsutaan XMLHttpRequest. Nyt, se on erittäin helppo tehdä tämän. Me vain sanoa var riippumatta haluamme kutsua tätä objektia, vastaa uusi XMLHttpRequest. Ja nyt olemme nyt saatu AJAX eräänlainen esine, tai XMLHttpRequest objekti, jonka avulla meitä asynkronisesti päivittää sivu. 

Kun olemme saaneet tämän uuden esine, tämä XMLHttpRequest, meidän on tehtävä jotain sen onreadystatechange käyttäytymistä. Onreadystatechange käytös on oikeastaan ​​vain kun teet pyyntö Web-sivulle, sivu menee läpi useita vaiheita. Ensinnäkin, pyyntöä ei ole lähetetty. Sitten, pyyntö on lähetetty, mutta ei vastattu. Sitten pyyntö on vastattu. Sitten pyyntö on lähetetään takaisin sinulle. 

Sitten, pyyntö on täysin ladattu sivullesi. Ne ovat eri valtioissa. Ja niin meidän on asetettava meidän uusi XMLHttpRequest esine vaihtaa kun valmiustilaan muutoksia. Ja tyypillisesti, me tehdä tämän määritellään anonyymi toiminto, joka olemme tuttuja JavaScript nyt, että kutsutaan, kun valmis tilan muutoksia. Se todellakaan ole paljon enemmän. Olemme juuri menossa olla määriteltäessä anonyymi funktio, tavallaan kuin mitä olimme tekemässä JavaScript, missä olisimme on nimetön funktio vastata click, tai kun olimme tekemässä kartta erilaisia ​​esineitä array. 

Jotain tapahtui, kun jotain napsautetaan. Tässä tapauksessa se on vain jotain on tapahtuu kun tila meidän sivu muutoksia. On olemassa kaksi muuta kiinteistöä jotka tavallaan of-- ne eivät ole Vain ominaisuuksia, jotka ovat ominaista XMLHttpRequest, mutta ne ovat melko tärkeitä. Siinä on jotain kutsutaan readyState, joka kuten arvata saattaa, on liittyvät onreadystatechange. Se todella kertoo mitä readyState on. 0, 1, 2, 3, ja 4 ovat mahdollisuuksia on, ja he tavallaan karkeasti vastaa sitä, mitä Olin juuri puhu toinen sitten. 

Ja sitten asema, joka toivottavasti jos kaikki meni OK, on 200, joka on lyhyt varten, tietenkin, OK, joka olemme tuttuja Http. Joten me toivomme, että meidän valmiustilaan on neljä, ja asemamme on 200. Ja jos meidän valmiustilaan on neljä, ja vastaus on valmis laittaa sivu, ja tila on 200, pystyimme tekemään kaikki onnistui, Nyt voimme asynkronisesti päivittää sivu ilman ladata koko sisältö sitä. 

Kun olemme määritelty, mitä tapahtuu että onreadystatechange käyttäytymistä, ja olemme tarkistanut, että readyState on 4 ja tila on 200, niin kaikki meidän täytyy tehdä on avata asynkronisen pyyntö, joka on vain tehdä Http yleensä saada pyynnöstä. Vain tee sitä ohjelmallisesti, sijasta kautta web-selaimella. Ja sitten lähetämme että pyyntö. Mitä tämä ehkä näyttävät yhteydessä? Joten tässä on toiminto, joka käsitellään AJAX pyyntöjä. OK? Ja olen mielivaltaisesti sanonut se hyväksyy väitteen. Ja tämä eräänlainen yleinen luuranko täällä. Vuoden alusta, saamme itsellemme uusi XMLHttpRequest objekti. Sitten minun täytyy asettaa onreadystatechange käyttäytymistä. Ja niin aion sanoa kun readyState muutoksia, Haluan sinun soittaa tätä toimintoa. 

Joka aikoo pyytää kysymys, jos readyState on 4, jos readyState on muuttunut olla 4, ja tila oli 200, joten meillä oli onnistunut pyynnön, I haluavat tehdä jotain sivulle. Ja me katsomaan klo esimerkki siitä, mitä että jotain saattaa olla toinen. Niin, nyt olen määritellyt minun anonyymi toiminto, vastaukseni toiminto aina readyState muutokset. 

Joten sitten tarvitsee vain avata pyytää, käyttäen avointa. Ja sitten, minä lähetän tämän pyynnön. Ja lähdetään katsomaan konkreettisempaa esimerkki mitä AJAX voi tehdä www-sivuja. Joten minulla on täällä hyvin yksinkertainen sivun nimeltä home.html. Ja minulla tiedot menee täällä ja jonkinlainen pudotusvalikosta. 

Ja me palata tähän sekunnin. Mutta mielestäni meidän pitäisi nyt ottaa katsokaa todellinen lähdekoodia. Ja niin, aion avata home.html. Ja näemme, mitä tapahtuu. Joten ylös huipulla täällä, minulla on JavaScript-tavaraa, joka on meneillään. 

Ja täällä, ilmeisesti div jonka tunnus on infodiv, ja joitakin tietoja ei mene sinne. Ja sitten on tämä lomake. Ja sisäosat muodossa, minulla on jotain kutsutaan Valitse, joka on vain pudotusvalikosta kasan eri vaihtoehtoja. Ja ilmeisesti kun se muuttuu, kun vaihtoehto, joka on valittu on muuttunut, aion soittaa jonkin toiminnon cs50Info, ja sitten aion kulkea this.value, jos tämä viittaa mikä vaihtoehto valittiin, ja arvo on yksi näistä täällä, vaihtoehto arvo = vastaa tyhjä, "Blumberg," "Bowden," "chan," ja "Malan." 

Niin mitä voisi todella tapahdu täällä kun teen tämän? No, otetaan katsokaa blumberg.html. Näyttää se vain pätkä joidenkin HTML. Ja itse asiassa, mitä toivon tulee tapahtumaan täällä on Aion pystyä plug tämä Html suoraan minun verkkosivu ilman ladata sivu, siten, että kun Valitsen Hannah päässä avattavasta valikosta tietoa Hannah, erityisesti tämä tieto täällä blumberg.html, on mitä näkyy sivulla. Ja minulla ei tarvitse päivittää. Ja jos minä valitsin joku muu, niiden tiedot olisivat näy. Miten voin tehdä tämän? Tämäkin edellyttää voimme käyttää joitakin AJAX. Ja niin, me avata ajax.js. Ja tässä on juuri se, cs50Info. Jos nimi ei ole mitään, palaan. En aio tehdä mitään, jos tyhjä vaihtoehto on valittu. Muuten, aion Luo uusi XMLHttpRequest. Ja sitten aion sanoa, kun readyState muutoksia, kutsua tätä toimintoa. 

Ja jos readyState on 4 ja tila on 200, tässä on hieman jQuery verkossa 13. Mutta kaikki mulla sanoo, muuttaa sisältöä infodiv olla mitä sain takaisin vastaus minun HttpRequest. 

Mikä on minun HttpRequest? No, se on oikea täällä line 18 ja 19. Linja 18, olen periaatteessa valmistelee GET pyyntö nimi + .html. Ja vielä, nimi tässä väitettä, jonka mukaan oli hyväksyttiin parametrina cs50Info. 

Joten periaatteessa, olen ohimennen jonkun nimi, joka oli että joukko vaihtoehtoja että näimme avattavasta valikosta muodossa. Saan että nimi. Ja sanon minä haluaisin teidän hanki minulle että file.html, ja sitten lähettää tämän pyynnön. 

Ja jotta onreadystatechange on menossa kuuntelevan ja odottaa ja odottaa ja odottaa, kunnes readyState on 4, ja tila on 200. Joten se on valmis palveltavaksi, ja pyyntö oli onnistunut. Ja sitten jos se on, se tulee muuttaa sisältöä infodiv olla vastaus tekstiä että sain takaisin. 

Joten miten tämä saattaisi todella toimivat. Niin me pään yli selain ikkuna, ja tutustumme täällä. Joten katsomaan mitä tapahtuu täällä AJAX. Joten me valita joku alkaen pudotusvalikosta. Joten tässä tapauksessa, katsotaanpa vain valita Hannah. Ja huomaa, että Hannahin tiedot ovat muuttuneet, mutta minulla ei ollut any-- minun sivu ei ole täysin lataa. Tavaraa jäi. Useimmat tavaraa jäi. AJAX Testi ei muuttunut. Painike itse, tämä avattava valikko ei muuttunut. Mutta tiedot siellä teki muutoksen. Ja riippuen siitä, kuinka nopeasti minun tietokone liikkuu, voit itse voisi nähdä, että sisältö katoaa ja sitten ilmestyy todella nopeasti. Se sisältö on poistettu infodiv, ja sitten korvattu uusi asynkroninen pyynnöstä. 

Joten jos vaihdan sitä voidaan sanoa, Rob-- ja uudelleen, katsomaan, ja ehkä näemme se todellisuudessa katoaa ja tulee uudelleen nopeasti. Näetkö tuon? Miten se vain piipahti pois, ja sitten se täytetään? Se AJAX pyyntö sellainen tapahtuu. Ja niin riippuen henkilö päätän, olen tehden eri asynkroninen pyyntö eri tiedostoon että olen minun palvelimelle. Ja sisältö minun infodiv päivität, jonka perusteella nämä olen valinnut. Niin se on todella kaikki on AJAX. Sen avulla voimme tehdä nämä asynkroninen pyynnöt, päivitykset sivulle. Ilman päivitä koko sivun, aiomme saada uusia sisältöä siitä tekemällä uusi tuore pyynnön palvelimelle. Ja niin, meidän sivut voivat tulla hieman enemmän dynaaminen. 

Ja kun saamme lisää ja kehittyneempiä, voit saattaa saada asioita, kuten vaikkapa sähköpostiisi, jossa sinun ei tarvitse tehdä mitään. Sinun ei tarvitse napsauttaa -valikosta tai valitse jotain, ja yhtäkkiä, teidän uusin sähköposti näkyy yläreunassa. Se on myös vain Ajax pyynnöstä. Ajax pyytää teidän palvelin, sähköpostipalvelin, lähettää yli kaikki tiedot noin uusimmat sähköpostit, ja muuttuvat mitä näet näyttö on teidän uusin joukko sähköposteja. Ja jos sinulla on uusi yksi siellä, niin sisältö että div muuttuvat sen päivitetyn sisällön. Olen Doug Lloyd. Tämä on CS50.