[MUSIC PLAYING]
>> DOUG LLOYD: Bel蓹 ki, bir daha anlay谋艧谋 sort ki,
sort dam谋 alt谋nda d眉艧眉r JavaScript AJAX deyil蓹n bir 艧ey var.
Bu bax谋mdan q蓹d蓹r, bizim JavaScript qar艧谋l谋ql谋
bir t蓹kan m蓹hdud olmu艧dur d眉ym蓹sin蓹 bas谋n v蓹 bir 艧ey olur.
V蓹 x眉susi, olur ki, bir 艧ey
Bizim web baxmaq v蓹 d蓹yi艧iklikl蓹r hiss edir.
Sa臒?
X眉susil蓹 kimi, s蓹n蓹d obyekt model video,
M蓹n fon r蓹ngi d蓹yi艧di.
Hesab edir蓹m ki, n蓹 zaman, m蓹n yox idi H蓹r hans谋 bir x眉susi 蓹lav蓹 sor臒u etm蓹k.
Hesab edir蓹m ki, t蓹l蓹b yox idi server m蓹n蓹 yeni bir sayt谋n g枚nd蓹rin.
M蓹n yaln谋z m蓹n art谋q n蓹 d蓹yi艧di.
M蓹n s蓹hif蓹 yeniden yox idi v蓹 h蓹r 艧eyi m眉tl蓹q d蓹yi艧ib
bel蓹 ki, b枚y眉k deyil.
Amma m眉tl蓹q var bir manual istifad蓹莽i qar艧谋l谋ql谋 c蓹lb.
AJAX imkan verir ki, s蓹rin texnika Biz蓹 bir sayt谋n content yenil蓹m蓹,
v蓹 yaln谋z g枚r眉n眉艧眉n眉 v蓹 yeniden olmadan, hiss edir蓹m.
>> V蓹 x眉susi m蓹n bir sayt谋n m蓹zmununu yenil蓹nm蓹si dem蓹k,
M蓹n biz yeniden yazmaq demir蓹m JavaScript istifad蓹 s蓹hif蓹.
Edir蓹m ki, biz, h蓹qiq蓹t蓹n, xahi艧 deyir蓹m server daha 莽ox m蓹lumat
Bizim s蓹hif蓹 yeniden olmadan.
>> Bir az art谋q ki, sort daha inki艧af etmi艧 bir texnika
biz dan谋艧maq olacaq ki, Bu video haqq谋nda.
Biz b蓹zi qar艧谋l谋ql谋 olacaq.
Biz n蓹 zaman, m蓹n gedir蓹m web server sor臒u edilm蓹si.
Bu halda, yaln谋z n蓹 var M蓹nim Apache web server 莽al谋艧谋r.
M蓹n 蓹lav蓹 edilm蓹si 眉莽眉n gedir蓹m sor臒u M蓹n bir web page ziyaret al谋ram is蓹
lakin m蓹nim s蓹hif蓹 yenilemek deyil.
>> Bu, sad蓹c蓹 olacaq asynchronously m蓹nim s蓹hif蓹 yenil蓹m蓹.
V蓹 蓹slind蓹, var AJAX 眉莽眉n dayan谋r,
Asynchronous JavaScript and XML edir.
XML bi莽imlendirme ba艧qa c眉r deyil dil, v蓹 siz d眉zm蓹k bil蓹r
Yaln谋z HTML kimi d眉艧眉n眉n.
Bu, tamamil蓹 eyni 艧ey deyil, lakin Bu, 蓹sas蓹n yaln谋z bir bi莽imlendirme dili var.
Bel蓹 ki, bir asinxron var JavaScript v蓹 bi莽imlendirme dili.
>> Bel蓹 ki, bu istifad蓹 etm蓹k 眉莽眉n AJAX technique-- AJAX
ayr谋 proqramla艧d谋rma dili deyil.
Bu yaln谋z sort var techniques-- biz set
x眉susi yaratmaq laz谋md谋r JavaScript obyekt olan
bir XMLHttpRequest adlan谋r.
陌ndi bunu etm蓹k 莽ox asand谋r.
Biz yaln谋z dem蓹k var, n蓹 bu obyekt z蓹ng etm蓹k ist蓹yir蓹m,
yeni XMLHttpRequest b蓹rab蓹rdir.
陌ndi biz indi 蓹ld蓹 obyektin bir AJAX sort,
v蓹 ya XMLHttpRequest imkan verir obyekt,
Biz蓹 asynchronously bizim s蓹hif蓹 yenil蓹m蓹k 眉莽眉n.
>> Bu yeni kazan谋lm谋艧 sonra obyekt, bu XMLHttpRequest,
biz bir 艧ey var onun onreadystatechange davran谋艧.
Onreadystatechange davran谋艧 h蓹qiq蓹t蓹n yaln谋z
Bir sor臒u etm蓹k zaman bir web page, s蓹hif蓹
add谋mlar bir s谋ra ke莽ir.
Birincisi, sor臒u g枚nd蓹rilm蓹di.
Sonra t蓹l蓹b olmu艧dur g枚nd蓹rdik, lakin sonra 莽谋x谋艧 deyil.
Sonra t蓹l蓹bi 眉z蓹rin蓹 h蓹r蓹k蓹t蓹 ke莽di edilmi艧dir.
Sonra t蓹l蓹b edir siz蓹 geri g枚nd蓹rilir.
>> Sonra t蓹l蓹b edir tam s蓹hif蓹 y眉kl蓹ndi.
Bu m眉xt蓹lif d枚vl蓹tl蓹rdir.
V蓹 bel蓹 ki, biz m眉蓹yy蓹n etm蓹k laz谋md谋r yeni XMLHttpRequest obyekt
zaman haz谋r d枚vl蓹t d蓹yi艧iklikl蓹r d蓹yi艧dirm蓹k 眉莽眉n.
V蓹 ad蓹t蓹n, biz bunu anonim funksiyas谋 m眉蓹yy蓹n olan
biz il蓹 tan谋艧 edirik 陌ndi JavaScript ki,
zaman haz谋r d枚vl蓹t d蓹yi艧iklikl蓹r adlan谋r.
Bu daha h蓹qiq蓹t蓹n 莽ox deyil 莽ox var.
Biz yaln谋z bir m眉蓹yy蓹n olacaq anonim funksiyas谋 sort ist蓹yir蓹m n蓹
biz edirdik JavaScript, biz
anonim funksiyas谋 var klik bir cavab,
v蓹 ya biz bir x蓹rit蓹 bunu zaman bir s谋ra m眉xt蓹lif obyektl蓹ri.
>> Something zaman ba艧 bir 艧ey t谋klayan edilib.
Bu halda, yaln谋z bir 艧ey deyil var ba艧 zaman bizim s蓹hif蓹nin d枚vl蓹t
d蓹yi艧iklikl蓹r.
Iki x眉susiyy蓹tl蓹ri var sort of-- onlar deyilik ki,
yaln谋z xass蓹l蓹ri XMLHttpRequest xas,
lakin onlar olduqca m眉h眉m olanlar谋 ist蓹yirik.
ReadyState deyil蓹n bir 艧ey var, siz y蓹qin ki, t蓹xmin ed蓹 bil蓹r kimi,
onreadystatechange il蓹 ba臒l谋 deyil.
Bu, h蓹qiq蓹t蓹n siz蓹 deyir readyState n蓹.
0, 1, 2, 3 v蓹 4 var orada imkanlar谋,
v蓹 onlar sort t蓹xmin蓹n uy臒un n蓹
M蓹n yaln谋z bir ikinci 蓹vv蓹l b蓹hs edirdi.
>> V蓹 sonra status hans谋 脺mid edir蓹m h蓹r 艧ey OK getdi 蓹g蓹r,
q谋sa olan 200 眉莽眉n, 蓹lb蓹tt蓹, OK,
biz http il蓹 tan谋艧 edirik ki.
Bel蓹likl蓹, biz 眉mid edirik ki, bizim haz谋r d枚vl蓹t D枚rd v蓹 bizim status 200.
V蓹 haz谋r d枚vl蓹t 蓹g蓹r D枚rd v蓹 cavab
qoymaq haz谋rd谋r s蓹hif蓹 v蓹 status 200,
biz bunu bacard谋q h蓹r 艧ey u臒urla,
indi biz asynchronously bil蓹r Bizim s蓹hif蓹 yenil蓹m蓹
yeniden olmadan Bunun b眉t眉n content.
>> Biz n蓹 m眉蓹yy蓹n sonra onreadystatechange davran谋艧,
v蓹 biz t蓹slim etdik readyState 4 v蓹 status 200
onda biz n蓹 etm蓹k laz谋md谋r b眉t眉n edir bir asinxron a莽maq
t蓹l蓹b, yaln谋z edir bir Http 眉mumiyy蓹tl蓹 sor臒u GET.
Just program bunu, yerin蓹 web browser vasit蓹sil蓹.
V蓹 sonra biz ki, sor臒u g枚nd蓹rin.
Bel蓹 ki, n蓹 b蓹lk蓹 bu yoxdur kontekstind蓹 kimi baxmaq?
Bel蓹 ki, burada bir funksiyas谋 var ki, AJAX sor臒u il蓹 m蓹艧臒ul olur.
OLDU?
M蓹n 枚zba艧谋na bildirib etdik Bu bir d蓹lil q蓹bul edir.
V蓹 bu bir n枚v Burada 眉mumi skelet.
脟ox 蓹vv蓹lind蓹, biz almaq 枚z眉m眉z眉 yeni XMLHttpRequest obyekt.
Sonra m蓹n t蓹yin etm蓹k laz谋md谋r onreadystatechange davran谋艧.
V蓹 m蓹n dem蓹k gedir蓹m zaman readyState d蓹yi艧iklikl蓹r
M蓹n siz蓹 bu funksiyas谋 z蓹ng etm蓹k ist蓹yir蓹m.
>> Xahi艧 edir ki, sual readyState 蓹g蓹r
readyState d蓹yi艧ib 蓹g蓹r 4 4 ola bil蓹r, v蓹 status 200 idi,
bel蓹 ki, biz M蓹n bir u臒urlu t蓹l蓹bi var idi s蓹hif蓹 bir 艧ey etm蓹k ist蓹yir蓹m.
V蓹 biz bir n蓹z蓹r laz谋md谋r n眉mun蓹 n蓹
bir 艧ey ikinci ola bil蓹r.
Bel蓹likl蓹, indi m眉蓹yy蓹n etmi艧ik M蓹nim anonim funksiyas谋,
m蓹nim cavab funksiyas谋 zaman readyState d蓹yi艧iklikl蓹r.
>> Bel蓹likl蓹 m蓹n yaln谋z bir a莽maq laz谋md谋r Open metodundan istifad蓹 t蓹l蓹b.
V蓹 sonra, m蓹n ki, sor臒u g枚nd蓹rin.
V蓹 bir n蓹z蓹r salaq daha konkret n眉mun蓹si
n蓹 AJAX bizim web pages ed蓹 bil蓹rsiniz.
M蓹n burada bir 莽ox sad蓹 var s蓹hif蓹 home.html 莽a臒谋r谋b.
M蓹n bir m蓹lumat gedir var burada a莽谋lan menyu bir n枚v.
>> V蓹 biz bir ikinci bu yenid蓹n laz谋md谋r.
Amma indi bir almaq laz谋md谋r faktiki m蓹nb蓹 kodu baxmaq.
Bel蓹likl蓹, m蓹n home.html a莽maq 眉莽眉n gedir蓹m.
V蓹 biz neler g枚r蓹c蓹ksiniz.
Burada 莽ox 眉st q蓹d蓹r ki, m蓹n ged蓹n b蓹zi JavaScript stuff.
>> V蓹 burada, m蓹n y蓹qin var kimin ID infodiv bir div,
v蓹 b蓹zi m蓹lumat orada getm蓹k gedir.
V蓹 sonra m蓹n bu forma var.
Bu daxilind蓹 formas谋, m蓹n bir 艧ey var
bir se莽in adlanan yaln谋z bir a莽谋lan menyu
m眉xt蓹lif variantlar谋 bir d蓹st蓹 il蓹.
V蓹 zaman d蓹yi艧iklikl蓹r y蓹qin zaman se莽ilib se莽imi var
d蓹yi艧di, m蓹n z蓹ng etm蓹k 眉莽眉n gedir蓹m bir funksiyas谋 cs50Info,
v蓹 sonra m蓹n gedir蓹m this.value ke莽m蓹k,
bu aiddir olan se莽im idi,
v蓹 d蓹y蓹ri, burada se莽im bu bir deyil value = b蓹rab蓹rdir bo艧 "Blumberg"
"Bowden", "chan" v蓹 "Malan."
>> Bel蓹 ki, n蓹 h蓹qiq蓹t蓹n bil蓹r M蓹n bunu zaman burada ba艧?
Yax艧谋, bir g枚t眉r蓹k blumberg.html baxmaq.
Yaln谋z bir var kimi g枚r眉n眉r B蓹zi HTML par莽as谋n谋.
V蓹 蓹slind蓹, m蓹n n蓹 眉mid edir蓹m burada ba艧 ver蓹c蓹k
M蓹n plug etm蓹k gedir蓹m ki, web page birba艧a bu Html
yeniden olmadan s蓹hif蓹 bu c眉r zaman
M蓹n a莽谋lan Hannah se莽in menyu, Hannah haqq谋nda m蓹lumat
X眉susil蓹 bu m蓹lumat burada blumberg.html da,
s蓹hif蓹 g枚st蓹rir n蓹.
M蓹n yenilemek 眉莽眉n yoxdur.
M蓹n ba艧qas谋 se莽tiyseniz onlar谋n informasiya g枚st蓹rm蓹k olard谋.
Bunu nec蓹 ed蓹 bil蓹r蓹m?
Yen蓹 d蓹, bu t蓹l蓹b Biz蓹 b蓹zi AJAX istifad蓹 etm蓹k.
V蓹 bel蓹 ki, biz ajax.js. a莽maq laz谋md谋r
V蓹 burada, cs50Info ki funksiyas谋 var.
Ad谋 bir 艧ey deyil, m蓹n qay谋tmaq.
M蓹n 蓹g蓹r bir 艧ey etm蓹k fikrind蓹 deyil蓹m bo艧 se莽imi se莽ilmi艧dir.
茝ks halda, m蓹n gedir蓹m yeni XMLHttpRequest yarad谋r.
V蓹 sonra m蓹n dem蓹k gedir蓹m readyState d蓹yi艧iklikl蓹r bu funksiyas谋 z蓹ng.
>> V蓹 readyState 蓹g蓹r 4 v蓹 status 200,
Burada bir az var line 13-d蓹 jQuery.
Amma deyib edir蓹m b眉t眉n, infodiv m蓹zmunu d蓹yi艧m蓹k
M蓹n geri alm谋艧d谋r n蓹 olmaq M蓹nim HttpRequest cavab.
>> M蓹nim HttpRequest n蓹dir?
B蓹li, do臒ru burada x蓹tti 18 v蓹 19.
Line 18, m蓹n 蓹sas蓹n haz谋rl谋q edir蓹m ad + Html 眉莽眉n sor臒u almaq.
V蓹 yen蓹, ad谋 burada idi arqument
cs50Info bir parametr kimi ke莽di.
>> Bel蓹 ki, 蓹sas蓹n, M蓹n kims蓹 nin ke莽蓹n edir蓹m variantlar谋 ki, set olan, ad谋
biz g枚rd眉k ki, a莽谋lan menyu 艧蓹klind蓹.
Hesab edir蓹m ki, ad谋n谋 al谋ram.
M蓹n sizi ist蓹yir蓹m dedi al谋ram m蓹nim 眉莽眉n file.html 蓹ld蓹 edin,
v蓹 sonra sor臒u g枚nd蓹rin.
>> V蓹 bel蓹 ki, onreadystatechange gedir dinl蓹m蓹k v蓹 g枚zl蓹m蓹 v蓹 g枚zl蓹m蓹 olmaq
v蓹 readyState q蓹d蓹r g枚zl蓹yir 4, v蓹 status 200.
Bel蓹 ki, xidm蓹t 眉莽眉n haz谋r v蓹 sor臒u u臒urlu oldu.
Bu 茝g蓹r V蓹 sonra, bu olacaq infodiv m蓹zmunu d蓹yi艧m蓹k
M蓹n geri alm谋艧d谋r cavab m蓹tn olmal谋d谋r.
>> Bel蓹 ki, nec蓹 bu g枚r蓹k i艧 bil蓹r.
Bel蓹likl蓹, biz m蓹nim brauzerinizin 眉z蓹rind蓹 r蓹hb蓹rlik laz谋md谋r p蓹nc蓹r蓹, v蓹 biz burada baxmaq laz谋md谋r.
Bel蓹 ki, bir n蓹z蓹r salaq n蓹 AJAX burada olur.
Bel蓹likl蓹, biz kims蓹 se莽蓹 bil蓹rsiniz a莽谋lan menudan.
Bu halda, bel蓹 ki, ed蓹k yaln谋z Hannah download.
V蓹 bildiri艧 ki Hannah nin m蓹lumat d蓹yi艧di,
amma any-- yox idi m蓹nim s蓹hif蓹 tamamil蓹 yenid蓹n verm蓹di.
stuff qald谋.
M蓹hsullar谋n谋n 蓹n qald谋.
AJAX Test d蓹yi艧m蓹yib.
d眉ym蓹sini 枚z眉 bu a莽谋lan menyu d蓹yi艧m蓹yib.
Lakin orada d蓹yi艧iklik etdi.
V蓹 nec蓹 as谋l谋 olaraq tez m蓹nim komp眉ter h蓹r蓹k蓹t,
Siz, h蓹qiq蓹t蓹n, content ki, g枚r蓹 bil蓹rsiniz yox v蓹 sonra, h蓹qiq蓹t蓹n, reappears
tez.
Ki, olan content var infodiv silindi,
v蓹 sonra bir il蓹 蓹v蓹z yeni asynchronous t蓹l蓹bi.
>> M蓹n dem蓹k 眉莽眉n ke莽id Bel蓹 ki, Rob-- v蓹 yen蓹 bir n蓹z蓹r,
v蓹 b蓹lk蓹 biz, h蓹qiq蓹t蓹n, g枚rm蓹k laz谋md谋r yox v蓹 tez yeniden.
Siz ki, g枚r蓹c蓹ksiniz?
Nec蓹 yaln谋z 眉z atd谋 v蓹 sonra art谋r谋ld谋臒谋?
Ki, AJAX t蓹l蓹b var ya艧an谋r sort.
V蓹 bel蓹 as谋l谋 olaraq 艧蓹xs M蓹n deyil蓹m, se莽in
f蓹rqli asynchronous edilm蓹si f蓹rqli bir fayl t蓹l蓹b
M蓹n server var.
V蓹 m蓹zmunu m蓹nim infodiv t蓹z蓹l蓹yirik,
M蓹n se莽diyiniz bu 蓹sas谋nda.
Bel蓹 ki, h蓹qiq蓹t蓹n, b眉t眉n AJAX var var.
Bu, biz蓹 bu asynchronous etm蓹k 眉莽眉n imkan verir sor臒u, bir s蓹hif蓹 yenilikl蓹ri.
Olmadan b眉t眉n s蓹hif蓹 yenilemek,
yeni almaq olacaq ed蓹r蓹k bu content
server yeni t蓹z蓹 sor臒u.
Bel蓹 ki, bizim pages ola bil蓹r bir q蓹d蓹r daha dinamik.
>> V蓹 daha 莽ox almaq kimi v蓹 daha inki艧af etmi艧, siz蓹
kimi 艧eyl蓹r 蓹ld蓹 ed蓹 bil蓹r dem蓹k, e-po莽t gelen qutusu,
harada bir 艧ey yoxdur.
Siz bas谋n yoxdur menyu a艧a臒谋 a莽谋lan v蓹 ya bir 艧ey bas谋n
v蓹 q蓹fl蓹t蓹n, sizin yeni e-po莽t 眉st g枚st蓹rir.
Bu da yaln谋z bir Ajax sor臒u var.
Ajax sor臒u Sizin server, e-po莽t server,
b眉t眉n m蓹lumat g枚nd蓹rm蓹k 眉莽眉n son e-po莽t haqq谋nda,
v蓹 siz g枚rm蓹k n蓹 d蓹yi艧蓹n ekran e-po莽t sizin yeni set olmal谋d谋r.
V蓹 yeni bir var, 蓹g蓹r ki, div var, onda content
蓹ks etdirm蓹k 眉莽眉n d蓹yi艧蓹c蓹k yenil蓹ndi content.
M蓹n Doug Lloyd edir蓹m.
Bu CS50 edir.