[Muziek] DOUG LLOYD: Dus een meer soort idee dat soort valt onder de paraplu van JavaScript is iets genaamd AJAX. Tot op dit punt, onze interactie met JavaScript is beperkt tot duwen knop en er iets gebeurt. En in het bijzonder de iets dat gebeurt is onze websites kijken en voelen veranderingen. Rechts? Zoals met name in de document object model video, Ik veranderde de achtergrondkleur. Maar toen ik dat deed, heb ik niet aan speciale extra verzoeken te doen. Ik hoefde niet te vragen dat de server stuur mij een nieuwe pagina. Ik veranderde wat ik al had. Ik hoefde niet naar mijn pagina herladen, en dingen die zeker veranderd, dus dat is geweldig. Maar er is zeker enkele manuele interactie met de gebruiker betrokken. AJAX is een koele techniek die het mogelijk maakt ons om de inhoud van een pagina te werken, en niet alleen de look en voelen, zonder herladen. 

En door specifiek als ik zeggen bijwerken van de inhoud van een pagina, Ik zeg niet dat we herschrijven de pagina met behulp van JavaScript. Ik zeg dat we eigenlijk te vragen Meer informatie van de server zonder onze pagina te hoeven herladen. 

Nu dat soort een beetje een geavanceerde techniek dat we gaan praten over in deze video. We gaan een aantal interactie. Maar als we dat doen, ik ga worden het maken van verzoeken aan de webserver. In dit geval, wat het runnen van mijn Apache web server. Ik ga het maken van extra verzoeken terwijl ik een bezoek aan een webpagina, maar mijn pagina niet zal vernieuwen. 

Het gaat gewoon om asynchroon werken mijn pagina. Dat is, in feite, die AJAX staat voor, is Asynchronous JavaScript and XML. XML is een ander soort markup taal, en u kunt sorteren van denk aan het net als HTML. Het is niet helemaal hetzelfde, maar het is eigenlijk gewoon een opmaaktaal. Dus het is een asynchrone JavaScript en een opmaaktaal. 

Dus om deze te gebruiken AJAX technique-- AJAX is geen aparte programmeertaal. Het is gewoon een soort van set van techniques-- we moet een speciale creëren JavaScript-object, dat wordt een XMLHttpRequest genoemd. Nu, het is heel gemakkelijk om dit te doen. We zeggen gewoon var, ongeacht we willen dit object noemen, is gelijk aan nieuwe XMLHttpRequest. En nu hebben we nu verkregen een AJAX soort object, of een XMLHttpRequest object, waarmee ons asynchroon werken onze pagina. 

Nadat we hebben gekregen deze nieuwe object, deze XMLHttpRequest, We moeten iets doen om haar onreadystatechange gedrag. Onreadystatechange gedrag is eigenlijk gewoon wanneer u een verzoek naar een webpagina, de pagina doorloopt een aantal stappen. Ten eerste heeft een verzoek niet verzonden. Vervolgens heeft het verzoek geweest gezonden, maar niet gehandeld. Dan is het verzoek is gehonoreerd. Dan is het verzoek wordt teruggestuurd naar u. 

Vervolgens het verzoek in uw pagina volledig geladen. Dat zijn verschillende staten. En dus moeten we onze set nieuwe XMLHttpRequest object wanneer het klaar staat veranderingen te veranderen. En meestal doen we dit door definiëren van een anonieme functie die we kennen uit JavaScript nu, dat wordt aangeroepen wanneer het klaar staat verandert. Het is echt niet veel meer dan dat. We gaan gewoon te definiëren van een anonieme functie, soort graag wat We deden in JavaScript, waar we zouden hebben een anonieme functie reageren op een aan klik, of toen we een kaart van het doen de verschillende voorwerpen in een array. 

Iets gebeurde toen iets is geklikt. In dit geval, het is gewoon iets is gebeurt wanneer de toestand van onze pagina veranderingen. Er zijn twee andere eigenschappen dat soort van-- ze zijn niet de enige eigenschappen die inherent aan XMLHttpRequest, maar ze zijn erg belangrijke. Er is iets genaamd readyState, die zoals u waarschijnlijk kunt raden, is gerelateerd aan onreadystatechange. Het vertelt je eigenlijk wat de readyState is. 0, 1, 2, 3 en 4 zijn de mogelijkheden daar, en ze soort van ongeveer overeenkomen met wat Ik was gewoon te praten over een tweede geleden. 

Dan status, aan hopelijk als alles ging OK, 200, dat is kort voor natuurlijk, OK, die we kennen van http. Dus we hopen dat ons klaar staat is vier, en onze status is 200. En als onze kant staat vier, en de respons bereid op worden gelegd pagina en de status is 200, we waren in staat om te doen alles met succes, Nu kunnen we asynchroon werken onze pagina zonder te hoeven herladen de gehele inhoud van het. 

Nadat we hebben gedefinieerd wat er gebeurt de onreadystatechange gedrag en we hebben gecontroleerd dat readyState is 4 en status is 200, dan alles wat we moeten doen is openstellen van een asynchrone verzoek, dat alleen maakt een Http algemeen GET verzoek. Gewoon doen programmatisch, in plaats van door middel van onze webbrowser. En dan sturen we dat verzoek. Dus wat doet dit misschien eruit in context? Dus hier is een functie die deals met AJAX verzoeken. OK? En ik heb gezegd willekeurig Het argument accepteert. En dit een soort van een algemene skelet hier. Aan het begin, krijgen we onszelf een nieuw XMLHttpRequest object. Dan moet ik het stellen onreadystatechange gedrag. En dus ik ga zeggen wanneer de readyState verandert, Ik wil dat je deze functie aan te roepen. 

Die gaat naar de vragen vraag, indien de readyState 4 is, indien de readyState veranderd 4 zijn en de status was 200, dus we hadden een succesvolle aanvraag, I willen iets doen om de pagina te doen. En we zullen een kijkje nemen een voorbeeld van wat dat er iets zou kunnen zijn in een tweede. Zo dan, nu heb ik gedefinieerd mijn anonieme functie, mijn reactie functie wanneer de readyState verandert. 

Dus dan moet ik gewoon het openen van een vragen, met behulp van de Open-methode. En dan heb ik dat verzoek te verzenden. En laten we een kijkje nemen op een concreet voorbeeld wat AJAX kan doen op onze webpagina's. Dus ik heb hier een zeer eenvoudige pagina genaamd home.html. En ik heb een informatie gaat hier en een soort van drop-down menu. 

En we zullen deze opnieuw in één seconde. Maar ik denk dat we nu moeten nemen kijken naar de werkelijke broncode. En dus, ik ga openstellen home.html. En we zullen zien wat er gebeurt. Dus op naar hier de top, ik heb sommige JavaScript dingen die er gaande is. 

En hier, ik heb blijkbaar een div wiens ID is infodiv, en wat informatie gaat er naartoe te gaan. En dan heb ik dit formulier. En de binnenkant van deze vorm, ik heb iets riep een Select, die is gewoon een drop-down menu met een bos van verschillende opties. En blijkbaar als dat verandert wanneer de optie die is geselecteerd heeft veranderd, ik ga om te bellen een functie cs50Info, en dan ga ik passeren this.value, wanneer dit verwijst naar welke optie is geselecteerd, en de waarde is een van deze hier, optie value = gelijk leeg, "Blumberg," "bowden" "Chan," en "Malan." 

Dus wat zou eigenlijk gebeuren hier toen ik dit doen? Nou, laten we eens een kijk naar blumberg.html. Lijkt alsof het is gewoon een fragment van enkele HTML. En in feite, wat ik hoop er gaat gebeuren hier is dat ik ga in staat zijn om aan te sluiten Deze HTML direct in mijn webpagina zonder te hoeven herladen de pagina, zodanig dat wanneer Kies ik Hannah uit het drop-down menu, informatie over Hannah, Met name deze informatie hier in blumberg.html, wat verschijnt op de pagina. En ik heb niet te vernieuwen. En als ik koos voor iemand anders, hun informatie zou opdagen. Hoe doe ik dit? Ook dit vereist ons naar een aantal AJAX gebruiken. En dus zullen we openstellen ajax.js. En hier is die functie, cs50Info. Als de naam is er niets, ik terug. Ik ben niet van plan om iets te doen als de lege optie is gekozen. Anders ga ik maak een nieuw XMLHttpRequest. En dan ga ik om te zeggen, wanneer de readyState veranderingen, noemen deze functie. 

En als de readyState is 4 en de status 200, hier is een beetje van jQuery op lijn 13. Maar alles wat ik doe is te zeggen, de inhoud van infodiv veranderen te zijn wat ik terug als een reactie van mijn HttpRequest. 

Wat is mijn HttpRequest? Nou, dat klopt hier op lijn 18 en 19. Lijn 18, ben ik eigenlijk voorbereiding een GET verzoek om de naam + .html. En nogmaals, de naam is hier het argument dat was doorgegeven als een parameter om cs50Info. 

Dus eigenlijk, ik ben passeren in iemands te noemen, die deze set opties was die we zagen in de drop-down menu in de vorm. Ik krijg die naam. En ik zeg ik zou graag willen dat u gelieve te krijgen voor mij dat file.html, en stuur vervolgens dat verzoek. 

En zodat onreadystatechange gaat te luisteren en wachten en wachten en wachten, totdat de readyState 4 is, en de status is 200. Dus het is klaar om te worden geserveerd, en het verzoek succesvol was. En als het is, het gaat om de inhoud van infodiv veranderen om de reactie tekst dat ik terug. 

Dus laten we zien hoe dit eigenlijk zou kunnen werken. Dus we zullen het hoofd naar mijn browser venster, en we zullen hier kijken. Dus laten we een kijkje nemen op wat er hier in AJAX. Dus we iemand kiezen uit het drop-down menu. Dus in dit geval, laten we gewoon kiezen voor Hannah. En bericht dat Hannah's zijn gewijzigd, maar ik heb niet any-- mijn pagina niet helemaal opnieuw te laden. Het spul gebleven. Het merendeel van het spul gebleven. AJAX test niet veranderen. De knop zelf, dit drop-down menu veranderde niet. Maar de informatie daar deed veranderen. En afhankelijk van hoe snel mijn computer zetten, je eigenlijk zou kunnen zien dat de inhoud verdwijnt en vervolgens verschijnt weer echt snel. Dat is de inhoud wordt verwijderd uit infodiv, en vervolgens vervangen door een nieuwe asynchrone aanvraag. 

Dus als ik zet hem te zeggen: Rob-- en opnieuw, een kijkje nemen, en misschien zullen we het eigenlijk zien verdwijnen en snel weer verschijnen. Jij ziet dat? Hoe het kwam even verderop, en dan is het bijgevuld? Dat is de AJAX verzoek soort plaats. En dus afhankelijk van de persoon die ik kies, ik ben waardoor een andere asynchrone verzoek aan een ander bestand dat ik op mijn server. En de inhoud van het infodiv bijwerken, op basis van welke van deze ik heb gekozen. Dus dat is eigenlijk alles wat er is AJAX. Het stelt ons in staat om deze asynchrone maken verzoeken, updates van een pagina. Zonder Vernieuw de hele pagina, we gaan naar nieuwe krijgen inhoud ervan door een nieuwe frisse verzoek naar de server. En dus onze pagina's kunnen worden heel wat meer dynamiek. 

En naarmate we meer en meer geavanceerde, u misschien dingen zoals krijgen laten we zeggen, uw e-mail inbox, waar je niet hoeft niets te doen. Je hoeft niet naar een klik drop-down menu of klik op om het even wat, en alle van een plotselinge, uw nieuwste e-mail verschijnt aan de top. Dat is ook slechts een Ajax-verzoek. Ajax vraagt ​​uw server, de e-mailserver, te sturen over alle informatie over je laatste e-mails, en het veranderen van wat je ziet op de scherm om uw nieuwste set van e-mails zijn. En als je een nieuwe in er zijn, dan is de inhoud van de div verandert reflecteren de bijgewerkte inhoud. Ik ben Doug Lloyd. Dit is CS50.