[SKAN MŪZIKA ]
DAGS LOIDS: Turpinot JavaScript izpēti, ir vēl viens paņēmiens, kas
patiešām varētu noderēt, kad sākat veidot sarežģītākas tīmekļvietnes,
tas ir, izmantojot kaut ko, ko sauc par Ajax.
Līdz šim, izpētot JavaScript, vizualizācijas nolūkos esam veikuši
tikai dažas ļoti vienkāršas darbības, piemēram, jūs noklikšķināt uz
pogas, un kaut kas notiek.
Iespējams, jūsu vietnē mainās krāsa vai arī daži vārdi mainās.
Taču viss, ko mēs līdz šim esam darījuši, ir bijis klientu pusē.
Tas viss notiek mūsu datorā.
Mēs nekad īsti nerunājam ar ārpasauli.
Tomēr mēs varam runāt ar ārpasauli un veikt izmaiņas savā
tīmekļvietnē, kaut kas notiek, kas mijiedarbojas ar serveri, bet
varbūt tas nepārlādē visu mūsu lapu.
Mēs vēlamies radīt patīkamāku lietotāja pieredzi.
Ajax ļauj mums to izdarīt.
Ajax apzīmēja kaut ko, ko sauc par asinhrono JavaScript iekš XML.
Tas ir bakronīms.
Tā vairs to īsti nesauc.
Un patiesībā, visbiežāk tagad XML vietā mēs izmantojam JSON.
Bet Ajax ir bijis tikai nosaukums, kas tehnikai ir savā veidā
iestrēdzis.
Un tas, ko Ajax ļauj mums darīt, ir būtībā pārlādēt mūsu lapas
sadaļas bez visas lapas.
Un, piemēram, ja esat kāds, kas seko sportam, jūs to varat redzēt, ja
atrodaties sporta vietnē, kurā tiek atjauninātas daudzas pašlaik
notiekošās spēles, bet visa lapa netiek pārlādēta.
Tas nozīmē, ka lapa pamatā izmanto Ajax priekšrocības, lai
atjauninātu tikai nelielas lapas daļas.
Paņēmieni, ko varat izpildīt ar Ajax, ir diezgan neierobežoti.
Ar to jūs varat paveikt daudz dažādu lietu.
Un mēs koncentrēsimies uz ļoti konkrētu piemēru, kur mēs atkal
noklikšķinām uz pogas un kaut kas notiek.
Taču atšķirība ir tāda, ka šoreiz, kad kaut kas notiek, mēs veicam
servera pieprasījumu.
Mēs veicam izejošu pieprasījumu no lapas.
Tas nenotiek tikai mūsu mašīnā.
Taču varat veikt tādas darbības kā atjaunināt, piemēram, sporta
rezultātus tīmekļvietnē, kas izseko šo informāciju vai jūsu e-pastu.
Iespējams, pamanīsit, ka dažreiz, kad saņemat jaunu e-pasta ziņojumu,
viss jūsu lapas pamatteksts tiek pārlādēts, lai jaunais e-pasta
ziņojums tiktu ievietots iesūtnes augšdaļā, taču visa lapa netiek
pārlādēta.
Tas notiek arī ar Ajax.
Bet tas pastāvīgi darbojas visu laiku.
Tas tikai būtībā vaicā bezgalīgi.
Mēs atkal koncentrēsimies tikai uz pogas noklikšķināšanu, un kaut kas
notiek, taču tas mūsu mašīnai vairs nav tikai vietējais .
Tātad, lai to izdarītu, mums ir jāizveido vēl viens īpašs JavaScript
objekta veids, ko sauc par XMLHttpRequest.
Un tas ļauj mums padarīt to asinhronu, nevis vienlaikus ar lapas
pārlādēšanu vai lapas ielādi, bet kaut kad pēc tam, kad mēs joprojām
atrodamies lapā.
Tas ir tas, ko mēs domājam, sakot asinhroni.
tas ļauj mums veikt asinhronu pieprasījumu serverim, lai iegūtu
vairāk informācijas.
Par laimi, to ir ļoti viegli izveidot.
Piemēram, šī rindiņa izveidotu jaunu x apjoma HTTP pieprasījuma
objektu.
Un šajā gadījumā es vienkārši saucu šo xhttp un piešķiru to tikai
nejaušam, lokālam JavaScript mainīgajam.
Kad objekts ir izveidots, vispirms ir jādefinē gatavības stāvokļa
maiņas darbība.
Gatavības stāvokļa maiņa patiesībā ir tikai vārdisks veids, kā
aprakstīt darbības, kas notiek, kad apmeklējat lapu.
Piemēram, jūs noklikšķiniet uz — atrodaties lapā.
Jūs pārlādējat lapu.
Viss uz sekundi pazūd, pēc tam daži dati sāk aizpildīties.
Un tad tas pārstāj pārlādēt, un jūs esat gatavs doties.
Tas notiek vairākos dažādos stāvokļos, kad pieprasījums nav uzsākts
līdz pieprasījuma nosūtīšanai un pieprasījums ir saņemts, līdz
pieprasījums ir ceļā atpakaļ pie jums, un tad pieprasījums ir
pabeigts.
Tās ir, piemēram, dažas dažādas stāvokļa izmaiņas, kas var notikt,
kad apmeklējat vietni.
Un tās būs arī stāvokļa izmaiņas, kas notiks, atjauninot mazāku
vietnes sadaļu.
Parasti mēs definējam kaut ko, kam ir jānotiek, kad stāvokļa maiņa
izmanto anonīmu funkciju.
Un mēs redzēsim piemēru tam pēc mirkļa.
Mums nav jāpiešķir šai funkcijai nosaukums, mēs vienkārši vēlamies,
lai tā kaut ko darītu ikreiz, kad tā konstatē kādas izmaiņas vietnes
ielādes statusā.
Ir pieci dažādi stāvokļi.
Tie ir no 0 līdz 4.
Tā ir gatavības stāvokļa īpašība, tāpēc tā ir daļa no gatavības
stāvokļa maiņas.
Tas ir skaidri saistīts.
Un tas ir tas, ko es principā tikko aprakstīju, kur 0 ir pieprasījums
vēl nav inicializēts un 4, kas ir beigas, kas ir gatavības stāvokļa
maiņas pieprasījuma vai Ajax pieprasījuma galvenais mērķis ir panākt,
lai šis readyState ir 4, kas būtībā nozīmē, ka visi tie ir ielādēti.
Un, cerams, statuss, ko mēs atgūsim, ir 200.
Tās ir divas lietas, par kurām mēs patiešām rūpējamies.
Mēs vēlamies pārliecināties, ka tad, kad mūsu Ajax pieprasījums ir
pabeigts, readyState ir 4, tātad dati ir saņemti un dati tika saņemti
labi.
Iespējams, atceraties, ka 200 ir HTTP kods priekš OK.
Tas bija tas, ko mēs, par laimi, nekad neredzējām.
Mēs neapmeklējām tīmekļvietni un nesaņemam — jūs neapmeklējat
tīmekļvietni un nesaņemat 200, kā, piemēram, jūs saņemat 404.
Tāpēc mēs galu galā vēlamies, lai readyState būtu 4 un statuss būtu
200.
Šādā gadījumā mēs varam atjaunināt savu vietni.
Kad tas ir iegūts, mums vienkārši jāatver pieprasījums un jānosūta
pieprasījums.
Un tad mūsu vietne tiks pārlādēta.
Atkal mēs redzēsim ļoti konkrētu piemēru tam tikai minūtes laikā.
Tātad, ja tas nav skaidrs tieši tagad, cerams, tas būs tad, kad mēs
sāksim redzēt kādu kodu un jūs redzēsit, kā šī mijiedarbība notiek
reāli tīmekļvietnē.
Es vēlos vēlreiz norādīt, ka ir ļoti nedaudz atšķirīgs veids, kā to
izdarīt sintaktiski, izmantojot jQuery.
Un patiesībā mūsdienās ļoti bieži redzēsit Ajax pieprasījumus, kas
tiek veikti, izmantojot jQuery.
Mēs skaidri rādām jums šo tīro JavaScript versiju, lai jūs to redzētu.
Bet, kad kļūst ērtāk izmantot jQuery klienta puses skriptēšanai,
piemēram, DOM manipulācijām vai Ajax pieprasījumam jūs, iespējams,
redzēsit š sintaksi nedaudz citādāk.
Tātad šeit ir JavaScript funkcija, kas sagatavo, atver un nosūta Ajax
pieprasījumu.
Tāpēc pirmā lieta, ko es darītu, ir izveidotu savu jauno
XMLHttpRequest, un es atkal piešķiršu nejaušam mainīgajam, ko šoreiz
sauc par aj priekš Ajax.
Pēc tam es definēšu funkciju, kas tiks izpildīta, mainot readyState.
Tātad katru reizi, kad mainās readyState, šī funkcija tiks izpildīta.
Bet, kā redzat, tas patiešām kaut ko darīs tikai tad, kad readyState
ir 4 un statuss ir 200.
Tātad tas notiks — šī funkcija tiks izpildīta katru reizi, kad
mainīsies stāvoklis, taču tā būs jēgpilna darbība tikai tad, kad
readyState būs 4 un statuss — 200.
Konkrētu piemēru tam mēs redzēsim pēc mirkļa, kad mēs atjaunināsim
mūsu vietnes sadaļu ar dažādiem fotoattēliem un informāciju.
Kad tas būs izdarīts, mēs atvērsim savus XML pieprasījumus vai Ajax
pieprasījumus.
Tas ir tikai vienkāršs veids, kā to izdarīt.
Mēs pamatā veidojam konkrēta URL GET pieprasījumu.
Neuztraucieties par to, ko nozīmē patiess.
Un tad mēs vienkārši nosūtīsim šo pieprasījumu.
Tātad, atkal jūs visbiežāk redzēsit, ka tas ir rakstīts jQuery, nevis
tīrā JavaScript.
Tātad, ja vēlaties uzzināt mazliet par to, kā to izdarīt, varat
apskatīt šo URL šeit.
Bet pagaidām pievērsīsimies IDE un apskatīsim šo piemēru darbībā,
veicot Ajax pieprasījumus serverim, kur serveris darbojas lokāli manā
datorā, lai redzētu, kā mēs varam asinhroni mainīt lapu.
Tātad, ja lejupielādējat pirmkodu, kas iekļauts šajā short, un tajā
atverat index.html, jūs atradīsit lapu, kas izskatās šādi, ko sauc
par Ajax test.
Sadaļā ir nolaižamā izvēlne, kurā teikts, ka informācija ir šeit.
Pēc sekundes redzēsim, ko tas nozīmē.
Pagaidām es netaisos pie tā ķerties.
Es vēlos jums parādīt, kas ir aizkulisēs, pirms mēs to aplūkojam.
Tātad šeit ir pirmkods tam.
Šeit, augšā es
ielādēju jQuery, jo arī šajā gadījumā es izmantošu nedaudz jQuery,
lai jums radītu priekšstatu.
Man ir savs JavaScript skripts, ko es uzrakstīju, ar nosaukumu
Ajax.js, mēs to apskatīsim pēc mirkļa.
Šeit jūs redzēsit, ka informācija, ko mēs tikko skatījāmies vietnē,
ir div, kuras ID ir infodiv.
Tas būs ļoti svarīgi pēc minūtes.
Un tad man ir form, kurā man ir pāris dažādi varianti.
Un, kad kaut kas notiek, it īpaši, ja mainās vērtība, kad es sarakstā
atlasu citas opcijas, es izsaukšu šo funkciju cs50info un pēc tam
nododu parametru this.value.
Iespējams, no mūsu video par JavaScript atceraties, ka tas ir veids,
kā pašam atsaukties uz notikumu, kas vispirms aktivizēja JavaScript
funkcijas izsaukšanu.
Tātad šis ir cits notikumu apstrādāšanas veids, pretēji on click, tas
ir on change.
Un tas ļaus man noskaidrot, kura no opcijām izraisīja izmaiņas.
Un es ņemšu this.value, tātad to es domāju ar vērtību, vai es iegūšu
šo informāciju.
Tātad, ja es no šī saraksta izvēlos Robu Boudenu, būtībā es nododu
CS50 informāciju .
Un tad vērtība, kas faktiski tiek nodota šai funkcijai, ir bowden.
Tie visi ir ar mazajiem burtiem - chan, malan un zlatkova. Tātad
tās ir dažādas lietas, kas tiks nodotas šai CS50 informācijas
funkcijai.
Ko dara šī CS50 informācijas funkcija?
Apskatīsim Ajax.js.
Šeit ir CS50 informācija, ja name ir tukšs, ja es neizvēlējos kādu no
faktiskajām opcijām, ja es tikai izvēlējos noklusējuma opciju
augšpusē, iespējams, jūs to zināt, izmantojot nolaižamās izvēlnes,
kur ir tukša vieta, un jums tiešām kaut kas ir jāizvēlas — es
atgriežos.
Es neko nedaru.
Es nevēlos mēģināt darīt neko smalku.
Pretējā gadījumā es izveidoju XMLHttpRequest.
Mēs to redzējām slaidos pirms brīža.
Un es definēju funkciju, kas gaidīs, līdz readyState būs 4 un statuss
būs 200.
Un kad tas notiek, kad tas ir tur, ko es vēlos darīt?
Es vēlos atjaunināt HTML informāciju iekš infodiv.
Šis ir jQuery veids, kā to aprakstīt.
Šī ir jQuery rinda, ko jūs redzēsit šajā — pārējā daļa ir JavaScript,
šī ir jQuery — neatkarīgi no tā, ko es saņemšu no sava Ajax
pieprasījuma.
Atcerieties, ka es vēl neesmu pilnībā iesniedzis Ajax pieprasījumu.
Tas būs tieši šeit, ar open un send.
Bet, kad es to darīšu, es atgūšu datus un atjaunināšu visu HTML no
infodiv , kas sākumā bija information goes here — tas bija starp div
tagiem.
Es to mainīšu uz to, ko saņemšu atpakaļ savā pieprasījumā.
Bet es to darīšu, neatjauninot visu lapu.
Es gatavojos pārlādēt, tā teikt, tikai to div, tikai to lapas sadaļu.
Tātad, kādu failu es atveru?
Nu, es nosūtu GET pieprasījumu priekš name plus .HTML.
Atcerieties, ka name ir tikai vērtības nosaukums, mainīgais, kas šeit
tiek nodots kā parametrs.
Tātad tas ir name.
Tātad name būs Boudens vai Čan, Meilans vai Zlatkova. Un
acīmredzot, es pievienošu .HTML tā beigās.
Nu, pēc kā izskatās viens no šiem?
Nu, tas izskatās pēc sava veida HTML fragmenta.
Acīmredzot tas nav pilnīgi pareizs HTML, jo man nav HTML tagu tā
augšpusē un apakšpusē.
Tam apkārt nav body tagu.
Bet tas ir mazliet HTML.
Tajā ir rindkopa ar name, attēla tags un vēl pāris rindkopas ar
informāciju.
Tātad, apskatīsim to reāli darbībā un redzēsim, ko tas dara.
Tātad šobrīd man ir Ajax testi.
Un atcerieties, kad es izvēlos opciju, šī funkcija izpildīs šo CS50
informācijas funkciju, nododot to, ko es izvēlos.
Tāpēc izvēlēsimies Zamailu.
Tātād ievērojiet, ko tas šeit darīja.
Šeit parādījās visa šī informācija no mūsu lapas.
Tur ir tas Zamailas tags.
Tātad es uz mirkli atgriezīšos pie ID.
Mums ir rindkopa ar viņas vārdu, attēlu, 2014. gada klasi un Winthrop
House.
Patiešām, visa šī informācija tagad ir šeit.
Bet kas notiks, ja es to mainīšu?
Es nevēlos, lai visa mana lapa tiktu pārlādēta, taču es vēlos, lai
mainītos šī div saturs.
Tāpēc mēģināsim pārslēgt to uz, piemēram, Robu.
Un, ja paskatās ļoti uzmanīgi un atkarībā no tā, vai mans dators ir
nedaudz lēnāks vai ātrāks, jūs varat ātri redzēt, ka viss saturs tiek
izdzēsts un pēc tam aizstāts.
Tas ir asinhronais pieprasījums, kas notiek ļoti ātri.
Tātad, paskatīsimies, vai mēs to varam redzēt.
Jūs, iespējams, pamanījāt, ka viss tika izdzēsts un pēc tam
atgriezās, taču tagad man ir jauni dati, jo es izvēlējos jaunu opciju
no saraksta.
Atcerieties, ka, ja es izvēlos Select Someone, nekas nenotiks.
Es nekavējoties atgriezos, tāpēc tas neatgriežas pie information goes
here, lai gan es varēju rakstīt funkciju citādi, lai to izdarītu.
Bet es varu vienkārši veikt šos dažādos asinhronos pieprasījumus, un
tas turpinās atjaunināt informāciju, ko redzu lapā, nepārlādējot visu
lapu, tikai to sadaļu, kas man ir svarīga.
Tātad tas ir diezgan forši.
Tagad mēs varam ne tikai mainīt lietas lokāli mūsu iekārtā,
vienkāršas lietas, piemēram, krāsas, bet arī tagad varam nosūtīt
izejošos pieprasījumus serveriem.
Un tiem pat nav jābūt serveriem, kas darbojas lokāli.
Iespējams, es varētu iegūt informāciju no Yahoo Finance, ja vēlos
asinhroni iegūt datus no Yahoo Finance.
Varbūt es to izdarīšu un ielādēšu savā lapā, un tā būs informācija,
kas tiek pastāvīgi atjaunināta, jo, iespējams, man ir atšķirīgs datu
parādīšanas veids vai kaut kas cits.
Tātad tā ir interesanta jauna stratēģija, kas ir mūsu rīcībā.
Mēs varam nosūtīt pieprasījumus lokāli.
Mēs varam nosūtīt izejošos pieprasījumus uz citiem serveriem un
patiešām izmantot priekšrocības, ko sniedz labākas lietotāja
pieredzes radīšana, izmantojot Ajax.
Es esmu Dags Loids.
Šis ir CS50.