[Musika jotzen]
>> DOUG LLOYD: Beraz, bat gehiago Nozio moduko hori
Sort babespean maiteminduko Javascript AJAX izeneko zerbait da.
Orain arte, gure Ikusteko Javascript-a duen elkarrekintza
mugatua izan bultza botoia eta zerbait gertatzen da.
Eta zehazki, Hori gertatzen den zerbait
da gure webgune itxura eta aldaketa sentitzen.
Eskuin?
Bereziki atsegin, in the dokumentu bideo objektu-eredua
Hondo kolorea aldatu dut.
Baina orduan ez dut, ez dut izan Edozein eskaera extra berezia egin.
Ez nuen behar ez izateko eskatzen duten zerbitzariari bidali me orri berri bat.
Aldatu dut zer dagoeneko nuen.
Ez nuen nire orria birkargatu, eta gauzak betiko aldatu,
beraz, hori handia.
Baina ez da, zalantzarik batzuk Eskuliburu erabiltzaile elkarrekintza parte hartzen.
AJAX teknika cool bat ahalbidetzen da orriaren eduki eguneratzeko digu,
eta ez bakarrik itxura eta sentitzen, berritu gabe.
>> Eta, bereziki dudanean orriaren eduki eguneratzeko esan,
Ez dut esaten berridatzi dugu orrialde Javascript erabiliz.
Esaten dut, egia esan, eskatzen dugu -informazioa gehiago
Gure orrialdea birkargatu beharrik gabe.
>> Orain dela apur bat moduko teknika aurreratuago
ari garela hitz egin Bideo honetan buruz.
Elkarrekintza batzuk izan behar gara.
Baina egiten dugun, ez dut nahi izan joan web zerbitzariak eskaerak egiteko.
Kasu honetan, besterik zer da Nire Apache web zerbitzari exekutatzen.
Noa egiteko osagarriak eskaerak web orri bat bisitatzen ari naiz berriz,
baina nire orria ez du freskatu.
>> Besterik joan asinkronikoki eguneratu nire orrialdera.
Eta hori da, hain zuzen ere, bertan AJAX dago,
Asynchronous JavaScript and XML da.
XML markatzaile beste mota bat da hizkuntza, eta ordena ditzakezu
Ondo pentsatuta besterik HTML bezala.
Ez da gauza bera nahiko, baina funtsean, besterik markaketa lengoaia bat.
Beraz asynchronous bat da Ikusteko Javascript-a eta markaketa lengoaia bat.
>> Beraz, ordena hau erabili ahal izateko AJAX teknika honetan AJAX
Ez da programazio hizkuntza bereizi bat.
Besterik moduko da techniques-- dugu multzo
berezi bat sortu behar Javascript objektu,
da XMLHttpRequest izenekoa.
Orain, oso erraza da hori egin ahal izateko.
Esan besterik ez dugu var, edozein dela Objektu hau deitu nahi dugu,
XMLHttpRequest new berdin.
Eta orain, orain lortzen dugu AJAX objektu moduko bat,
edo XMLHttpRequest bat objektu, eta horrek aukera emango dizu
to asinkronikoki eguneratu digu gure orrian.
>> Berri honen ahaztuak ditugu ondoren objektu, XMLHttpRequest honetan,
zerbait egin behar dugu bere onreadystatechange portaera.
Onreadystatechange portaera benetan besterik
denean eskaera bat egin duzu Web orri batean, orriaren
hainbat urrats pasatzen.
Lehenik eta behin, eskaera bat ez bidali da.
Ondoren, eskaera izan bidaliko du, baina ez du jokatu gainean.
Ondoren eskatuta gaipean.
Ondoren, eskaera da atzera bidaltzen ari duzu.
>> Ondoren, eskaera da zure orrian guztiz kargatu.
Horiek eskari ezberdinak dira.
Eta, beraz, gure ezarri behar dugu XMLHttpRequest objektu berria
denean prest egoera aldaketak aldatzeko.
Eta normalean, hau egiten dugu arabera Funtzio anonimoak, definitzeko bertan
bertatik ezagutzen gara Ikusteko Javascript-a orain, hori
dago deitu prest egoera aldaketak.
Benetan ez askoz hori baino gehiago ere.
Besterik ez gara izango bat definituz joan funtzio anonimoak, ordenatzeko gustatzen
ere ari gara egiten Ikusteko Javascript-a, non genuke
funtzio anonimoa dute bat erantzuteko click on,
edo mapa bat egiten ari ginen denean objektu ezberdinak sorta bat.
>> Zerbait gertatu denean Zerbait sakatu.
Kasu honetan, besterik ez da zerbait da gertatzen denean, gure orriaren egoera
aldaketak.
Badira beste bi ezaugarri direla sort- Oraindik ez dute
direla propietate bakarrik XMLHttpRequest berezkoa,
baina nahiko garrantzitsuak direnak dira.
Ez da, readyState izeneko zerbait, horrek ziurrenik asmatzea da
to onreadystatechange lotuta dago.
Benetan azaltzen dizugu readyState zein den.
0, 1, 2, 3, eta 4 dira aukerei han,
eta ordenatu zuten, gutxi gorabehera dagozkie zer
I besterik ez duela bigarren buruz hitz egiten.
>> Eta gero, egoera, eta horrek espero dena joan zen OK bada,
200 da, hau da, labur Ba, jakina, OK,
bertan http ezagutzen ari gara.
Beraz, espero ari gara, gure prest egoera lau da, eta gure status 200 da.
Eta gure prest egoera badu lau, eta erantzuna da
da gainean jarriko prest orrialdea, eta egoera 200 da,
egin ahal izan dugu dena behar bezala,
orain asinkronikoki ahal dugun eguneratzeko gure orria
freskatuz beharrik gabe haren eduki osoa.
>> Definitu dugu ondoren gertatzen dena onreadystatechange portaerara,
eta dugu hautatuta dagoela readyState 4 da eta status 200 da,
ondoren, egin behar dugun guztia da ireki, asinkronoak
eskaera, besterik ez da egiten http oro har lortzeko eskaera.
Just egiten programazioaren, gure web nabigatzailea ordez.
Eta, ondoren, eskaera bat bidaltzen dugu.
Beraz, zer egiten duen honetan, agian, itxurarik testuinguruan?
Hortaz, hona hemen funtzio bat dela AJAX eskaerak jorratzen.
ONDO DA?
Eta arbitrarioki esan dut argumentu bat onartu egiten du.
Eta moduko bat honetan Hezurdura general hemen.
Oso hasieran, lortuko dugu geure XMLHttpRequest objektu berri bat.
Ondoren, ezarri behar dut onreadystatechange portaera.
Eta beraz, ez dut esango denean readyState aldaketak,
Funtzio hau deitu nahi dut.
>> Zein da galdetzera joan Galdera, readyState bada
4 da, readyState aldaketarik 4 izan nahi du, eta egoera 200 izan zen,
hain arrakastatsua eskaera bat izan genuen, I orriaren den zerbait egin nahi.
Eta begirada bat hartuko dugu adibide bat zer
Zerbait agian bigarren bat ere izan.
Beraz, orain definitu dut Nire funtzio anonimoak,
Nire erantzunaren funtzioa, betiere readyState aldaketak.
>> Beraz, ondoren, ireki bat behar besterik ez dut eskatzeko, Open metodoa erabiliz.
Eta gero, eskaera bat bidaltzen dut.
Eta dezagun begirada bat hormigoizko adibide bat gehiago
zer of AJAX gure web orrietan egin dezake.
Beraz, oso erraza da hemen I home.html izeneko orria.
Eta lortu dut informazio bat doa goitibeherako menu nolabaiteko hemen eta.
>> Eta berriro egingo dugu hau bigarrena da.
Baina uste dut orain hartu behar dugu bat benetako iturburu-kodea begiratzeko.
Eta, beraz, naiz ireki home.html joan nintzen.
Eta ikusiko dugu zer gertatzen den.
Beraz, oso goian hemen at, daukat JavaScript gauza batzuk hori gertatzen da.
>> Eta hemen, antza denez, ez daukat div horren izena da infodiv,
eta informazio batzuk han joan behar.
Eta gero daukat formulario hau.
Eta honen barruan Inprimakia, zerbait behar dut
Aukeratu bat, izeneko besterik goitibeherako menu bat da
Aukera ezberdinak sorta batekin.
Eta itxuraz aldatzen denean, betiere aukeratutako aukera du
aldatu, deitzera noa cs50Info funtzio batzuk,
eta gero noa joan this.value gainditu,
Bertan honetan aipatzen zein aukera izan zen hautatutako,
eta balio hauetako bat aukera dago hemen, balio = berdinen hutsik, "blumberg,"
"Bowden," "Chan," eta "MALAN."
>> Beraz, zer benetan gertatuko hemen, ez dut hau?
Beno, dezagun bat blumberg.html begiratzeko.
Antza denez, besterik ez da Html batzuen mozkina.
Eta hain zuzen ere, zer espero dut Hemen gertatuko joan
hau da, naiz konektatu ahal izango da Html hau zuzenean nire web orri batean
freskatuz beharrik gabe orrialdean, adibidez, hori
Aukeratu dut Hannah Goitibeherako bertatik menu, Hannah buruzko informazioa,
bereziki, informazio honetan Hemen blumberg.html ere,
horixe erakusten orrian.
Eta ez daukat freskatzeko.
Eta norbaiti aukeratu nuen ez bada, beren informazioa erakusteko sortu litzateke.
Nola egin behar dut?
Berriz ere, hau egin behar da AJAX batzuk erabiltzeko aukera ematen digu.
Eta, beraz, ireki egingo dugu ajax.js.
Eta hemen cs50Info funtzioa hau da,.
Izen ezer ez badago, itzuliko naiz.
Ez dut ezer egin nahi izanez gero Aukera empty aukeratu da.
Bestela, noa XMLHttpRequest berri bat sortzeko.
Eta ondoren, naiz esan, orduan, readyState aldaketak, deitu funtzio hau.
>> Eta readyState bada 4 eta estatusa 200 da,
Hemen da pixka bat jQuery on line 13.
Baina guztiak egiten ari naiz esaten, infodiv edukia aldatzeko
edozein dela ere itzuli dut bat bezala izan nahi du Nire HttpRequest erantzuna.
>> Zein da nire HttpRequest?
Beno, hori da Hemen 18 lerro eta 19.
18 Line, naiz funtsean prestatzen dut bat lortzeko izen + .html eskaera.
Eta berriro ere, izena hemen da Argumentu zela
pasa cs50Info den parametro gisa.
>> Beraz, funtsean, norbaiten Nago pasatuz izendatzeko, hain zuzen, aukeren multzo horretan
ikusi dugun batean goitibeherako menu formularioa.
Naiz izen hori lortzean dut.
Eta esaten dut dizut nahi den mesedez lortzeko niretzat fitx.html-n hori,
eta, gero, bidali eskaera hori.
>> Eta beraz onreadystatechange hori joan entzuten eta zain eta zain egon behar
eta, zain readyState arte 4 da, eta egoera 200 da.
Beraz zerbitzatzen prest da, eta eskaera arrakastatsua izan zen.
Eta gero, hau da, bada, nik joan infodiv edukia aldatzeko
erantzun testua itzuli dut izan.
>> Beraz, ikus dezagun nola hau benetan lan.
Beraz buru izango gorako dugu nire nabigatzailea leiho, eta hemen begiratu dugu.
Beraz, dezagun begirada bat zer gertatzen da hemen AJAX ere.
Beraz, norbait aukeratu beharko dugu Goitibeherako menuan.
Beraz, kasu honetan, dezagun besterik aukeratu Hannah.
Eta nabarituko Hannah Informazio aldatu egin da,
baina ez nuen izan edozein my Orri inoiz ez zituen freskatuz.
Stuff geratu.
Gauza gehienak geratu.
AJAX proba ez zen aldatu.
Botoi bera, hau goitibeherako menu ez zen aldatu.
Baina informazio ez zen aldatu.
Eta nola arabera Azkar mugitzen nire ordenagailua,
zuk benetan dezakezu edukia ikusi desagertu egiten da eta, ondoren, berriro agertzen benetan
azkar.
Edukia egotea infodiv ezabatuko,
eta, ondoren, bere ordez zelairatuko batekin eskaera asynchronous berria.
>> Beraz pizten badu esan behar da, Rob-- eta berriro, begirada bat,
eta, agian, ez dugu hura benetan ikusiko desagertu eta berriro ager azkar.
Hori ikusten duzu?
Nola idatz besterik ez da kanpoan, eta gero betetzen da?
Hori AJAX eskaera egin gertatzen ari moduko.
Eta horrela arabera Pertsona, aukeratu nuen naiz
ezberdinak asynchronous bat egiteko fitxategi ezberdin eskaera
Nire zerbitzari izan dudala.
Eta edukiekin nire infodiv eguneratzen ari,
oinarritutako horiek aukeratu dut horren gainean.
Beraz, hori da benetan ez AJAX da.
Asynchronous hauek egiteko aukera ematen digu eskaerak, orri bat eguneratu den.
Beharrik gabe Orrialde osoa freskatu,
berriak lortzeko goaz eduki bertatik eginez
zerbitzariari eskaera freskoa berri bat.
Eta, beraz, gure orriak bihur daiteke pixka bat gehiago nahiko dinamikoa.
>> Eta gehiago lortuko dugu eta aurreratuagoak, zuk
bezalako gauzak egin daitezke, esan, posta elektronikoa,
Bertan, ez duzu ezer egin behar.
Ez daukazu a Ezkutatu goitibeherako menu edo sakatu ezer,
eta bat-batean, zure berriena email erakusten goialdean.
Hori da, gainera, besterik Ajax eskaera.
Ajax eskatzen ari da zure zerbitzaria, e-posta zerbitzaria,
den informazio guztia baino gehiago bidaltzeko zure azken mezu elektronikoak buruz,
eta aldatzen zer ikusten duzu on pantaila zure emailak multzo berriena izan.
Eta beste bat baldin baduzu han, gero div horren edukia
hausnartzeko aldatuko da eguneratzen edukia.
Naiz Doug Lloyd.
Hau CS50 da.