Created by TempAIDS

Nhp mn AJAX (1)

I, Qu trnh pht trin cng ngh Web - Nguyn nhn xut hin cng ngh AJAX. Trc khi tm hiu v Ajax, chng ta cng xem xt qu trnh pht trin cc cng ngh Web, nguyn nhn v hon cnh xut hin cng ngh Ajax. Qu trnh pht trin cc cng ngh trong ng dng Web Ban u, cc trang Web l tnh; ngi dng gi yu cu mt ti nguyn no , v server s tr v ti nguyn . Cc trang Web khng c g hn l mt vn bn c nh dng v phn tn. i vi cc trnh duyt, th cc trang Web tnh khng phi l cc vn kh khn, v trang Web lc u ch thng tin v cc s kin, a ch, hay lch lm vic qua Internet m thi, cha c s tng tc qua cc trang Web. Nm 1990, Tim Berners-Lee, ti CERN, sng ch ra HTML (Hyper Text Markup Language), ngn ng nh du siu vn bn. HTML rt n gin v d dng, v n tr thnh mt ngn ng rt ph bin v c bn. Tuy nhin, khng lu sau , nhu cu v cc trang Web ng, c s tng tc ngy mt tng, chnh v th s ra i cc cng ngh Web ng l mt iu tt yu. Sau y l mt s cng ngh Web ng c bn: 1. CGI Gii php u tin lm cc trang Web ng l Common Gateway Interface (CGI). CGI cho php to cc chng trnh chy khi ngi dng gi cc yu cu. Gi s khi cn hin th cc cc mc bn trn Web site vi mt CGI script ta c th truy nhp c s d liu sn phm v hin th kt qu. S dng cc form HTML n gin v cc CGI script, c th to cc ca hng o cho php bn sn phm cho khch hng qua mt trnh duyt. CGI script c th c vit bng mt s ngn ng t Perl cho n Visual Basic. Tuy nhin, CGI khng phi l cch an ton cho cc trang Web ng. Vi CGI, ngi khc c th chy chng trnh trn h thng. V th c th chy cc chng trnh khng mong mun gy tn hi h thng. Nhng d vy, cho n hm nay th CGI vn cn c s dng. 2. Applet Thng 5/1995, John Gage ca hng Sun v Andressen (nay thuc Netscape Communications Corporation) cng b mt ngn ng lp trnh mi c tn Java. Netscape Navigator h tr ngn ng mi ny, v mt con ng mi cho cc trang Web ng c m ra, k nguyn ca applet bt u. Applet cho php cc nh pht trin vit cc ng dng nh nhng vo trang Web. Khi ngi dng s dng mt trnh duyt h tr Java, h c th chy cc applet trong trnh duyt trn nn my o Java Virtual Machine (JVM). D rng applet lm c nhiu iu song n cng c mt s nhc im: thng b chn bi vic c v ghi cc file h thng, khng th ti cc th vin, hoc i khi khng th
www.my-ebooks.tk

Created by TempAIDS

thc thi trn pha client. B li nhng hn ch trn, applet c chy trn mt m hnh bo mt kiu sandbox bo v ngi dng khi cc on m nguy him. C nhng lc applet c s dng rt nhiu, nhng n cng c nhng vn ny sinh: l s ph thuc vo my o Java JVM, cc applet ch thc thi khi c mi trng thch hp c ci t pha client, hn na tc ca cc applet l tng i chm v th applet khng phi l gii php ti u cho Web ng. 3. JavaScript Cng thi gian ny, Netscape to ra mt ngn ng kch bn gi l JavaScript. JavaScript c thit k vic pht trin d dng hn cho cc nh thit k Web v cc lp trnh vin khng thnh tho Java. (Microsoft cng c mt ngn ng kch bn gi l VBScript). JavaScript ngay lp tc tr thnh mt phng php hiu qu to ra cc trang Web ng. Vic ngi ta coi cc trang nh l mt i tng lm ny sinh mt khi nim mi gi l Document Object Model (DOM). Lc u th JavaScript v DOM c mt s kt hp cht ch nhng sau chng c phn tch. DOM hon ton l cch biu din hng i tng ca trang Web v n c th c sa i vi cc ngn ng kch bn bt k nh JavaScript hay

Nhp mn AJAX (2)

Monday, 05.03.2007, 09:48am (GMT7)

II, Cng ngh Web th h th hai Web 2.0

c xem l mt cuc cch mng trn th gii mng, th h web mi c nhng thay i quan trng khng ch nn tng cng ngh m cn c cch thc s dng - hnh thnh nn mi trng cng ng, mi ngi cng tham gia ng gp cho x hi "o" ch khng ch "duyt v xem". Web 2.0 l g? Lm sao phn bit u l Web 1.0 u l Web 2.0? Thut ng "Web 2.0" ang tr nn thnh hnh. Thc cht, Web 2.0 c ngha l s dng web ng vi bn cht v kh nng ca n. Mc tiu u tin ca nhng ngi tin phong xy dng Internet l nhm kt ni cc nh nghin cu v cc my tnh ca h vi nhau c th chia s thng tin hiu qu. Khi b sung World Wide Web (nm 1990), Tim Berners-Lee cng nhm mc tiu to phng tin cho php ngi dng t do a thng tin ln Internet v d dng chia s vi mi ngi (trnh duyt web u tin do Berners-Lee vit bao gm c cng c son tho trang web). Tuy nhin, sau web pht trin theo hng hi khc mc tiu ban u. Tuy c mt s ngoi l nhng th gii Web 1.0 (th h web trc Web 2.0) ch yu gm cc website "ng" ca cc hng thng tn hay cc cng ty nhm mc ch tip cn c gi hay khch hng hiu qu hn. N l phng tin pht tin hn l phng tin chia s thng tin. Ch n gn y, vi s xut
www.my-ebooks.tk

Created by TempAIDS

hin ca nhiu k thut mi nh blog (hay weblog), wiki... web mi tr nn c tnh cng ng (v cng tc) hn v tr nn gn hn vi s k vng v kh nng thc s ca n. Khi nim Web 2.0 u tin c Dale Dougherty, ph ch tch ca OReilly Media, a ra ti hi tho Web 2.0 ln th nht do OReilly Media v MediaLive International t chc vo thng 10/2004. Dougherty khng a ra nh ngha m ch dng cc v d so snh phn bit Web 1.0 v Web 2.0: "DoubleClick l Web 1.0; Google AdSense l Web 2.0. Ofoto l Web 1.0; Flickr l Web 2.0. Britannica Online l Web 1.0; Wikipedia l Web 2.0. v.v...". Sau Tim OReilly, ch tch kim gim c iu hnh OReilly Media, c kt li 7 c tnh ca Web 2.0: 1. Web c vai tr nn tng, c th chy mi ng dng 2. Tp hp tr tu cng ng 3. 4. 5. 6. 7. D liu c vai tr then cht Phn mm c cung cp dng dch v web v c cp nht khng ngng Pht trin ng dng d dng v nhanh chng Phn mm c th chy trn nhiu thit b Giao din ng dng phong ph

Thot u, Web 2.0 c ch trng ti yu t cng ngh, nhn mnh ti vai tr nn tng ng dng. Nhng n hi tho Web 2.0 ln 2 t chc vo thng 10/2005, Web 2.0 c nhn mnh n tnh cht su xa hn yu t cng ng. Thc t, ng dng trn web l thnh phn rt quan trng ca Web 2.0. Hng lot cng ngh mi c pht trin nhm lm cho ng dng trn web mnh hn, nhanh hn v d s dng hn, c xem l nn tng ca Web 2.0. Kin trc cng ngh ca Web 2.0 hin vn ang pht trin nhng c bn bao gm: phn mm my ch, c ch cung cp ni dung, giao thc truyn thng, trnh duyt v ng dng. Cung cp ni dung Bc pht trin u tin v quan trng nht hng n Web 2.0 l c ch cung cp ni dung, s dng cc giao thc chun ho cho php ngi dng s dng thng tin theo cch ca mnh (ngha l c kh nng ty bin thng tin). C nhiu giao thc c pht trin cung cp ni dung nh RSS, RDF v Atom, tt c u da trn XML. Ngoi ra cn c cc giao thc c bit nh FOAF v XFN dng m rng tnh nng ca website hay cho php ngi dng tng tc. Dch v web Cc giao thc truyn thng 2 chiu l mt trong nhng thnh phn then cht ca kin trc Web 2.0. C hai loi giao thc chnh l REST v SOAP. REST (Representation State Transfer) l dng yu cu dch v web m my khch truyn i trng thi ca tt c giao dch; cn SOAP (Simple Object Access
www.my-ebooks.tk

Created by TempAIDS

Protocol) th ph thuc my ch trong vic duy tr thng tin trng thi. Vi c hai loi, dch v web u c gi qua API. Ngn ng chung ca dch v web l XML, nhng c th c ngoi l. Mt v d in hnh ca giao thc truyn thng th h mi l Object Properties Broadcasting Protocol do Chris Dockree pht trin. Giao thc ny cho php cc i tng o (tn ti trn web) t bit chng "l g v c th lm g, nh vy c th t lin lc vi nhau khi cn. Phn mm my ch Web 2.0 c xy dng trn kin trc web th h trc nhng ch trng hn n phn mm lm vic background. C ch cung cp ni dung ch khc phng thc cp pht ni dung ng (ca Web 1.0) v danh ngha, tuy nhin dch v web yu cu tin trnh lm vic v d liu cht ch hn. Cc gii php pht trin theo hng Web 2.0 hin nay c th phn lm hai loi: hoc xy dng hu ht tnh nng trn mt nn tng my ch duy nht; hoc xy dng ng dng "gn thm" cho my ch web, c s dng giao tip API. AJAX l g ? Sau y l nh ngha ca Garrett v Ajax: AJAX l tp hp ca nhiu cng ngh vi th mnh ca ring mnh to thnh mt sc mnh mi. AJAX bao gm:

Th hin web theo tiu chun XHTML v CSS, cc chun ca W3C, c Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhn Firefox) h tr rt tt. Nng cao tnh nng ng v phn hi bng DOM (Document Object Model); mt chun ca W3C Trao i v x l d liu bng XML v XSLT; cng l mt chun ca W3C Truy cp d liu theo kiu bt ng b (asynchronous) bng XMLHttpRequest V tt c cc cng ngh trn c lin kt li vi nhau bng JavaScript.

Cc vn ny sinh v s ra i ca AJAX

Trc khi tm hiu ti sao Ajax li c xem l "cu tinh" ca cc ng dng Web, hy th phn tch nhng gii hn ca cc ng dng web hin ti khin n cha th thay th cho cc phn mm pha client truyn thng. Ch cch y vi nm, khi m cc dch v web bng n, ngi ta ngh n mt lc no tt c cc ng dng m ta s dng s l cc ng dng Web thay v cc phn mm chy c lp trn cc my tnh n l. Qu tht, vi s pht trin chng mt ca mng Internet cng vi nhng u im ca cc ng dng Web (truy cp ti mi ni, khng cn nng cp,), tng lai ca cc phn mm chc chn s gn cht vi cc ng dng Web, nu khng mun ni l c th s b thay th. Tuy nhin, cho n gi, gic m vn cha thnh s tht v ngi ta bt u ngh rng, c l n s khng bao gi tr thnh s tht. Ti sao vy? Bi v mt trong nhng gii hn quan trng ca cc ng dng Web hin ti l cch thc
www.my-ebooks.tk

Created by TempAIDS

n tng tc vi ngi dng. Khc vi cc phn mm chy c lp my khch c nhng kh nng dng nh v tn trong cch thc tng tc vi ngi dng, cc ng dng Web b gii hn bi chnh nguyn l hot ng ca n: tt c cc giao dch phi thc hin thng qua phng thc giao dch HTTP (HyperText Transport Protocol - Giao thc truyn ti qua cc siu lin kt). hiu ti sao tnh cht ny li tr thnh mt ro cn ca cc ng dng web, hy phn tch cch thc hot ng ca cc dch v web hin ti x l mt tc v n gin nh xa email trong YahooMail. Ta ang duyt qua hm th Inbox ca Yahoo!Mail. Khi chn mt s email v nhn nt Delete xa chng (chuyn vo thng rc). Yahoo!Mail trc ht s ly danh sch cc email c chn (qu trnh ny chy trn my local), sau gi danh sch ny cng vi m lnh qua mt siu lin kt n server ca Yahoo, yu cu server thc hin tc v xa i vi cc email v gi li trang web Yahoo!Mail vi ni dung mi, ri cp nht trnh duyt hin th. Vic gi nhn yu cu ny mt mt khong thi gian tr, nu ta s dng ADSL th thi gian ny cng khng qu lu, cn nu dng dch v dial-up th thi gian ch i l rt ln. Ta cng s phi tri qua mt qu trnh tng t i vi cc tc v khc, v d nh chuyn t th mc Inbox(hm th n) sang Sent (hm th i). Ta s khng bao gi phi tri qua vic ch i trn khi s dng cc phn mm chy trn my tnh n l: khng bao gi thy phn mm mt khi c m ra li phi v hiu trong vi giy cp nht d ch l mt tc v n gin nht, v ngay c khi phn mm cn thi gian x l mt tc v no th ta vn thy n vn tng tc vi ngi dng. Nu xt v kha cnh kh nng ng dng trong cc tc v hng ngy th hn ch trn ca cc ng dng web l khng th chp nhn c. Tt nhin, bn cnh ro cn v cch thc tng tc, cc ng dng Web cn vp phi nhiu gii hn khc (v d nh bn thn vic phi hot ng da trn cc trnh duyt l mt ro cn quan trng) nhng mt khi cha gii quyt c vn trn th cc ng dng web s khng bao gi c th thay th cho cc phn mm c lp. Ajax ra i l mt gii php cho cc ng dng Web hin nay, v nh ta ni, n l mt trong s cc cng ngh Web th h th hai.

Nhp mn AJAX (3)

Tuesday, 06.03.2007, 09:01am (GMT7)

III,Cc th mnh ca AJAX:

Bi ny bt u i vo nhng ci nn tng nht, cn hc chm v hiu c vn ct yu: Ajax l vit tt ca Asynchronous JavaScript and XML cng ngh kt hp hai tnh nng mnh ca JavaScript c cc nh pht trin nh gi rt cao:

www.my-ebooks.tk

Created by TempAIDS

Gi yu cu (request) n server Phn tch v lm vic vi XML

Cc ng dng Ajax xoay quanh mt tnh nng c tn l XMLHttpRequest. cc ng dng web truyn thng, khi ngi dng c mt cn thay i d liu trn trang Web, yu cu thay i c gi v server di dng HTTP request (hay cn gi postback), server s x l yu cu ny v gi tr response cha cc thng tin di dng HTML v CSS, trang HTML ny s thay th trang c. Qui trnh ny c m t l nhp-ch v ti li (click-wait-and-refresh): v d ngi dng sau khi nhn mt nt Submit trn trang web phi ch cho n khi server x l xong mi c th tip tc cng vic. Di y l: M hnh tng tc trong mt ng dng Web truyn thng:

Ajax cho php to ra mt Ajax Engine nm gia giao tip ny. Khi , cc yu cu gi resquest v nhn response do Ajax Engine thc hin. Thay v tr d liu di dng HTML v CSS trc tip cho trnh duyt, web server c th gi tr d liu dng XML v Ajax Engine s tip nhn, phn tch v chuyn ha thnh XHTML + CSS cho trnh duyt hin th. Vic ny c thc hin trn client nn gim ti rt nhiu cho server, ng thi ngi s dng cm thy kt qu x l c hin th tc th m khng cn np li trang. Mt khc, s kt hp ca cc cng ngh web nh CSS v XHTML lm cho vic trnh by giao din trang web tt hn nhiu v gim ng k dung lng trang phi np. y l nhng li ch ht sc thit thc m Ajax em li. C th nhn vo 2 hnh v so snh hai m hnh ng dng Web: truyn thng v s dng Ajax.

www.my-ebooks.tk

Created by TempAIDS

Cn y l m hnh tng tc trong mt ng dng Web dng Ajax:

R rng im khc bit l thay v phi ti c trang web th vi AJAX ta ch cn ti v phn ca trang Web mun thay i. iu ny gip cho ng dng web ca phn hi nhanh hn, thng minh hn. Ngoi
www.my-ebooks.tk

Created by TempAIDS

ra, im c bit quan trng trong cng ngh Ajax nm ch Asynchronous - bt ng b - tc l gi yu cu ca mnh ti server v tip tc thc thi tc v hin ti m khng cn ch tr li. Khi no server x l xong yu cu ca, n s bo hiu v ta c th n th hin nhng thay i cn thit

Nhp mn AJAX (4)

Wednesday, 07.03.2007, 09:34am (GMT7)

IV, Cc cng ngh trong AJAX - CSS - Gii thiu

T bi ny, chng ta s tm hiu cc cng ngh trong AJAX v mi lin h gia chng. AJAX l mt tp hp cc cng ngh b sung ln nhau. JavaScript c vai tr cht keo kt dnh cc ng dng li vi nhau. Giao din ngi dng c to v ti np bng cch dng JavaScript iu khin Document Object Model, to v t chc biu din d liu cho ngi dng, ng thi x l cc tng tc trn chut v bn phm. Cascading Style Sheets (CSS) cung cp mt s nht qun trn cm quan look and feel cho ng dng v kh nng thao tc mnh m vi DOM. i tng XMLHttpRequest (hay mt c ch tng ng no ) c dng lin lc mt cch bt ng b vi server, m bo vic gi yu cu ngi dng v ti np d liu trong khi ngi dng vn lm vic. Cascading Style Sheet CSS Cascading Style Sheet tm dch l bng kiu xp chng - l mt phn khng th thiu trong thit k Web, n c dng rt nhiu trong cc ng dng Web truyn thng cng nh trong Ajax. Mt stylesheet a ra cch kim sot cc loi nh dng trc quan, n c th c p dng cho cc thnh phn ring l trn cc trang. Hn na, cho cc thnh phn nh dng trc quan nh mu sc, l, hnh nn, tnh trong sut, kch c, stylesheet c th xc nh cch m cc phn t c b tr quan h vi cc phn t khc v tng tc vi ngi dng, cho php cc hiu ng kh mnh m. Trong ng dng Web truyn thng, stylesheet cung cp mt cch hiu qu xc nh cch th hin v tr v c th c dng li trong nhiu trang web khc na.Vi AJAX, stylesheet cung cp mt kho cha cc giao din xc nh trc c th p dng cho cc phn t ng vi di cc on m ngun l nh nht. CSS nh dng mt trang web theo ba cch : 1. S dng trc tip km vi cc th HTML (Inline Style Sheet) 2. nh ngha trong mt trang web (Internal Style Sheet). 3. nh ngha thnh mt file CSS ring (External Style Sheet). Trang web ca chng ta s tham
www.my-ebooks.tk

Created by TempAIDS

chiu n file CSS ny. Mt quy tc nh dng v b tr gm c hai phn: thnh phn la chn - selector v phn khai bo style declaration. Selector c t cc phn t c nh dng v b tr, v style declaration khai bo cc thuc tnh nh dng s c p dng. Gi s mun to ra cc dng text trong level-1 heading trong ti liu ( l on nm trong th <h1>) c mu . C th khai bo thuc tnh CSS nh sau: h1 {color: red} Chng ta cng nn phn tch: Cc u im ca CSS trong thit k web a. CSS gip tit kim c rt nhiu thi gian v cng sc cho vic thit k web. Style trong phin bn HTML 4.0 qui nh cch thc th hin cc th. Style thng c lu trong cc file nm ngoi trang web. Chng gip thay i cch thc nh dng v cch b tr cc trang web ch bng cch thay i ring file CSS. b. CSS cho php iu khin cch nh dng v cch b tr ca cng lc nhiu trang web vi ch duy nht mt ln thay i ti mt v tr. c. C th nh ngha nhiu style vo mt th HTML . CSS cho php a cc thng tin nh ngha th thng qua nhiu con ng khc nhau. Style c th c qui nh trong ch mt th HTML, c qui nh trong mt trang web hoc trong mt file CSS bn ngoi. d. Th t p dng cc nh dng Nh trn ni, c th s dng nhiu cch khc nhau lm CSS. iu g s xy ra nu p dng nhiu cch nh dng cho mt th HTML? Theo mt cch chung nht ra c th ni cc style s c "xp tng" (cascade). Vic xp tng ny tun theo th t u tin gim dn nh sau:

Inline Style (Style c qui nh trong mt th HTML c th) Internal Style (Style c qui nh trong phn ca mt trang HTML) External Style (style c qui nh trong file CSS ngoi Browser Default (thit lp mc nh ca trnh duyt

Bi sau chng ta s i vo: C php c bn ca CSS.

Nhp mn AJAX (5)

Thursday, 08.03.2007, 10:41am (GMT7)
www.my-ebooks.tk

Created by TempAIDS

V,Cng ngh trong AJAX - Javascript

JavaScript l mt ngn ng lp trnh a nng, n tng i ging C. JavaScript c bit di dng mt ngn ng c kiu t do, thng dch, ngn ng kch bn a nng. Kiu t do ngha l cc bin khng c khai bo c th nh string, integer, hay object, v cc bin ging nhau c th c gn bi cc kiu khc nhau. V d, on m sau l hp l:
var x=3.1415926; x='pi';

Bin x lc u c nh ngha l gi tr s v sau c gn li bi gi tr xu k t. Thng dch ngha l cc m ngun khng c bin dch thnh cc on m nh phn c th thc thi c, v n c thc thi trc tip, c th l qua cc trnh duyt. Khi trin khai mt ng dng JavaScript, ta t m ngun trn web server, v m ngun ny c truyn trc tip qua Internet ti web browser. a nng ngha l ngn ng ny thch hp lp trnh theo hu ht cc thut ton v cc tc v. JavaScript c bn h tr cc kiu s - number, string, date v time, array, cc biu thc ton hc c x l trong vn bn, v cc hm ton hc nh cc hm lng gic v b to s ngu nhin. Hon ton c th nh ngha cu trc mt i tng bng JavaScript, iu ny mang n nguyn l c bn cho lp trnh v vit ln nhng on m phc tp. Trong mi trng trnh duyt web, cc chc nng c bn ca trnh duyt, gm CSS, DOM, v cc i tng XMLHttpRequest, c coi l cc phng tin ca JavaScript, cho php cc nh pht trin iu khin cc trang cc mc khc nhau. Trong chng cng ngh ca Ajax, JavaScript l cht kt dnh cc thnh phn li vi nhau. Bn c th ti v ti liu hc JavaScript ti y

Nhp mn AJAX (6)

Friday, 09.03.2007, 10:20am (GMT7)

VI, Cc cng ngh trong AJAX - CSS - C php & thuc tnh CSS Style.
C php c bn ca CSS
C php ca CSS gm ba thnh phn:

Thnh phn la chn (thng l mt th HTML) (Selector)

www.my-ebooks.tk

Created by TempAIDS

Thuc tnh (Property) Gi tr (Value)

Th hin ca c php CSS Selector { Property1: Value1; Property2: Value2; } Selector c th l cc th/nhm th HTML, cc lp khai bo, hay bng nh danh duy nht ca phn t. Khi chn cc on m CSS vo trang web, trnh duyt s hin th trang web theo cch CSS qui nh cho n, c ba cch chn CSS vo trang web. a. External Style Sheet (s dng file CSS c nh ngha thnh trong file ring) Mi trang web s dng file CSS ngoi ny u phi s dng th <LINK>. Th <LINK> c t bn trong th <HEAD>. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> b. Internal Style Sheet (nh ngha cc style sheet ngay trong trang web) Trong trng hp mi trang web ca s dng cc nh dng khc nhau, dng Internal Style Sheet. nh ngha Internal Style Sheet, s dng th <STYLE> t bn trong th <HEAD>. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> c. Internal Style Sheet (style c qui nh ngay trong mi th HTML) y l phng php km hiu qu nht, khng nn s dng phng php ny v lm mt cc u im ca CSS. <p style="color: sienna; margin-left: 20px">

www.my-ebooks.tk

Created by TempAIDS

This is a paragraph </p>

Cc thuc tnh ca CSS Style

Mi phn t trong trang HTML c th c qui nh theo nhiu kiu. Mt phn text ca mt phn t c th c quy nh theo cc thuc tnh color, font size, m ca phng, v kiu ch s dng. C rt nhiu ty chn c p dng cho thuc tnh trn. V d qui nh cho mt paragraph: .robotic{ font-size: 14pt; font-family: courier new, courier, monospace; font-weight: bold; color: gray; }

Nhp mn AJAX (7)

Monday, 12.03.2007, 08:27am (GMT7)

VII, Cc cng ngh trong AJAX - DOM

A, Document Object Model.
Document Object Model (DOM) gip phn tch mt ti liu (mt trang web chng hn) phc v cho c ch ca JavaScript. S dng DOM, cu trc ca ti liu c th c phn r theo cu trc cy v thao tc theo cc nt. y l mt kh nng c bit hu ch vit mt ng dng Ajax. Trong cc ng dng web truyn thng, trnh duyt phi ti np cc trang HTML theo mt lung t server. Trong mt ng dng AJAX, s thay i giao din ngi dng ch yu c to ra bi DOM. Cc th HTML trong trang web c t chc theo cu trc cy. Gc ca cy l th <HTML>, biu din ti liu. Trong th <BODY> biu din phn thn ca ti liu, l gc ca phn hin th ca ti liu. Trong thn ca ti liu, c cc bng, paragraph, list, v cc loi th khc vi cc th mc thp hn na. Mt biu din theo m hnh DOM ca mt trang web l mt cu trc cy, c cc phn t l cc nt, ri n cha cc nt con trong n, v c tip tc mt cch qui nh th. JavaScript lm vic vi nt gc
www.my-ebooks.tk

Created by TempAIDS

ca trang web hin thi qua mt bin ton cc gi l document, bin ny l im bt u ca mi thao tc trn DOM. Phn t DOM c c t bi W3C. Mi phn t DOM c mt phn t cha duy nht, c hoc khng c cc phn t con, v c mt s bt k cc thuc tnh, chng c lu tr trong mng mc ni. Mi quan h gia cc phn t DOM c th c i chiu bi danh sch cc thnh phn HTML. Mi quan h ny l hai chiu. Sa i m hnh DOM s thay i cu trc HTML v dn n thay i cch biu din mt trang web.

B, Lm vic vi DOM bng JavaScript.

Trong mt ng dng bt k, nu mun thay i giao din ngi dng khi h ang lm vic, th phi cung cp cc phn hi li khi ngi dng gi cc yu cu. hiu r c ch lm vic vi DOM bng JavaScript, chng ta cng xt mt v d v mt trang HTML n gin. <html> <head> <link rel='stylesheet' type='text/css' href='hello.css' /> <script type='text/javascript' src='hello.js'></script> </head> <body> <p id='hello'>hello</p> <div id='empty'></div> </body> Ta thm vo cc tham chiu n cc file hello.css (dng Cascading Style Sheet) v mt file cha m ngunJavaScript l hello.js. y cng ng thi khai bo mt th <div> vi mt ID. Cn y l file hello.css cha stylesheet p dng cho cc mc trong file HTML: .declared{ color: red; font-family: arial; font-weight: normal; font-size: 16px; } .programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; } Chng ta nh ngha hai style, m t gc ca cc nt DOM (tn ca cc style l ty chn). Cc style ny khng dc dng trong file HTML, nhng chng s c p dng qua file JavaScript. window.onload=function(){ var hello=document.getElementById('hello');
www.my-ebooks.tk

Created by TempAIDS

hello.className='declared'; var empty=document.getElementById('empty'); addNode(empty,"reader of"); addNode(empty,"Ajax in Action!"); var children=empty.childNodes; for (var i=0;i<children.length;i++){ children[i].className='programmed'; } empty.style.border='solid green 2px'; empty.style.width="200px"; } function addNode(el,text){ var childEl=document.createElement("div"); el.appendChild(childEl); var txtNode=document.createTextNode(text); childEl.appendChild(txtNode); } Hm window.onload() s c gi khi trang web c np. Ti thi im ny, cu trc cy DOM s c thit lp.

C, Tm kim mt DOM Node

Yu cu u tin lm vic trn DOM vi JavaScript l i tm kim mt phn t thay i. Trc ht cn bt u tham chiu qua nt gc - root node, nt ny th hin qua bin ton cc document. Mi nt trong DOM l mt nt con (hoc nt con cp hai, ba) ca document, nhng c i dn vo cy DOM, s thy mt ti liu phc tp c biu din bi DOM, v vic tm kim l rt kh khn. V th c cc cch sau tm kim mt nt nhanh chng hn. Mi phn t HTML c mt thuc tnh ID, v d nh, <p id='hello'> hay <div id='empty'></div> Mi mt nt DOM c th c mt ID gn cho n, v ID ny c th c dng tham chiu ti nt qua hm : Trong mt s trng hp, cn duyt qua cu trc cy tng bc mt, mi nt DOM c mt nt cha v nhiu nt con. Chng c th c truy cp bi cc thuc tnh parentNode v childNodes, thuc tnh parentNode tr v mt i tng DOM node khc, trong khi childNodes tr v mt mng javascript: var children=empty.childNodes; for (var i=0;i<children.length;i++){ ... }

www.my-ebooks.tk

Created by TempAIDS

Mt cch khc tm kim l da trn loi th HTML, dng phng thc getElementsByTagName(). V d, document.getElementsByTagName("UL") s tr v chui tt c cc th <UL> trong ti liu. To DOM Node Trong nhiu trng hp cn to cc nt mi v thm n vo ti liu. JavaScript cung cp mt s phng thc lm iu . Cc phng thc chun to nt mi l document.createElement() v document.createTextNode(), phng thc createElement() c th c dng to ra bt k phn t HTML no, tham s l kiu ca loi th HTML; var childEl=document.createElement("div"); createTextNode() to mt nt th hin qua mt on text, thng c tm thy trong cc th v heading, div, paragraph, v list item. var txtNode=document.createTextNode("some text"); Chun DOM coi cc text node tch ri khi biu din HTML. Chng khng c cc stye p t cho trc tip v v th chng yu cu t b nh hn. Mt nt khi c to ra phi c gn vo ti liu trc khi hin th trn trnh duyt, phng thc appendChild() c dng thc hin iu ny el.appendChild(childEl); Ba phng thc createElement(), createTextNode(), v appendChild() cho php thc hin hu ht cc thao tc thm mt nt vo ti liu.

D, Thm style vo ti liu

DOM cng cung cp cc phng thc chnh sa style ca cc phn t v to nh dng li cho cu trc c nh ngha trong stylesheet. Mi phn t trong trang web c th c nhiu giao din trc quan c th c p t qua DOM, nh v tr, chiu di v rng, mu sc, canh l v ng vin. Cc trnh duyt ngy nay u cung cp cc rng buc JavaScript cho php thay i giao din mc thp v p t cc nh dng mt cch nht qun v d dng vi cc lp CSS. Thuc tnh className V d on code sau s p t cc quy tc biu din ca lp declared cho mt nt: hello.className='declared'; vi hello tham chiu ti mt nt DOM. Thuc tnh style V d, on m sau b sung cc thuc tnh style cho nt empty empty.style.border="solid green 2px"; empty.style.width="200px"; S dng thuc tnh innnerHTML Cc phn t DOM ca cc trnh duyt web u h tr mt thuc tnh gi l innerHTML, cho php cc ni dung kiu string ty c gn cho cc phn t theo thuc tnh ny, nh trong on m sau: function addListItemUsingInnerHTML(el,text){ el.innerHTML+="<div class='programmed'>"+text+"</div>"; }
www.my-ebooks.tk

Created by TempAIDS

Trn y ta va xt mt cch s lc v JavaScript, CSS, v DOM. Chng c tp hp trong mt cng ngh gi l Dynamic HTML (DHTML), v c th thy Ajax s dng rt nhiu k thut DHTML. Nh vy, cc bn nm c 2 cng ngh dng trong AJAX: CSS v DOM. Trong cc phn tip theo chng ta cng nhau tho lun v: XML v vic truyn d liu bt ng b (Gii thiu v XML v XSLT, XMLHttpRequest) v c l cng nn ni qua mt cht v JS (JavaScript).

Nhp mn AJAX (8)

Tuesday, 13.03.2007, 11:26am (GMT7)

VIII, Cc cng ngh trong AJAX - XML v vic truyn d liu bt ng b - XML.
XML l g? Nm 1969, IBM cho ra i ngn ng nh du u tin ca mnh vi tn gi Generalized Markup Language (GML). GML l mt ngn ng t c t s dng cho vic nh du cu trc ca mt tp d liu nht nh ng thi GML c nh hng tr thnh mt meta language (siu ngn ng) ngha l ngn ng dng c t cho ngn ng khc. V sau GML pht trin thnh SGML (Standard Generalized Markup Language). Vo nm 1986, SGML c t chc ISO cng nhn l chun lu tr v chuyn i d liu. SGML c s dng xy dng nhng ti liu nh sch v, bo co, hay cm nang tham kho.Nhng ti liu ny s c chuyn thnh dng thc biu din c v sau gi chng ra thit b xut nh my in, mn hnh... Tuy nhin, tr ngi ln nht i vi ngi dng SGML l chng qu phc tp v tiu tn nhiu cng sc trong vic hin thc. V vy hu ht ngi dng c nhn v doanh nghip u khng th p ng nhng yu cu s dng cng ngh hu dng ny. Nm 1996, Word Wide Web Consortium (W3C) khi ng k hoch xy dng mt ngn ng c gi l XML (eXtensible Markup Language ngn ng nh du m rng) kt hp c sc mnh ca SGML v tnh ph dng ca HTML. S xut hin ca XML mang li cho ngi dng sc mnh ca SGML vi tn km t hn v khng phi i mt vi s phc tp ca SGML. Hn na vic vit parser (b phn tch t vng v c php) cho ti liu XML cng n gin hn. Ngoi ra, XML tng thch vi cc giao thc Internet v phn mm x l, chuyn i d liu. XML c xem l mt tp con ca SGML, v vy XML c c kh nng tng thch vi nhng h thng da trn SGML, gip nh pht trin vn c th duy tr c nhng h thng c xy dng trn nn tng SGML m khng phi tn km trong vic chuyn i. (on trn l copy n paste) Cc c im ca XML 1. 2. 4. XML tng thch vi SGML D dng vit c nhng chng trnh x l ti liu XML XML c xy dng vi s gim thiu nhng thuc tnh ty chn

3. Ti liu XML d c v c tnh hp l cao

www.my-ebooks.tk

Created by TempAIDS
5. 6. 7. XML d dng c s dng trn Internet XML h tr nhiu ng dng Khng t nng tnh hnh thc trong ni dung th nh du XML

Cu trc mt ti liu XML

Ti liu XML ch cha ng d liu v cch lu tr d liu m khng h cp ti cch thc trnh by d liu. Mt ti liu XML s cha nhng c t v cu trc d liu. Mi cu trc gm nhiu phn t (element), mi thnh phn c bt u vi mt th bt u (Starttag) v kt thc vi mt th kt thc (Endtag). Gia Starttag v Endtag l ni dung ca phn t ny. Ni dung c th bao gm d liu vn bn hay c th l mt phn t khc. Di y l mt file XML: <?xml version="1.0"?> <Catalog> <Product> <ProductID>F10</ProductID> <ProductName>Shimano Calcutta </ProductName> <ListPrice>47.76</ListPrice> </Product> <Product> <ProductID>F20</ProductID> <ProductName>Bantam Lexica</ProductName> <ListPrice>49.99</ListPrice> </Product> </Catalog> Mt ti liu HTML c th tn ti mt s th khng ng quy nh (trnh bin dch s b qua nhng th ny). Tuy nhin vi mt ti liu XML th iu ny khng th xy ra. Khi xy dng mt ti liu XML, n phi tun th theo mt s quy lut no . Nhng ti liu XML tun th ng nhng quy lut ny c gi l well-formed (tm dch l nh dng ng). Vi mt ti liu khng phi l wellformed, Internet Explorer s thng bo li khi np ti liu ny. Mt ti liu XML wellformed cha chc l mt ti liu hp l. Mt ti liu XML c xem l hp l nu n m bo nhng quy tc c t trong ti liu Document Type Definition (DTD) hay gin (schema). Mt DTD hay schema s nh ngha mi th t cu trc d liu ti kiu d liu, nhng thuc tnh c yu cu, v nhng rng buc v thnh phn v thuc tnh c kt hp trong ti liu. Phng thc kim tra ti liu ny thng c s dng trong giao tip gia ng dng - ng dng, m bo d liu trao i hp l trnh dn ti nhng nh hng ca d liu khng hp l trn ton h thng.

XSLT - (eXtensible Style Language Transforming)

XSLT l mt phn ca XSL (eXtensible Style Language). XSL l mt ngn ng nn tng XML v ra i vi mc ch chuyn i mt ti liu XML thnh mt ti liu XML khc hay chuyn mt ti liu XML thnh nhng i tng c th th hin c. Internet Explorer c tch hp XSL transformer gip t ng chuyn i ti liu XML thnh ti liu HTML. s dng XSLT, chng ta phi xy dng ti liu XSL cha nhng template. Trong nhng template chng ta s kt hp nhng phn t HTML s c xut ra.

Cng ngh trong AJAX - XML v vic truyn d liu bt ng b - XMLHttpRequest

Cc ng dng web truyn thng u phi ti np ton b trang web khi gi yu cu n server, iu ny thng dn n mt s ngt qung cho cng vic ca ngi dng. V th yu cu t ra l lm cho cc request ca server khng ng b v ngi dng vn c th lm vic trong khi i tn hiu tr li t server. Gii php www.my-ebooks.tk

Created by TempAIDS
u tin gii quyt vn ny l dng IFrame. Cho n gn y, XMLHttpRequest c a ra nh l mt gii php mnh m v hiu qu.

XmlDocument v XMLHttpRequest
Cc i tng XmlDocument v XMLHttpRequest khng phi l cc chun DOM m rng ca trnh duyt web nhng vn c h tr bi rt nhiu trnh duyt. Cc i tng u da trn ActiveX hay cc i tng JavaScript. Cc trnh duyt khc u c thc thi cc i tng trn c cc chc nng tng ng v cc li gi hm API. Mt v d s dng XmlDocument: function getXMLDocument(){ var xDoc=null; if(document.implementation&&document.implementation. createDocument){ xDoc=document.implementation.createDocument("","",null); }else if (typeof ActiveXObject != "undefined"){ var msXmlAx==null; try{ msXmlAx=new ActiveXObject("Msxml2.DOMDocument"); }catch (e){ msXmlAx=new ActiveXObject("Msxml.DOMDocument"); } xDoc=msXmlAx; } if (xDoc==null || typeof xDoc.load=="undefined"){ xDoc=null; } return xDoc; } Hm va thc hin trn s tr v mt i tng XmlDocument vi cc hm API ging nhau trong cc trnh duyt hin nay. V d sau c chc nng tng t nhng dng cho i tng XMLHttpRequest. function getXMLHTTPRequest() { var xRequest=null; if (window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if (typeof ActiveXObject != "undefined"){ xRequest=new ActiveXObject("Microsoft.XMLHTTP"); } return xRequest; }

Gi mt yu cu n server
Gi mt yu cu n server t mt i tng XMLHttpRequest rt d dng. Tt c nhng vic ta cn lm l truyn cho n a ch URL ca server. Ta s lm nh sau: function sendRequest(url,params,HttpMethod){ www.my-ebooks.tk

Created by TempAIDS
if (!HttpMethod){ HttpMethod="POST"; } var req=getXMLHTTPRequest(); if (req){ req.open(HttpMethod,url,true); req.setRequestHeader("Content-Type","application/ x-www-form urlencoded"); req.send(params); } } XMLHttpRequest h tr mt min rt rng cc li gi HTTP, gm cc tham s truy vn cho cc trang web ng.

Dng cc hm callback gim st cc yu cu

Cc hm callback n bt cc s kin trong cch tip cn lp trnh hng s kin trong hu ht cc b cng c UI hin nay nh nhn bn phm, click chut, v khng th bit c cc s kin no s xy ra, nn cc lp trnh vin phi n bt cc s kin c th xy ra. Khi to cc giao din ngi dng UI bng JavaScript, ta gn cc hm onkeypress, onmouseover, v t tn tng t cho cc thuc tnh tng ng cho cc i tng. Khi lp trnh cho cc yu cu cho server, chng ta gp cc thuc tnh tng t onload v onreadystatechange.

Nhp mn AJAX (9)

Friday, 16.03.2007, 01:42pm (GMT7)

i tng XMLHttpRequest - Gii thiu.

By gi ta s xt vn trng tm ca Ajax: i tng XMLHttpRequest. XMLHttpRequest c a ra ban u trong Internet Explorer 5 nh l mt ActiveX component. N ch hot ng trong Internet Explorer iu ny lm cho s t cc nh pht trin lm vic vi XMLHttpRequest, cho ti khi n tr thnh mt chun khng chnh thc trong Mozilla 1.0 v Safari 1.2. Mt iu rt quan trng cn ch l XMLHttpRequest khng l chun ca W3C, mc d rt nhiu chc nng ca n c xut trong cc c t: DOM Level 3 Load and Save Specification. V XMLHttpRequest khng phi l mt chun, nn c nhng s khc bit nh trong cc trnh duyt v h tr i tng ny, tuy nhin hu ht cc phng thc v thuc tnh ca n u c h tr. Hin thi, Firefox, Safari, Opera, Konqueror, v Internet Explorer tt c u h tr XMLHttpRequest tng t nhau. Nu mt s lng ngi dng ng k vn truy cp website vi cc trnh duyt phin bn c, th phi cn nhc v s la chn cng ngh s ng dng. Gii thiu v XMLHttpRequest

www.my-ebooks.tk

Created by TempAIDS

Trc tin cn to mt i tng XMLHttpRequest bng JavaScript trc khi s dng i tng ny gi request v x l cc response. XMLHttpRequest cha l chun ca W3C, v th phi dng JavaScript theo nhiu cch to mt th hin ca ca XMLHttpRequest. Internet Explorer thc thi XMLHttpRequest nh mt i tng ActiveX, v cc trnh duyt khc nh Firefox, Safari, v Opera thc thi n nh mt i tng JavaScript nguyn thy. V s khc nhau ny, on m JavaScript phi cha cc cu trc logic to mt th hin ca XMLHttpRequest dng k thut ActiveX hay i tng JavaScript nguyn thy. Rt may mn, trong trng hp ny khng cn phi vit m mt cch t m xc nh kiu trnh duyt v lm th no to mt th hin ca i tng XMLHttpRequest. Cng vic ch n gin l kim tra s h tr i tng ActiveX ca trnh duyt. Nu h tr ActiveX, th to mt i tng XMLHttpRequest dng ActiveX. Trng hp khc, to i tng ny bng k thut to i tng JavaScript nguyn thy. on m JavaScript sau d dng to ra cc th hin ca i tng XMLHttpRequest m khng quan tm ti trnh duyt. To mt th hin ca i tng XMLHttpRequest:
var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }

Vic to mt i tng XMLHttpRequest kh l n gin. Trc tin, to mt bin ton cc (gi s c tn l) xmlHttp lu tr mt tham chiu n i tng. Phng thc createXMLHttpRequest thc hin vic to mt th hin ca XMLHttpRequest. on chng trnh ny cha mt cu lnh r nhnh n gin xc nh cch thc to mt i tng. Lnh gi window.ActiveXObject s tr v mt bin kiu object hay gi tr null, tng ng vi iu kin true hay false ca cu lnh if, y l du hiu ch ra cho ta bit trnh duyt h tr ActiveX control, l Internet Explorer. Nu th, XMLHttpRequest c to ra l mt th hin ca ActiveXObject, truyn mt ch bo kiu string xc nh loi i tng ActiveX cn to. Trong th hin ny, ta cung cp tham s Microsoft.XMLHTTP cho hm to, ch ra rng cn to mt th hin ca XMLHttpRequest. Nu lnh gi ti window.ActiveXObject khng c thc thi (iu kin false ca lnh if), lnh JavaScript s r nhnh tng ng vi lnh else, xc nh rng trnh duyt thc thi XMLHttpRequest di dng mt i tng JavaScript nguyn thy. Nu window.XMLHttpRequest tn ti, sau mt th hin ca XMLHttpRequest c to ra. Kiu d liu XMLHttpRequest ca JavaScript tng thch vi rt nhiu trnh duyt khc nhau, c th truy cp cc thuc tnh v phng thc ca mt th hin ca XMLHttpRequest m khng cn quan tm
www.my-ebooks.tk

Created by TempAIDS

ti cch to cc th hin ny. iu ny lm cho vic pht trin cc ng dng n gin hn v lm cho JavaScript khng ph thuc vo trnh duyt c th.

Nhp mn AJAX (10)

Monday, 19.03.2007, 08:48am (GMT7)

i tng XMLHttpRequest - Phn tch cc c tnh - Phng thc v thuc tnh

Phn tch cc c tnh ca XMLHttpRequest: Cc phng thc v thuc tnh Danh mc sau ch ra cc phng thc in hnh ca i tng XMLHttpRequest: abort() Hy request hin thi. getAllResponseHeaders() Tr v tt c cc response header cho HTTP request di dng cp key/value. getResponseHeader("header") Tr v gi tr kiu string ca header xc nh. open("method", "url") Thit lp giai on cho mt li gi ti server. Tham s ca method c th l GET, POST, hay PUT. Tham s url c th l quan h hay trc tip. Phng thc ny cn c 3 tham s ty chn. send(content) Gi request ti server. setRequestHeader("header", "value") Thit lp header xc nh cho gi tr cung cp. open() phi c gi trc khi c gng thit lp bt k mt header no. By gi ta xt c th cc phng thc ny:

void open(string method, string url, boolean asynch, string username, string password): Phng thc ny thit lp mt phin gi ti server. ngha ca n ny l khi to mt request. N c hai tham s yu cu v ba tham s ty chn; ta phi cung cp c t ca phng thc c triu gi (GET, POST, hay PUT) v a ch URL ca ti nguyn c gi. Cng c th truyn mt bin ch bo kiu Boolean, xc nh vic truyn l bt ng b - gi tr mc nh l true, ngha l cc request lun bt ng b theo mc nh. Nu truyn mt gi tr false, qu trnh x l s phi i cho n khi c phn hi t server. Vic truyn d liu bt ng b l mt li
www.my-ebooks.tk

Created by TempAIDS

th ca vic dng Ajax, v vy thit lp tham s ny gi tr false thay i mc ch vic s dng XMLHttpRequest. Ta thy n rt hu ch trong mt s trng hp chng hn nh chng thc ngi dng (validating user) trong khi trang web ca khng h b thay i. Hai tham s cui ty chn, cho php s dng username v password.

void send(content): Phng thc ny thc hin gi request ti server. Nu request c khai bo bt ng b, kt qu c tr v ngay, cn khng n s i cho ti khi nhn c response t server. Tham s c th l mt th hin ca mt i tng DOM, mt lung d liu vo (input stream), hay mt kiu string. Ni dung truyn cho phng thc ny c gi i nh mt phn trong request. void setRequestHeader(string header, string value): Phng thc thit lp gi tr cho phn header cho trong HTTP request. Tham s bao gm mt bin kiu string biu th header c thit lp v mt string khc biu din gi tr thay th trong header. Ch l n cn phi c gi trc khi gi n open(). Trong hu ht cc phng thc th cp open() v send() thng xuyn c gi. void abort(): Phng thc ny rt d hiu, n s hy request. string getAllResponseHeaders(): Tr v mt bin kiu string cha response header ca HTTP request. Header bao gm cc trng Content-Length, Date, v URI. string getResponseHeader(string header): Phng thc ny tng t nh getAllResponseHeaders(); ngoi tr vic n nhn mt tham s biu din gi tr xc nh header m ta cn n bt, gi tr tr v cng c kiu string.

Ngoi nhng phng thc chun ny, i tng XMLHttpRequest cn c cc thuc tnh c lit k sau y. Anh em ch ta s phi s dng cc thuc tnh m rng ny khi lm vic vi XMLHttpRequest. onreadystatechange B x l s kin cho mt s kin pht sinh mi khi c s thay i trng thi. readyState Trng thi ca request. C 5 gi tr l 0 = uninitialized,1 = loading, 2 = loaded, 3 = interactive, v 4 = complete. responseText Response tr v t server di dng string. responseXML Response tr v t server di dng XML. i tng ny c th c phn tch v kho st nh mt i tng ti liu DOM. status M trng thi HTTP t server (chng hn 200 nu khng c li, 404 cho li Not Found, ). statusText Thng ip ca m trng thi HTTP (chng hn OK hay Not Found, ).

www.my-ebooks.tk

Created by TempAIDS

Nhp mn AJAX (11)

Wednesday, 21.03.2007, 08:38am (GMT7)

i tng XMLHttpRequest - Phn tch cc c tnh - S tng tc S tng tc

Ta xt mt v d tm hiu cc tng tc ca Ajax. Hnh sau cho thy m hnh tng tc chun trong mt ng dng Ajax.

Khng ging nh cc cch tip cn kiu request/response thng thng trong cc chun Web client, mt ng dng Ajax c nhng khc bit, sau y l m t qu trnh tng tc: 1. Mt event client-side gy ra mt s kin - Ajax event. Bt k mt tc ng no cng c th gy ra Ajax event, t mt s kin onchange n gin cho n mt s tc ng ca ngi dng. V d vi on m sau: <input type="text" id="email" name="email" onblur = "validateEmail()";> 2. Mt th hin ca XMLHttpRequest c to ra. Dng phng thc open(), to li gi hm - a ch URL c thit lp cng vi phng thc HTTP yu cu, thng thng l GET hay POST. Request c to ra qua vic gi phng thc send(). on m ngun sau th hin iu : var xmlHttp; function validateEmail() { var email = document.getElementById("email"); var url = "validate?email=" + escape(email.value); www.my-ebooks.tk

Created by TempAIDS
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } xmlHttp.open("GET", url); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } 3. Mt request c to v gi n server. C th l mt li gi ti mt servlet, mt CGI script, hay mt cng ngh pha server no tng t nh ASP.NET, JSP, hay PHP 4. Server x l cc yu cu, chng hn nh truy cp c s d liu hay mt tc v h thng no y. 5. Response c tr v cho trnh duyt. Trng Content-Type c thit lp dng text/xml; XMLHttpRequest ch c th x l kt qu dng text/html. Trong cc th hin phc tp hn, response kh rc ri v bao gm JavaScript, cc thao tc trn i tng DOM, hoc cc cng ngh lin quan khc. Ch l cng cn thit lp header v th trnh duyt s khng lu kt qu mt cch cc b. Ta s lm nh sau: response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); 6. Trong v d sau, cu hnh XMLHttpRequest gi hm callback() khi kt qu x l c tr v. Hm ny kim tra thuc tnh readyState trn i tng XMLHttpRequest v sau xem xt m trng thi tr v t server. Mi th hon ton bnh thng, hm callback() c th lm nhiu vic trn pha client. Mt phng thc callback thng c dng sau: function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } } } C mt s khc bit vi m hnh request/response thng thng nhng khng qu l lm i vi cc lp trnh vin Web. R rng, phi xem xt thm v vic to v thit lp mt i tng XMLHttpRequest v sau (hm) callback s kim tra cc trng thi. Thng th cc li gi chun ny c ng gi vo mt th vin dng trong ng dng, hay ni cch khc l dng mt th vin c sn thc thi Ajax cho ng dng Web (c rt nhiu th vin nh th, ta s xt trong cc phn sau). Ajax l vn tuy cn mi m, nhng c mt lng ng k cc th vin v ng dng m ngun m c cng b. Hu ht cc framework v toolkit Ajax trn cc trang Web u dng cc k thut c bn v tru tng ha cc trnh duyt, v thm vo mt s component giao din ngi dng (UI). Mt s l cc framework thun client; cn li lm vic trn server. Nhiu framework trong s ny mi c bt u xy dng, nhng chng lin tc c www.my-ebooks.tk

Created by TempAIDS
cc phin bn v c thn cc th vin mi. Mt s gii php thc thi Ajax l cc th vin Ajax.NET, Atlas, libXmlRequest, RSLite, sarissa, JavaScript Object Notation (JSON), JSRS, Direct Web Remoting (DWR), v Ruby on Rails Bi sau chng ta s phn tch "Cc phng thc GET v POST".

Nhp mn AJAX (12)

Friday, 23.03.2007, 09:03am (GMT7)

i tng XMLHttpRequest - Phn tch cc c tnh - GET & POST

Cc phng thc GET v POST Trn l thuyt, s dng GET khi request khng thay i gi tr, tc l nhiu request s tr v cng kt qu. Trong thc t, nu phng thc tng ng server thay i trng thi theo mt vi cch, th iu ny khng cn ng na. iu ny c ngha, n l mt chun. C rt nhiu s khc bit vi chun trong iu kin kch thc ca phn m (payload) - trong nhiu trng hp, cc trnh duyt v server s gii hn di ca a ch URL s dng gi d liu ti server. Tm li, dng GET truy lc d liu t server; hay ni cch khc trnh c vic thay i trng thi trn vi li gi GET. Phng thc POST c dng khi mun thay i trng thi trn server. Khng ging nh GET, phi thit lp phn Content-Type header trn i tng XMLHttpRequest nh sau:
xmlHttp.setRequestHeader("Content-Type","application/ x-www-form-urlencoded");

POST khng hn ch kch thc ca payload c gi ti server, v POST request khng cn bo m tnh khng i. Hu ht cc request c thit lp GET request; tuy nhin trng thi POST cng lun sn sng khi cn thit.

i tng XMLHttpRequest - Remote Scripting - Gii thiu

Remote Scripting V c bn, remote scripting l mt loi li gi cc th tc t xa. S tng tc vi server vn nh cc ng dng Web thng thng, nhng khng ti np (refresh) ton b trang web. Ch vi AJAX, mi c th s dng cng ngh bt k pha server c th nhn cc request, x l chng v tr v kt qu. Vi mi cng ngh pha server, c mt s la chn cho pha client thc hin remote scripting. C th nhng vo cc on Flash, Java applet, hay cc ActiveX vo ng dng. Thm ch cng c th
www.my-ebooks.tk

Created by TempAIDS

dng mt s cng ngh nh XML-RPC, nhng s phc tp ca phng php ny lm gim tnh ph bin ca n. Cch thc thi c bn i vi remote scripting bao gm phi hp mt cripting vi mt IFRAME v server tr v cc on m JavaScript, cc on m ny s c chy trong trnh duyt. Microsoft c gii php ring v remote scripting, c gi l Microsoft Remote Scripting (MSRS), cho php gi cc server script ging nh l chng cc b. Mt Java applet c nhng vo trang web lm cho s lin lc vi server c d dng, mt trang asp c dng cha cc script pha server, mt file .html qun l bn pha client. C th dng cc gii php ca Microsoft vi Netscape v Internet Explorer 4.0 tr nn. Cc li gi hm ny c th ng b hay bt ng b. Tuy nhin gii php ny yu cu Java, c ngha l cn c s ci t thm vo, v n ph thuc vo trnh Internet Information Services (IIS), t lm gim s la chn cho pha server. V d v Remote Scripting so snh, chng ta cng xt mt v d v cng ngh tng t AJAX c thc thi nh th no dng IFRAME. V d sau ch ra vic dng IFRAME cho remote scripting. Trong v d ny c hai file iframe.html v server.html. Server.html gi lp mt response c tr v t server. iframe.html <html> <head> <title>Example of remote scripting in an IFRAME</title> </head> <script type="text/javascript"> function handleResponse() { alert('this function is called from server.html'); } </script> <body> <h1>Remote Scripting with an IFRAME</h1> <iframe id="beforexhr" name="beforexhr" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe> <a href="server.html" target="beforexhr">call the server </a> </body> </html> server.html <html> <head> <title>the server</title> </head> <script type="text/javascript">
www.my-ebooks.tk

Created by TempAIDS

window.parent.handleResponse(); </script> <body> </body> </html>

Nhp mn AJAX (13)

Wednesday, 28.03.2007, 11:00am (GMT7)

i tng XMLHttpRequest - Gi cc request.

By gi ta s tho lun xem cch s dng i tng XMLHttpRequest. cc phn trc cp n cch to i tng ny, by gi ta s ch ra lm th no gi request ti server v x l cc response t server. Request n gin nht l mt request m khng cha mt thng tin no c, tc l cc form tham s truy vn hay form gi d liu l trng. Trong thc t th lun gi cc request mang thng tin n server. Cc bc c bn gi request dng i tng XMLHttpRequest l: 1. Dng mt tham chiu ti mt th hin ca XMLHttpRequest, c th bng cch to mi hay truy cp vo mt bin c th hin ca XMLHttpRequest.
www.my-ebooks.tk

Created by TempAIDS

2. Khai bo cho i tng XMLHttpRequest v hm s x l cc trng thi ca XMLHttpRequest. Ta hon thnh vic ny bng cch thit lp thuc tnh onreadystatechange ca i tng vi mt con tr v mt hm JavaScript. 3. Gn cc thuc tnh ca request. Phng thc open() ca i tng XMLHttpRequest c gn v request trng thi i. Phng thc open() c ba tham s: mt bin string ch bo (thng dng GET hay POST), mt bin string biu din a ch URL ca ti nguyn, mt bin boolean ch bo request s l bt ng b. 4. Gi request ti server. Phng thc send() s truyn request yu cu ti nguyn. Phng thc send() chp nhn mt tham s, thng thng l mt bin kiu string hay mt i tng DOM. Tham s ny c truyn ti a ch URL ch nh l mt phn ca request. Khi truyn tham s cho send(), phi m bo rng kiu phng thc c gn trong open() l POST. S dng null khi khng c d liu no c gi vi request. C th din gii cc bc trn nh sau: cn mt th hin ca i tng XMLHttpRequest, ch ra xem n cn lm g khi thay i trng thi, khi no th gi cc request v gi nh th no, v cui cng l nh hng XMLHttpRequest truyn request. Ta xt khi nim con tr hm, n cng gn ging con tr d liu, ngoi tr thay v tr vo d liu th n tr vo mt hm. Trong JavaScript, tt c cc hm u c nh a ch trong b nh v c th tham chiu bng tn hm. iu ny cho ta mt cch truyn tham s qua con tr hm rt linh ng v mm do hay lu tr mt con tr hm trong mt thuc tnh ca lp. i vi i tng XMLHttpRequest, thuc tnh onreadystatechange lu tr mt con tr ti hm callback. Hm callback c gi khi trng thi ni ti ca i tng XMLHttpRequest thay i. Khi mt li gi bt ng b c to ra, request c truyn i, v script tip tc x l ngay lp tc n s khng i request c p ng tip tc. Mi ln request c gi i, thuc tnh readyState ca i tng s thay i. V d v mt Request n gin Trong v d ny, c mt trang HTML vi mt nt bm. Khi nhn vo nt bm, s khi to mt request bt ng b gi ti server. Server s p ng bng cch gi mt file text n gin. Response c hin th ni dung trn mt ca s alert. simpleRequest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple XMLHttpRequest</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { www.my-ebooks.tk

Created by TempAIDS
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert("The server replied with:" + xmlHttp.responseText); } } } </script> </head> <body> <form action="#"> <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/> </form> </body> </html>

File response ca server, simpleResponse.xml, cha mt dng text duy nht. Khi nhn vo nt bm trn trang HTML s tr v mt hp alert vi ni dung ca file simpleResponse.xml. Request ti server c gi mt cch bt ng b, cho php trnh duyt tip tc p ng ngi dng trong khi ch i response ca server pha background (cn c gi l AjaxEngine). Nu mt thao tc bt ng b c chn v nu response ca server cn vi giy tr v, trnh duyt s khng th p ng ngi dng trong thi gian i. S bt ng b c th ci thin tnh trng ny bng cch trnh hin th khi trnh duyt b t lit v khng th p ng ngi dng. iu ny cho php ngi dng tip tc lm vic trong khi server tip tc lm vic vi request trc trong background. Kh nng lin lc vi server; khng c li ngt; vi lung lm vic ca ngi dng m ra rt nhiu k thut ci thin cho pha ngi dng. Mt ng dng, chng hn nh chng thc d liu nhp t
www.my-ebooks.tk

Created by TempAIDS

ngi dng. Khi mt ngi dng in vo mt trng d liu trn form nhp, trnh duyt c th nh k lin tc gi cc form gi tr ti server kim chng m khng cn ngt qung qu trnh in d liu vo form nhp. Nu nhp d liu khng ng, ngi dng c th ngay lp tc c thng bo, trc khi form thc s c gi n server x l, iu ny tit kim c thi gian v gim qu trnh np d liu trn server, ni dung ca form s khng c np li sau mt form trnh khng thnh cng. Vn bo mt: Bt k mt cng ngh no da trn nn tng trnh duyt s khng trn vn nu b qua vn bo mt. i tng XMLHttpRequest c x l bo mt theo m hnh sandbox ca trnh duyt. Sc mnh ca phng php bo mt gii hn ny ty thuc vo tng trnh duyt. Internet Explorer hin th mt cnh bo tnh trng mt nguy c khng an ton c th tn ti v cho php ngi dng s la chn c tip tc vi request na hay khng. Trnh duyt Firefox s dng request li v hin th thng ip li trn JavaScript.

i tng XMLHttpRequest - DOM Level 3 v DOM.

DOM Level 3 Cc gii php tho lun trn khng phi l cc chun. Mc d XMLHttpRequest c h tr rt rng, song vn c th thy mt s s khc bit vi tng trnh duyt. Nhiu ngi tin rng Ajax da vo s h tr ca W3C; tuy nhin thc t khng phi vy. W3C bt u ch trng vo iu ny v mt chun mi c cng b: DOM Level 3 Load and Save Specification. c t ny c thit k nh mt platform c lp vi cc ngn ng thay i ni dung mt ti liu DOM vi XML. Phin bn 1.0 c gii thiu vo thng 4/2004, nhng hin thi cha trnh duyt no thc hin theo n DOM DOM l mt c t ca W3C cho mt platform c lp vi ngn ng lp trnh truy cp v sa i ni dung v cu trc ca ti liu. Mt cch hiu khc, n l mt cch thng dng biu din v thao tc mt ti liu HTML hay XML. Mt iu quan trng cn lu l thit k ca DOM da trn c t ca Object Management Group, cho php s dng vi bt k ngn ng lp trnh no. Ban u DOM c thit k lm cho JavaScript linh ng vi cc trnh duyt, sau n pht trin ra khi gii hn ny. DOM l mt m hnh i tng trong ng cnh hng i tng. DOM xc nh cc i tng cn thit biu din v thay i ti liu, cc hnh vi v thuc tnh ca cc i tng ny, v mi lin h gia cc i tng. C th coi DOM nh mt cy biu din d liu v cu trc ca trang web, mc d thc t n c th khng theo cch nh vy. Simple Table
<table> <tbody> <tr> www.my-ebooks.tk

Created by TempAIDS
<td>Foo</td> <td>Bar</td> </tr> </tbody> </table>

C th biu din theo DOM ca bng trn. Li th ca c t DOM l n cung cp mt chun tng tc vi ti liu. Khng c DOM, khng th thc thi c Ajax. DOM khng ch cho php duyt v chnh sa ni dung, m cn lm cho trang web tr thnh cc trang ng. Kt lun cho cc lot bi v: i tng XMLHttpRequest Chng ta va xem xt cc k thut c bn v l tri tim ca Ajax, i tng XMLHttpRequest.Vi s kt hp gia JavaScript v mt s thao tc DOM, Ajax cho php mt mc tng tc cha tng c t trc n nay. Vi XMLHttpRequest ta khng cn i qu trnh ti np trang web v s ng b vi server na. Trong phn sau chng ta s cng nhau nghin cu v: Gi cc request v x l response Sau mi n: K thut lp trnh vi AJAX.

Nhp mn AJAX (14)

Friday, 30.03.2007, 08:02am (GMT7) Trc ht chng ta cng tm hiu hot ng ca giao thc HTTP truyn thng - Hypertext Transfer Protocol, xem xt cc bn tin message ca giao thc ny. Thay v quan tm n cc bit hay byte, chng ta n cc t ng (thng bo) c xc nh trong c t HTTP v cc quy tc kt hp chng li vi nhau. Mt HTTP message bt u vi mt dng request hay status, tip theo c th l nhiu loi headers v phn message body.

Cu trc ca HTTP Message

HTTP l mt giao thc kiu client/server; client a ra cc request, v server s tr li cc request ny. Cu trc cc HTTP message v th cng thay i theo yu t ny. C mt nh dng cho HTTP request v cho cc response. HTTP Request Mi request bt u vi mt Request-Line. Dng ny ch ra phng thc m client yu cu, ti nguyn, v phin bn ca HTTP m client c th h tr. Request-Line c th c tip sau mt hay nhiu header v mt message body. Mt HTTP request bt u vi mt Request-Line v c th bao gm cc header v message body. Phn header c th m t qu vic truyn d liu, xc nh cc yu cu hay phn message body km theo.
www.my-ebooks.tk

Created by TempAIDS

GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Request-Line cha ba mc phn bit, l method, uri, v phin bn HTTP, mi mc c phn tch bi mt hay nhiu khong trng.

Mt HTTP Request-Line c mt phng thc, mt a ch nh danh ti nguyn (URI), v thng bo phin bn HTTP. Phng thc c xc nh trn dng u tin ca Request-Line. HTTP nh ngha tt c l 8 phng thc. Mt HTTP server ch c yu cu h tr cc phng thc GET v HEAD; nu chng h tr cc phng thc HTTP khc, s h tr phi c gn vi cc quy tc ca HTTP. c t HTTP cng c cc m rng cc phng thc khc c th c b sung trong tng lai. Mc tip theo trong Request-Line l Request-uri. Mc ny cung cp a ch nh danh ti nguyn cho mt ti nguyn. V d, Request-uri l /, ch ra mt request cho ti nguyn gc. Cho cc request khng yu cu mt ti nguyn c th (nh l TRACE request hay trong mt s trng hp c OPTIONS request), client c th dng mt du * cho Request-uri. Mc cui cng trong Request-Line l phin bn HTTP. Nh trong v d, phin bn HTTP l 1.1 cha trong on text HTTP/1.1. Tip sau Request-Line, mt HTTP request c th bao gm mt hay nhiu dng message header. Mt message header c th cha cc loi general header, request header, hoc entity header. General header p dng trong truyn d liu; request header p dng cho cc request c th, v entity header p dng cho message body trong request.

www.my-ebooks.tk

Created by TempAIDS

Mt HTTP request lun cha mt dng trng sau Request-Line v bt k header no. Nu request bao gm mt message body, phn body i sau mt dng trng. Dng trng - blank line rt quan trng v server xc nh c phn kt ca request, hoc phn kt ca header. Khng c dng trng, server nhn cc message s khng bit c cc header khc na c tip tc c truyn khng. HTTP Response HTTP Response kh ging vi HTTP Request. Du hiu khc bit duy nht l response bt u vi mt dng trng thi status so vi Request-Line. Status-Line, cng ging nh Request-Line, cha ba mc ngn cch bi cc khong trng.

Mt HTTP response bt u vi mt Status-Line v c th cha cc header v mt message body. Header c th m t qu trnh truyn d liu, xc nh response, hoc phn body km theo. Dng bt u vi phin bn cao nht ca HTTP m server h tr. HTTP/1.1 200 OK Date: Sun, 08 Oct 2000 18:46:12 GMT Server: Apache/1.3.6 (Unix) Keep-Alive: timeout=5, max=120 Connection: Keep-Alive Content-Type: text/html <html>... HTTP Status-Line bt u vi ch bo HTTP, m trng thi, v mt on text m t response. Hai mc cn li trong Status-Line l Status-Code v Reason-Phrase. Status-Code l mt b ba k t ch bo kt qu ca request. Status-Code ph bin nht l 200. Gi tr ny thng bo yu cu ca client thnh cng. Phn loi HTTP Status Code: (Xem file attach) Header Field
www.my-ebooks.tk

Created by TempAIDS

HTTP request v response c th c mt hay nhiu message header. Message header bt u vi tn trng v du (:). Trong mt s trng hp, ch c tn trng trong phn header. Trong hu ht cc trng hp khc header cha cc thm thng tin khc na, cc thng tin ny i sau du :. Mt message header kt thc cui dng, nhng nu mt client cn biu din nhiu hn mt dng th dng tip theo s bt u vi mt hay nhiu k t trng hay k t gch ngang (ascii character 8). V d sau l ca User-Agent header: GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Nu mt message header cha mt chui gi tr phn tch bi du ,; ta c th tch ra thnh cc dng ring, nh v d sau tch cc gi tr ca Accept-Encoding: GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip Accept-Encoding: deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive Bng sau th hin cc HeaderField, phm vi p dng ca chng trong cc request hay response, hay trong message body (entity) i km vi request hay response.

www.my-ebooks.tk

Created by TempAIDS

www.my-ebooks.tk

Created by TempAIDS

www.my-ebooks.tk