[Predvaja glasba] Doug LLOYD: Torej še ena nekako idejo, da nekako sodi pod okrilje JavaScript je nekaj, kar se imenuje AJAX. Do te točke, naši interakcije z JavaScript je bila omejena na potiskanje gumb in se nekaj zgodi. In natančneje, nekaj, kar se zgodi je naše spletne strani, videz in občutek spremembe. Prav? Kot zlasti v Dokument objektni model video, Sem spremenil barvo ozadja. Toda, ko sem, da nisem imel storiti vse posebne dodatne zahteve. Nisem imel, da zahteva strežnik mi poslali novo stran. Pravkar sem se spremenila, kar sem že imel. Nisem imel, da osvežite svojo stran, in stvari zagotovo spremenilo, tako da je super. Ampak tam je definitivno nekaj Navodilo interakcija uporabniku. AJAX je kul tehnika, ki omogoča, nam posodobiti vsebino strani, in ne samo videz in počutim, brez ponovnega nakladanja. 

In še posebej, ko sem pravijo, posodabljanje vsebine strani je, Ne pravim, da smo znova stran uporablja JavaScript. Pravim, da smo dejansko zahteva več informacij od strežnika brez naše strani imajo, da osvežite. 

Zdaj pa, da nekako malo bolj napredna tehnika da bomo govorili približno v tem videu. Bomo imeli nekaj interakcije. Toda, ko smo storili, bom, da bo vlaganje prošenj za spletni strežnik. V tem primeru, le kaj teče moj Apache spletni strežnik. Grem, da se kar dodatno zahteve, medtem ko sem na obisku spletne strani, ampak moja stran ne bo osvežil. 

To je le, da bo asinhrono posodobiti mojo stran. In to je v resnici, ki AJAX pomeni, je Asinhroni JavaScript in XML. XML je ena vrsta markup jezik, in jih lahko razvrstite po si o njej mislijo tako kot HTML. To ni čisto ista stvar, vendar to je v bistvu samo označevalni jezik. Torej, to je asinhrona JavaScript in označevalni jezik. 

Torej, da bi uporabljali to AJAX technique-- AJAX ni samostojen programski jezik. To je samo neke vrste niz techniques-- mi morali ustvariti poseben JavaScript objekt, ki se imenuje XMLHttpRequest. Zdaj, to je zelo enostavno, da to storijo. Pravkar smo rekli, var, ne glede na želimo poklicati tega cilja, enaka novo XMLHttpRequest. In zdaj smo zdaj pridobil AJAX vrste objekta, ali XMLHttpRequest predmet, ki bo omogočal nam asinhrono posodobiti našo spletno stran. 

Potem ko smo gotten to novo predmet, to XMLHttpRequest, moramo nekaj storiti, da njegovi onreadystatechange vedenje. Onreadystatechange vedenje je res samo ko vložijo zahtevo na spletno stran, stran gre skozi več korakov. Najprej je zahteva ni bila poslana. Nato je prošnja bila poslano, vendar ni ravnal. Potem je bila zahteva ravnal. Nato je zahteva se pošlje nazaj k tebi. 

Nato je zahteva polno naložen na vaši strani. Tisti, ki so različne države. In zato moramo, da naše novo XMLHttpRequest objekt da se spremenijo, ko stanje pripravljenosti spremembe. In ponavadi smo to naredili s opredeljevanju anonimni funkcijo, ki da smo seznanjeni z od JavaScript sedaj, da se sproži ob stanju pripravljenosti spremembe. To je res ni veliko več kot to. Mi smo le, da bo treba opredelitvi Funkcija anonimna, nekako všeč, kar smo počeli v JavaScript, kjer bi imajo anonimne funkcijo odzvati na on klik, ali pa, ko smo počeli zemljevid različni predmeti v array. 

Nekaj ​​se je zgodilo, ko kaj je kliknil. V tem primeru, to je samo nekaj, kar je dogaja, ko se je stanje naše strani spremembe. Obstajata dve drugi lastnosti da so nekako of-- oni ne edine lastnosti, ki so inherentna XMLHttpRequest, ampak oni so zelo pomembne. Nekaj ​​je pozval readyState, ki, kot si verjetno lahko uganiti, je povezana z onreadystatechange. To dejansko vam pove kaj readyState je. 0, 1, 2, 3, in 4 možnosti tam, in so nekako v grobem ustreza temu, kar Pravkar sem govoril o drugi nazaj. 

In potem stanje, ki upajmo, da če je šlo vse v redu, 200, ki je kratka za, seveda, v redu, ki smo seznanjeni z od Http. Tako smo v upanju, da je naša država pripravljena je štiri, in naš status je 200. In če naši stanju pripravljenosti je štiri, in odziv je pripravljen, da se dajo na Stran, stanje je 200, smo uspeli narediti vse uspešno, Zdaj bomo lahko asinhrono posodobiti našo stran ne da bi osvežite celotna vsebina tega. 

Potem ko smo opredelili, kaj se zgodi na obnašanje onreadystatechange, in smo preverili, da readyState je 4 in stanje je 200, potem vse, kar morate storiti je, odpirajo asinhroni Zahteva, ki je ravno tako HTTP splošno GET zahtevo. Samo to počne načrtno, namesto prek našega spletnega brskalnika. In potem smo poslali to zahtevo. Torej, kaj je to morda izgledal v kontekstu? Torej, tukaj je funkcija, ki ukvarja z AJAX prijav. V REDU? In sem samovoljno rekel sprejema argumenta. In to neke vrste splošno okostje tukaj. Na samem začetku smo dobili sami novo XMLHttpRequest objekt. Potem, moram nastaviti onreadystatechange vedenje. In tako bom rekel, ko spremembe readyState, Želim vam, da pokličete to funkcijo. 

Ki se bo vprašati Vprašanje, če readyState 4, če je readyState spremenila biti 4, stanje je bilo 200, tako da smo imeli uspešno zahtevo, I želeli narediti nekaj na stran. In mi bomo ogledali na primer, kaj da nekaj lahko v sekundi. Torej, zdaj sem definirana moj anonimni funkcija, moj odgovor funkcija kadarkoli Spremembe readyState. 

Torej, potem pa moram samo še odpreti zahteva, z uporabo odprte metode. In potem sem poslati to zahtevo. In dajmo si oglejte bolj konkreten primer česa AJAX lahko storite na naših spletnih straneh. Torej, tukaj imam zelo preprost Stran se imenuje home.html. In imam informacija gre tu in neke vrste spustnem meniju. 

In bomo to ponovno v eni sekundi. Ampak mislim, da se moramo zdaj traja poglej dejanske izvorne kode. In tako, bom odpreti home.html. In bomo videli, kaj se dogaja. Tako se na samem vrhu tukaj, imam nekateri JavaScript stvari, ki se dogaja. 

In tukaj sem očitno imela div, katere ID je infodiv, in nekaj informacij se dogaja, da gredo tja. In potem moram ta obrazec. In znotraj tega oblika, imam nekaj imenuje Select, ki je samo spustni meni s kopico različnih možnosti. In očitno, ko se to spremeni, ko možnost, da je bil izbran ima spremenila, bom poklical nekatere funkcije cs50Info, in potem bom prenese v this.value, kjer se to nanaša na katera možnost je bila izbrana, in vrednost je eden od teh tod možnost vrednost = enaka prazna, "Blumberg," "Bowden," "Chan," in "Malan." 

Torej, kaj lahko dejansko tukaj zgodilo, ko sem to naredil? No, vzemimo poglej blumberg.html. Izgleda, da je samo odrezek nekega HTML. In v resnici, kaj sem v upanju, se bo zgodilo tukaj se bom lahko priključite Ta HTML neposredno v moji spletni strani ne da bi osvežite stran, tako da kadar Izberem Hannah iz spustnega menija Meni, informacije o Hannah, zlasti, te informacije tukaj v blumberg.html, je tisto, kar se pojavi na strani. In mi ne bi bilo treba osvežiti. In če sem izbral nekoga drugega, njihove informacije bi prikazal. Kako to storiti? Tudi to zahteva nam, da uporabite nekaj AJAX. In tako bomo odprli ajax.js. In tukaj je, da funkcija, cs50Info. Če ime ni nič, sem se vrnil. Ne bom storiti ničesar, če prazna možnost je bila izbrana. V nasprotnem primeru bom ustvariti nov XMLHttpRequest. In potem bom povedal, ko se je readyState spremembe, pokličite to funkcijo. 

In če readyState je 4 in stanje je 200, tukaj je malo od jQuery na linijo 13. Toda vse delam, je rekel, spremenite vsebino infodiv da bi karkoli sem se vrnil kot Odziv iz moje HttpRequest. 

Kaj je moj HttpRequest? No, to je pravica tukaj na liniji 18 in 19. Line 18, jaz sem v bistvu pripravljamo GET zahtevo za ime + .html. In spet, ime je tu trditev, da je bila sprejet kot parameter cs50Info. 

Torej v bistvu, sem mimo v nekdo ime, ki je bil, da je nabor možnosti da smo videli v drop-down menija v obliki. Dobivam to ime. In jaz sem rekel, jaz bi vas rad prosim dobijo za mene, da file.html, in nato pošljete to zahtevo. 

In da onreadystatechange se dogaja da je poslušanje in čaka in čaka in čaka, dokler readyState 4, in je stanje 200. Tako da je pripravljen, da bi mu stregli, in prošnja je bila uspešna. In potem, če je to, da se bo spremenite vsebino infodiv da je besedilo odgovora, da sem se vrnil. 

Torej, da vidimo, kako to lahko dejansko delajo. Torej bomo čez glavo, da moj brskalnik okno, in bomo poglej tukaj. Torej, dajmo si oglejte kaj se dogaja tukaj v AJAX. Torej bomo izbrali nekoga, iz spustnega menija. Torej, v tem primeru, kaj je samo izbere Hannah. In obvestilo, da je Hannah je Podatki se je spremenilo, vendar nisem imel any-- my Stran je v celoti ne osvežite. Stvari ostal. Večina stvari je ostal. AJAX Testna ni spremenila. Gumb sama, to spustnem meniju ni spremenilo. Ampak informacija je naredil spremembo. In glede na to, kako hitro moji računalniški poteze, si dejansko lahko videli, da vsebino izgine, nato pa se ponovno pojavi res hitro. To je vsebina pa izbrisan iz infodiv, in nato nadomesti z Nov asinhroni zahteva. 

Torej, če sem ga preklopite treba reči, Rob-- in še enkrat, poglej, in morda bomo videli dejansko izginejo in se hitro spet pojavijo. Vidiš, da je? Kako se je pravkar izstrelil stran, in potem ponovno napolniti? Da je zahtevek AJAX nekako poteka. In tako odvisno od oseba, sem se odločil, da sem izdelavo drugačno asinhroni Zahtevek za drugo datoteko da imam na mojem strežniku. In vsebina mojega infodiv so posodabljanje, na podlagi katere od teh sem izbral. Tako, da je res vse, kar je za AJAX. To nam omogoča, da te asinhroni zahteva, posodobitve strani. Ne da bi osvežil celotno stran, bomo dobili novo vsebina iz nje s tem, nov sveže zahtevek s strežnikom. In tako lahko naši strani postanejo precej malo bolj dinamično. 

In kot smo dobili več in bolj napreden, vas bi lahko dobil stvari, kot so recimo, vaš e-poštni nabiralnik, kjer vam ni treba storiti ničesar. Nimate za klik spustnem meniju ali kliknite ničesar, in kar naenkrat, vaš najnovejši elektronske pošte pojavi na vrhu. To je tudi samo Ajax zahteva. Ajax je zahteval vaš server, e-poštni strežnik, poslati preko vseh informacij o vaših najnovejših e-pošte, in spreminja, kar vidite na Zaslon naj bo vaš najnovejši nabor e-pošto. In če imate novo v tam, potem vsebina te div se bo spremenila, da odraža posodobljeno vsebino. Sem Doug Lloyd. To je CS50.