[TÓNLIST spila] DOUG LLOYD: Svo eitt konar hugmynd að konar fellur undir regnhlíf JavaScript er eitthvað sem kallast AJAX. Fram til þessa, okkar samskipti með JavaScript hefur verið takmörkuð að ýta a hnappinn og eitthvað gerist. Og sérstaklega, en eitthvað sem gerist er vefsíður okkar útlit og feel breytingar. Ekki satt? Eins og í einkum í skjal mótmæla líkan video, Ég var að breyta bakgrunnslit. En þegar ég gerði það, gerði ég ekki hafa að gera einhverjar sérstakar auka beiðnir. Ég vissi ekki að fara fram á að miðlara senda mér nýja síðu. Ég var að breyta því sem ég hafði nú þegar. Ég vissi ekki að endurhlaða síðuna mína, og það breyttist örugglega, svo það er frábært. En það er örugglega einhver handbók notandi víxlverkun að ræða. AJAX er kaldur tækni sem gerir okkur til að uppfæra efni síðunnar, og ekki bara útlit og finnst, án þess að endurhlaða. 

Og með því að sérstaklega þegar ég segir að uppfæra efni síðunnar, Ég er ekki að segja að við umrita síðan nota JavaScript. Ég er að segja við beiðni raun Frekari upplýsingar frá miðlara án síðu okkar þurfa að endurhlaða. 

Nú þessi tegund af smá a fleiri háþróaður tækni sem við erum að fara að tala um í þessu myndbandi. Við erum að fara að hafa samskipti. En þegar við gerum það, ég ætla að vera gera beiðnir til the vefur framreiðslumaður. Í þessu tilfelli, bara hvað er gangi minn Apache vefur framreiðslumaður. Ég ætla að vera að gera frekari beiðnir á meðan ég er að heimsækja vefsíðu, en mín síða mun ekki endurnýja. 

Það er bara að fara að asynchronously uppfæra síðuna mína. Og það er í raun, sem AJAX stendur fyrir, er ósamstilltur JavaScript og XML. XML er annars konar rithætti tungumál, og þú getur raða á hugsa um það eins og HTML. Það er ekki alveg það sama, en það er í rauninni bara Markup Language. Svo það ósamstilltur JavaScript og Markup Language. 

Svo í því skyni að nota þetta AJAX technique-- AJAX er ekki sérstakt forritunarmál. Það er bara svona a setja techniques-- vér þarf að búa til sérstakt JavaScript hlut, sem er kallað XMLHttpRequest. Nú, það er mjög auðvelt að gera þetta. Við segjum bara Var, hvað við viljum kalla þennan hlut, jafngildir nýja XMLHttpRequest. Og nú höfum við nú fengið Ajax konar hlut, eða XMLHttpRequest hlut, sem mun leyfa okkur að asynchronously uppfært síðuna okkar. 

Eftir að við höfum fengið þetta nýja mótmæla, þetta XMLHttpRequest, við verðum að gera eitthvað til að þess onreadystatechange hegðun. Onreadystatechange hegðun er í raun bara þegar þú leggja fram beiðni á vefsíðu, síðan fer í gegnum a tala af skrefum. First, beiðni hefur ekki verið send. Þá beiðnin hefur verið send, en ekki brugðist við. Þá beiðni hefur verið brugðist við. Þá er óskað send aftur til þín. 

Þá, beiðni er fullhlaðin í síðuna þína. Þeir eru mismunandi ríki. Og svo þurfum við að setja okkar Ný XMLHttpRequest mótmæla til að breyta þegar Tilbúin breytingar ástand. Og venjulega, við gerum þetta með skilgreina nafnlaus virka, sem við erum kunnugir frá JavaScript nú, að er kallað þegar Tilbúin breytingar ástand. Það er í raun ekki mikið meira en það. Við erum bara að fara að vera að skilgreina nafnlaus aðgerð, tegund af eins og hvað við vorum að gera í JavaScript, þar sem við myndum hafa nafnlaus virka bregðast við á smell, eða þegar við vorum að gera kort af ýmsir hlutir í fylki. 

Eitthvað gerðist þegar eitthvað var smellt. Í þessu tilfelli, það er bara eitthvað sem er gerast þegar ríkið á síðu okkar breytingar. Það eru tvær aðrar eignir sem eru eins konar of-- þeir eru ekki aðeins eignir sem eru felst að XMLHttpRequest, en þeir eru nokkuð mikilvæg sjálfur. Það er eitthvað sem kallast readyState, sem eins og þú geta sennilega giska, er tengjast onreadystatechange. Það segir í raun þér hvað readyState er. 0, 1, 2, 3, og 4 eru möguleikarnir þar, og þeir svoleiðis u.þ.b. í samræmi við það Ég var bara að tala um annað síðan. 

Og þá stöðu, sem vonandi ef allt gekk OK, er 200, sem er stutt fyrir, að sjálfsögðu, OK, sem við erum kunnugir frá HTTP. Þannig að við erum að vona að tilbúin ástand okkar er fjögur og staða okkar er 200. Og ef tilbúinn ríki okkar er fjögur, og viðbrögð er tilbúinn til að setja á síðu og staðan er 200, við gátum að gera allt með góðum árangri, nú getum við asynchronously uppfæra síðuna okkar án þess að þurfa að endurhlaða allt efni hennar. 

Eftir að við höfum skilgreint hvað gerist til onreadystatechange hegðun, og við höfum athugað að readyState er 4 og staðan er 200, þá er allt sem við þurfum að gera opna ósamstilltur beiðni, sem er bara að gera An Http GET almennt beiðni. Bara að gera það kerfisbundið, í stað þess að í vafra okkar. Og þá erum við að senda þá beiðni. Svo hvað þýðir þetta kannski líta út eins og í samhengi? Svo hér er fall sem fjallar AJAX beiðnir. OK? Og ég hef geðþótta sagt það tekur rifrildi. Og þetta eins konar a Almennt beinagrind hér. Í upphafi, fáum við okkur ný XMLHttpRequest mótmæla. Þá þarf ég að stilla onreadystatechange hegðun. Og svo ég ætla að segja þegar readyState breytingar, Ég vil að þú að kalla þessa aðgerð. 

Sem er að fara að spyrja spurning, ef readyState er 4, ef readyState hefur breyst að vera 4, og stöðu var 200, þannig að við þurftum vel beiðni, ég langar að gera eitthvað við síðuna. Og við munum taka a líta á dæmi um það að eitthvað gæti verið í annað. Svo, nú hef ég skilgreint nafnlaus virka minn, svar virka minn þegar að readyState breytingar. 

Svo þá þarf ég bara að opna a óska, með opnu. Og þá, ég sendi þá beiðni. Og við skulum taka a líta á meira steypu dæmi af hverju AJAX getur gert á vefsíðum okkar. Þannig að ég hef hér mjög einfalt síðu sem heitir heim.html. Og ég hef fengið upplýsinga fer hér og einhvers konar fellivalmyndinni. 

Og við munum rifja þetta í eina sekúndu. En ég held að við ættum nú að taka líta á the raunverulegur uppspretta merkjamál. Og svo ætla ég að fara að opna heim.html. Og við munum sjá hvað er að gerast. Svo upp á mjög toppur hér, ég hef sumir JavaScript efni sem er að gerast. 

Og hér, ég hef greinilega a div sem ID er infodiv, og sumir upplýsingar er að fara að fara þangað. Og þá hef ég þetta eyðublað. Og inni þetta form, ég hef eitthvað kallað Select, sem er bara fellilistanum með fullt af mismunandi valkosti. Og virðist þegar það breytist, þegar valkostur sem hefur verið valinn er breytt, ég ætla að hringja sumir virka cs50Info, og þá er ég að fara að fara í this.value, þar er átt við sem kostur var valinn, og gildi er einn af þessum hér, valkostur gildi = jafngildir tóm, "Blumberg," "Bowden," "Chan," og "Malan." 

Svo gæti það í raun gerast hér þegar ég að gera þetta? Jæja, við skulum taka a líta á blumberg.html. Lítur út eins og það er bara bút af einhverju Html. Og í raun, hvað er ég að vonast er að fara að gerast hér er ég að fara að vera fær um að stinga þetta Html beint á vefinn minn án þess að þurfa að endurhlaða síðan, þannig að þegar Ég vel Hönnu frá the falla-dúnn menu, upplýsingar um Hönnu, Einkum þetta upplýsingar hér í blumberg.html, er það sem sýnir sig á síðunni. Og ég þarf ekki að uppfæra. Og ef ég valdi einhver annar, upplýsingar þeirra myndi mæta. Hvernig á ég að gera þetta? Aftur, þetta krefst okkur að nota sumir AJAX. Og svo munum við opna ajax.js. Og hér er að virka, cs50Info. Ef nafn er ekkert, aftur ég. Ég ætla ekki að gera neitt ef tóm valkostur hefur verið valinn. Annars ætla ég að búa til nýja XMLHttpRequest. Og þá er ég að fara að segja, þegar readyState breytingar, kalla þessa aðgerð. 

Og ef readyState er 4 og staðan er 200, hér er smá jQuery á línu 13. En allt sem ég er að gera er að segja, breyta innihaldi infodiv að vera allt sem ég fékk til baka eins og a svar frá HttpRequest mínum. 

Hvað er HttpRequest minn? Jæja, það er rétt hér á línu 18 og 19. Line 18, ég er í rauninni að undirbúa a GET beiðni um nafn + .html. Og aftur, nafn hér er rök sem var samþykkt í sem viðfang cs50Info. 

Svo í rauninni, ég liggur í einhver er nafn, sem var að setja af valkostum sem við sáum í fellivalmynd í formi. Ég fæ því nafni. Og ég er að segja að ég vildi eins og þú að vinsamlegast fá mér að file.html, og þá senda þá beiðni. 

Og svo að onreadystatechange er að fara að vera að hlusta og bíða og bíða og bíða þar til readyState er 4, og staðan er 200. Svo það er tilbúið til að láta þjóna sér, og beiðnin tókst. Og þá ef það er, það er að fara að breyta innihaldi infodiv að vera svar texta sem ég fékk til baka. 

Þannig að við skulum sjá hvernig þetta gæti raunverulega vinnu. Þannig að við munum fara yfir til vafranum mínum glugga, og við munum líta hér. Svo skulum taka a líta á hvað er að gerast hér í AJAX. Þannig að við munum velja einhvern frá the falla-dúnn matseðill. Þannig að í þessu tilfelli, við skulum bara velja Hönnu. Og takið eftir að Hanna er upplýsingar hafi breyst, en ég hafði ekki any-- minn síðu ekki alveg endurhlaða. The efni var. Flest efni gist. AJAX Test breyttist ekki. The hnappur sjálft, þetta fellivalmynd breyttist ekki. En upplýsingar þar gerði breytingu. Og eftir því hversu fljótt tölva færist mínir, þú í raun gætir séð að efni hverfur og þá birtist aftur mjög fljótt. Það er efni að vera eytt úr infodiv, og síðan skipt út fyrir Ný ósamstilltur beiðni. 

Þannig að ef ég skipta henni að segja, Rob-- og aftur, taka a líta, og kannski að við munum sjá það í raun hverfa og birtast aftur fljótt. Þú sérð það? Hvernig það smella bara í burtu, og þá er það fylla? Það er AJAX beiðni konar sér stað. Og svo eftir að manneskja sem ég velja, ég er gera aðra ósamstilltur Beiðni í aðra skrá sem ég hef á vefþjóninum mínum. Og innihald minn infodiv erum að uppfæra, byggt á sem þessir sem ég hef valið. Svo er það í raun allt sem er til AJAX. Það gerir okkur kleift að gera þessar ósamstilltur beiðnir, uppfærslur á síðu. Án þess að þurfa að uppfæra alla síðuna, við erum að fara að fá nýja efni frá henni með því að gera ný ferskt beiðni til the framreiðslumaður. Og svo, síður okkar geta orðið töluvert meira dynamic. 

Og eins og við fá meira og fleiri háþróaður, þér gæti fengið hluti eins segjum innhólfinu, þar sem þú þarft ekki að gera neitt. Þú þarft ekki að smella á fellivalmynd eða smella neitt, og allt í einu, nýjasta þitt Netfangið sýning upp á toppinn. Það er líka bara Ajax beiðni. Ajax er að biðja þín miðlara, the email framreiðslumaður, að senda yfir allar upplýsingar um nýjustu tölvupóstinn þinn, og breyta því sem þú sérð á skjár til að vera nýjasta þitt af tölvupósti. Og ef þú ert með nýjan í þar, þá innihald þess div breytist í samræmi við uppfærð efni. Ég er Doug Lloyd. Þetta er CS50.