[MUSIK SPELA] DOUG LLOYD: Så ett mer slags föreställning om att sorts faller inom ramen för JavaScript är något som kallas AJAX. Fram till denna punkt, vår interaktion med JavaScript har begränsats till att driva en knappen och något händer. Och specifikt något som händer är våra webbplatser ser ut och känns förändringar. Höger? Liksom i synnerhet i Document Object Model video, Jag ändrade bakgrundsfärgen. Men när jag gjorde det, jag har inte göra några särskilda extra önskemål. Jag behövde inte begära att servern skicka mig en ny sida. Jag ändrade bara vad jag redan hade. Jag behövde inte ladda min sida, och saker och ting definitivt förändrats, så det är bra. Men det finns definitivt några manuell interaktion användar inblandade. AJAX är en cool teknik som gör det möjligt oss att uppdatera en sidas innehåll, och inte bara utseendet och känna, utan omlastning. 

Och genom att specifikt när jag säger uppdatera en sidas innehåll, Jag säger inte att vi skriva sidan med hjälp av JavaScript. Jag säger att vi faktiskt begär Mer information från servern utan vår sida att behöva ladda om. 

Nu den sortens lite en mer avancerad teknik att vi kommer att prata om i den här videon. Vi kommer att ha lite interaktion. Men när vi gör, jag kommer att vara gör förfrågningar till webbservern. I det här fallet, precis vad är kör min webbservern Apache. Jag kommer att göra ytterligare förfrågningar medan jag besöker en webbsida, men min sida kommer inte att uppdateras. 

Det är bara att gå till asynkront uppdatera min sida. Och det är i själva verket, som AJAX står för, är Asynchronous JavaScript and XML. XML är en annan typ av uppmärkning språk, och du kan sortera av tänka på det precis som HTML. Det är inte riktigt samma sak, men det är i princip bara en markup language. Så det är en asynkron JavaScript och ett märkningsspråk. 

Så för att använda den här Ajax technique-- Ajax är inte ett separat programmeringsspråk. Det är bara en slags uppsättning techniques-- vi måste skapa en särskild JavaScript-objekt, som kallas en XMLHttpRequest. Nu är det mycket lätt att göra detta. Vi säger bara var, oavsett Vi vill kalla detta objekt, är lika med ny XMLHttpRequest. Och nu har vi nu fått en AJAX typ av objekt, eller en XMLHttpRequest objekt, vilket gör det möjligt oss att asynkront uppdatera vår sida. 

Efter att vi har fått detta nya objekt, detta XMLHttpRequest, Vi måste göra något för att dess onreadystatechange beteende. Onreadystatechange beteende är egentligen bara när du gör en begäran till en webbsida, sidan går igenom ett antal steg. För det första har en begäran inte skickats. Därefter har begäran varit skickats, men inte agerat på. Då begäran har agerat på. Då begäran skickas tillbaka till dig. 

Då är begäran fullastad på din sida. De är olika tillstånd. Och så vi måste ställa vår nya XMLHttpRequest objekt att ändra när de färdiga tillståndsförändringar. Och typiskt, vi gör detta genom att definierar en anonym funktion, som Vi är bekant med från JavaScript nu, som anropas när de färdiga tillståndsförändringar. Det är verkligen inte mycket mer än så. Vi ska bara vara att definiera en anonym funktion, ungefär som vad vi gjorde i JavaScript, där vi skulle har en anonym funktion svara på en på klick eller när vi gjorde en karta över de olika objekten i en array. 

Något hände när något klickade. I det här fallet, det är bara något är händer när tillståndet i vår sida förändringar. Det finns två andra egenskaper som sorterar of-- de inte är de enda egenskaper som är inneboende XMLHttpRequest men de är ganska viktiga. Det finns något som kallas readyState, vilket som ni säkert kan gissa, är relaterade till onreadystatechange. Den talar om faktiskt vad readyState är. 0, 1, 2, 3, och 4 är möjligheterna där, och de slags ungefär motsvarar vad Jag pratade just om en sekund sedan. 

Och sedan status, som förhoppningsvis om allt gick OK, är 200, som är kort för, naturligtvis, OK, som vi känner till från http. Så vi hoppas att våra färdiga tillstånd är fyra, och vår status är 200. Och om våra färdiga tillstånd är fyra, och svaret är redo att sätta på sida, och statusen är 200, vi skulle kunna göra allt framgångsrikt, Nu kan vi asynkront uppdatera vår sida utan att behöva ladda hela innehållet av det. 

Efter att vi har definierat vad som händer till onreadystatechange beteende, och vi har kontrollerat att readyState är 4 och status är 200, då allt vi behöver göra är öppna upp en asynkron begäran, som just gör en HTTP GET allmänhet begäran. Bara gör det programmatiskt, i stället för via vår webbläsare. Och sedan skickar vi denna begäran. Så vad gör detta kanske se ut i sitt sammanhang? Så här är en funktion som behandlar AJAX anmodan. OK? Och jag har godtyckligt sagt den accepterar ett argument. Och detta ett slags allmän skelett här. I början, får vi oss en ny XMLHttpRequest objekt. Då måste jag ställa in onreadystatechange beteende. Och så jag kommer att säga när readyState förändringar, Jag vill att du ringer denna funktion. 

Som kommer att be fråga, om readyState är 4, om readyState har ändrats att vara 4, och status var 200, så vi hade en lyckad begäran, jag vill göra något för att sidan. Och vi tar en titt vid ett exempel på vad att något kan vara på en sekund. Alltså, nu har jag har definierat min anonym funktion, mitt svar funktion när de readyState förändringar. 

Så då behöver jag bara öppna upp en begära hjälp av den öppna samordningsmetoden. Och sedan, jag skickar denna begäran. Och låt oss ta en titt på en mer konkret exempel vad AJAX kan göra på våra webbsidor. Så jag har här en mycket enkel sida kallas home.html. Och jag har fått ett informations går här och någon sorts rullgardinsmenyn av. 

Och vi kommer att se över detta i en sekund. Men jag tycker att vi borde nu ta en titta på den faktiska källkoden. Och så kommer jag att öppna upp home.html. Och vi får se vad som händer. Så upp högst upp här, har jag några JavaScript saker som händer. 

Och här, jag har tydligen en div vars ID är infodiv, och viss information kommer att åka dit. Och då har jag det här formuläret. Och insidan av denna formulär, jag har något kallas Select, som är bara en rullgardinsmeny med en massa olika alternativ. Och tydligen när som ändras, när det alternativ som har valts ut har ändrats, jag ska ringa någon funktion cs50Info, och sedan kommer jag att passera i this.value, där det rör sig vilket alternativ valdes, och värdet är en av dessa här, alternativ value = lika tom "Blumberg," "Bowden," "chan" och "Malan." 

Så vad kan faktiskt händer här när jag gör detta? Nåväl, låt oss ta en titta på blumberg.html. Ser ut som det är bara en utdrag av vissa HTML. Och faktiskt, vad jag hoppas som kommer att hända här är jag ska kunna ansluta denna HTML direkt i min webbsida utan att behöva ladda sidan, så att när Jag väljer Hannah från rullgardins meny, information om Hannah, i synnerhet, den här informationen här i blumberg.html, är vad som visas upp på sidan. Och jag behöver inte uppdatera. Och om jag valde någon annan, deras uppgifter skulle visa upp. Hur gör jag detta? Återigen kräver detta oss att använda vissa AJAX. Och så kommer vi att öppna upp ajax.js. Och här är den funktionen, cs50Info. Om namnet är ingenting, jag återvänder. Jag tänker inte göra någonting om den tomma alternativet har valts. Annars kommer jag att skapa ett nytt XMLHttpRequest. Och sedan ska jag säga, när readyState förändringar, kalla denna funktion. 

Och om readyState är 4 och statusen är 200, Här är lite jQuery på rad 13. Men allt jag gör är att säga, ändra innehållet i infodiv att vara vad jag kom tillbaka som en svar från min httprequest. 

Vad är min httprequest? Tja, det är rätt här på ledningen 18 och 19. Linje 18, jag i princip förbereder en GET begäran om namn + .html. Och återigen, här är namn argumentet att var passerade in som en parameter till cs50Info. 

Så i princip är jag passerar någons namn, vilket var den uppsättning alternativ som vi såg i rullgardinsmenyn i formuläret. Jag får det namnet. Och jag säger att jag skulle vilja att ni vänligen få för mig att file.html, och sedan skicka denna begäran. 

Och så att onreadystatechange går att lyssna och väntar och väntar och väntar, tills readyState är 4, och statusen är 200. Så det är redo att serveras, och begäran var framgångsrik. Och sedan om det är, det kommer att ändra innehållet i infodiv vara svaret text som jag kom tillbaka. 

Så låt oss se hur detta kan faktiskt fungera. Så vi ska bege dig till min webbläsare fönstret, och vi kommer att se här. Så låt oss ta en titt på vad som händer här i AJAX. Så vi ska välja någon från rullgardinsmenyn. Så i detta fall, låt oss välj bara Hannah. Och märker att Hannahs informationen har ändrats, men jag har inte any-- min sida inte helt ladda om. Grejer stannade. De flesta av grejer stannade. AJAX Test förändrades inte. Själva knappen, detta rullgardinsmenyn förändrades inte. Men uppgifter där gjorde förändringen. Och beroende på hur snabbt min dator flyttar, du faktiskt kan se att innehållet försvinner och sedan dyker upp verkligen snabbt. Det är innehållet som bort från infodiv, och ersattes sedan med en nya asynkron begäran. 

Så om jag slå att säga, Rob-- och igen, ta en titt, och kanske vi får se det faktiskt försvinna och dyka upp igen snabbt. Ser du det där? Hur det bara poppade bort, och då är det fyllas? Det är AJAX begäran slags äger rum. Och så beroende på den person jag väljer, jag är göra en annan asynkron förfrågan till en annan fil att jag har på min server. Och innehållet i min infodiv uppdaterar, baserat på vilka av dessa jag valt. Så det är egentligen allt som finns att AJAX. Det ger oss möjlighet att göra dessa asynkrona förfrågningar, uppdateringar till en sida. Utan att behöva uppdatera hela sidan, Vi kommer att få nya innehåll från den genom att göra en ny ny begäran till servern. Och så kan våra sidor bli ganska lite mer dynamisk. 

Och när vi får mer och mer avancerade, du kan få saker som säg din e-postbrevlåda, där du inte behöver göra någonting. Du behöver inte klicka på en rullgardinsmenyn eller klicka på någonting, och helt plötsligt, din nyaste e-post dyker upp på toppen. Det är också bara en Ajax begäran. Ajax begär din server, e-postservern, att skicka över all information om dina senaste e-postmeddelanden, och ändra vad du ser på skärm för att vara din nyaste uppsättning av e-post. Och om du har ett nytt i där, då innehållet i denna div kommer att ändras för att återspegla det uppdaterade innehållet. Jag är Doug Lloyd. Detta är CS50.