Tm hiu v xy dng ng dng da trn cng ngh AJAX

Mc Lc
I.1 Qu trnh pht trin cc cng ngh trong ng dng Web...............................3 I.1.1 CGI..........................................................................................................3 I.1.2 Applet......................................................................................................3 I.1.3 JavaScript................................................................................................3 I.1.4 JSP/Servlet, ASP v PHP........................................................................3 I.1.5 Flash........................................................................................................3 I.1.6 DHTML..................................................................................................4 I.1.7 XML........................................................................................................4 I.2 Web 2.0 v cng ngh AJAX ........................................................................4 I.2.1 Cng ngh Web th h th hai Web 2.0...............................................4 I.2.2 Cc vn ny sinh v s ra i ca AJAX............................................5 I.2.3 AJAX l g ?............................................................................................5 I.2.4 Cc th mnh ca AJAX.........................................................................5 CHNG II: Cc cng ngh trong AJAX..........................................................8 II.1 Cascading Style Sheet CSS........................................................................8 II.1.1 Gii thiu v CSS..................................................................................8 II.1.2 Cc u im ca CSS trong thit k web...............................................8 II.1.3 C php c bn ca CSS........................................................................9 II.1.4 Cc thuc tnh ca CSS Style.................................................................9 II.2 Document Object Model DOM..................................................................9 II.2.1 Lm vic vi DOM bng JavaScript......................................................9 II.2.2 Tm kim mt DOM Node.....................................................................9 II.2.3 To DOM Node.....................................................................................9 II.2.4 Thm style vo ti liu.........................................................................10 II.2.5 S dng thuc tnh innnerHTML.........................................................10 II.3 XML v vic truyn d liu bt ng b....................................................10 II.3.1 Gii thiu v XML v XSLT...............................................................10 II.3.2 XMLHttpRequest................................................................................11 II.4 Lp trnh bng JavaScript pha client..........................................................11 CHNG III: i tng XMLHttpRequest....................................................13 III.1 Gii thiu v XMLHttpRequest ................................................................13 III.2 Phn tch cc c tnh ca XMLHttpRequest............................................13 III.2.1 Cc phng thc v thuc tnh...........................................................13 III.2.2 S tng tc........................................................................................13 III.2.3 Cc phng thc GET v POST.........................................................14 III.3 Remote Scripting.......................................................................................14 III.3.1 Tng quan v Remote Scripting.........................................................15 III.4 Gi cc request..........................................................................................15 III.5 DOM Level 3 v DOM..............................................................................15 III.5.1 DOM Level 3......................................................................................15 III.5.2 DOM...................................................................................................15

1 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

III.6 Kt lun.....................................................................................................15 CHNG IV: Gi cc request v x l response............................................16 IV.1 Giao thc HTTP........................................................................................16 IV.1.1 Cu trc ca HTTP Message..............................................................16 IV.1.2 Header Field.......................................................................................17 IV.1.3 Status Code.........................................................................................17 IV.2 X l cc response ca server....................................................................17 IV.2.1 Dng thuc tnh innerHTML to ni dung ng...........................17 IV.2.2 Phn tch response theo chun XML.................................................17 IV.2.3 Cp nht ni dung ng vi W3C DOM............................................18 IV.3 Gi cc tham s request t pha client.......................................................18 IV.3.1 Gi cc tham s request theo chun XML..........................................18 IV.3.2 Gi d liu ti server bng JSON.......................................................18 IV.4 Kt lun.....................................................................................................18 CHNG V: Xy dng ng dng AddressBook.............................................19 V.1 Gii thiu ...................................................................................................19 V.2 Thit k cc module trong ng dng..........................................................19 V.3 Thit k c s d liu.................................................................................19 V.4 Trin khai ng dng ...................................................................................20 V.4.1 Yu cu................................................................................................20 V.4.2 Qui trnh ci t...................................................................................20 V.4.3 Kt qu ci t ng dng trn Windows..............................................20 V.5 Trin khai mt ng dng khng dng AJAX..............................................21 V.5.1 Gii thiu v ci t ng dng SimpleAddressBook...........................21 VI.5.2 So snh hai ng dng AddressBook v SimpleAddressBook ............21 KT LUN..........................................................................................................21

Nhim v ca n
n ny tp trung nghin cu v cng ngh Ajax v ng dng ca n, trong tp trung vo cc yu t sau: Gii thiu v AJAX, cc cng ngh trong AJAX Vic truyn v x l d liu trong AJAX Cc framework cho pht trin ng dng web vi AJAX Xy dng ng dng p dng AJAX

Kt qu
Nu ln qu trnh pht trin ca cng ngh Web v th h Web 2.0 Tm hiu cc cng ngh trong AJAX l CSS, DOM, XML v JavaScript Nghin cu v i tng XMLHttpRequest, y l tri tim ca cng ngh AJAX Nghin cu vic truyn v x l d liu pha client cng nh server Xy dng ng dng vi AJAX

2 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

CHNG I: Tng quan v AJAX

I.1 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. 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.

I.1.1 CGI
CGI cho php to cc chng trnh chy khi ngi dng gi cc yu cu. CGI khng phi l cch an ton cho cc trang Web ng. Vi CGI, ngi khc c th chy chng trnh trn h thng.

I.1.2 Applet
Applet cho php cc nh pht trin Vt cc ng dng nh nhng vo trang Web. 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 thc thi trn pha client.

I.1.3 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. Vic ngi ta coi cc trang nh l mt i tng lm ny sinh mt khi nim mi gi l Document Object Model (DOM). 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 VBScript.

I.1.4 JSP/Servlet, ASP v PHP

Servlet l mt bc tin ln, n a ra mt th vin hm API trn Java v mt th vin hon chnh thao tc trn giao thc HTTP. JSP v ASP u c thit k phn tch qua trnh x l khi qu trnh biu din. Cc cng ngh khc, trong phi k n l PHP (Hypertext Preprocessor) cho ti Cold Fusion. Cc cng ngh ny cung cp cc b cng c rt mnh cho cc nh pht trin.

I.1.5 Flash
Flash cho php cc nh thit k to cc ng dng hot ha v linh ng. Flash khng i hi cc k nng lp trnh cao cp v rt d hc.

3 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX I.1.6 DHTML

Trong thc t n l mt tp hp gm HTML, Cascading Style Sheets (CSS), JavaScript, v DOM. Tp hp cc cng ngh trn cho php cc nh php trin sa i ni dung v cu trc ca mt trang Web mt cch nhanh chng.

I.1.7 XML
Ngy nay chng ta c rt nhiu dng dn xut ca XML cho cc ng dng Web (tt nhin l c c XHTML): XUL ca Mozilla; XAMJ, mt sn phm m ngun m trn nn Java; MXML t Macromedia; v XAML ca Microsoft.

I.2 Web 2.0 v cng ngh AJAX

I.2.1 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".

I.2.1.1 Khi nim

Dougherty khng a ra nh ngha m ch dng cc v d so snh phn bit Web 1.0 v Web 2.0. C 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. D liu c vai tr then cht 5. Phn mm c cung cp dng dch v web v c cp nht khng ngng 4. Pht trin ng dng d dng v nhanh chng 6. Phn mm c th chy trn nhiu thit b 7. Giao din ng dng phong ph

I.2.1.2 Cng ngh

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 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. Dch v web 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 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.

4 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

Phn mm my ch 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.

I.2.2 Cc vn ny sinh v s ra i ca AJAX

Mt trong nhng gii hn quan trng ca cc ng dng Web hin ti l cch thc 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. 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). Ajax ra i l mt gii php cho cc ng dng Web hin nay.

I.2.3 AJAX l g ?
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.

I.2.4 Cc th mnh ca AJAX

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: 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.

5 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

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.

So snh hai m hnh ng dng Web: truyn thng v s dng Ajax

6 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

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 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.

7 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

CHNG II: Cc cng ngh trong AJAX

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.

II.1 Cascading Style Sheet CSS

II.1.1 Gii thiu v CSS
Cascading Style Sheet tm dch l bng kiu xp chng - l mt phn khng th thiu trong thit k Web. 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. 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 : o S dng trc tip km vi cc th HTML (Inline Style Sheet) o nh ngha trong mt trang web (Internal Style Sheet). o nh ngha thnh mt file CSS ring (External Style Sheet). Trang web ca chng ta s tham 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.

II.1.2 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 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 d. Th t p dng cc nh dng Inline Style (Style c qui nh trong mt th HTML c th) Internal Style (Style c qui nh trong phn <HEAD> ca mt trang HTML) External Style (style c qui nh trong file CSS ngoi) Browser Default (thit lp mc nh ca trnh duyt)

8 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX II.1.3 C php c bn ca CSS
C php ca CSS gm ba thnh phn: Thnh phn la chn (thng l mt th HTML) (Selector) Thuc tnh (Property) Gi tr (Value) c ba cch chn CSS vo trang web. a. External Style Sheet (s dng file CSS c nh ngha thnh trong file ring) b. Internal Style Sheet (nh ngha cc style sheet ngay trong trang web) c. Internal Style Sheet (style c qui nh ngay trong mi th HTML)

II.1.4 Cc thuc tnh ca CSS Style

Cc thuc tnh color, font size, m ca phng, v kiu ch s dng.

II.2 Document Object Model DOM

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 Vt mt ng dng Ajax. 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.

II.2.1 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.

II.2.2 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. Mi phn t HTML c mt thuc tnh ID. 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 : var hello=document.getElementById('hello'); Mt cch khc tm kim l da trn loi th HTML, dng phng thc getElementsByTagName().

II.2.3 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 .

9 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

Cc phng thc chun to nt mil document.createElement() v document.createTextNode().createTextNode() to mt nt th hin qua mt on text, thng c tm thy trong cc th v heading, div, paragraph, v list item. 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.

II.2.4 Thm style vo ti liu

DOM cng cung cp cc phng thc chnh sa style. Thuc tnh className 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";

II.2.5 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.

II.3 XML v vic truyn d liu bt ng b

II.3.1 Gii thiu v XML v XSLT II.3.1.1 XML l g?
Nm 1969, IBM cho ra i GML l ngn ng dng c t cho ngn ng khc. V sau GML pht trin thnh SGML l chun lu tr v chuyn i d liu. Nhng qu phc tp v tiu tn nhiu cng sc trong vic hin thc. XML ra i kt hp c sc mnh ca SGML v tnh ph dng ca HTML.

II.3.1.2 Cc c im ca XML
XML tng thch vi SGML D dng Vt c nhng chng trnh x l ti liu XML Ti liu XML d c v c tnh hp l cao XML c xy dng vi s gim thiu nhng thuc tnh ty chn 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

10 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX II.3.1.3 Cu trc mt ti liu XML
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.

II.3.1.4 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.

II.3.2 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. XMLHttpRequest c a ra nh l mt gii php mnh m v hiu qu.

II.3.2.1 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.

II.3.2.2 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.

II.3.2.3 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. 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.

II.4 Lp trnh bng JavaScript pha client

JavaScript l mt ngn ng lp trnh a nng, n l 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 v cc bin ging nhau c th c gn bi cc kiu khc nhau. Thng dch ngha l cc m ngun khng c bin dch thnh cc on m

11 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

nh phn c th thc thi c, v n c thc thi trc tip, c th l qua cc trnh duyt. a nng ngha l ngn ng ny thch hp lp trnh theo hu ht cc thut ton v cc tc v. 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.

12 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

CHNG III: i tng XMLHttpRequest

III.1 Gii thiu v XMLHttpRequest
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. 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.

III.2 Phn tch cc c tnh ca XMLHttpRequest

III.2.1 Cc phng thc v thuc tnh
void open(string method, string url, boolean asynch, string username, string password): Phng thc ny thit lp mt phin gi ti server. 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. 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. void setRequestHeader(string header, string value): Phng thc thit lp gi tr cho phn header cho trong HTTP request. 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. string getResponseHeader(string header): Phng thc ny tng t nh getAllResponseHeaders();

III.2.2 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.

13 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

M hnh tng tc chun Ajax

1. 2.

3. 4. 5. 6.

Qu trnh tng tc: 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. 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(). Mt request c to v gi n server. Server x l cc yu cu 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. 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.

III.2.3 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, 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.

III.3 Remote Scripting

Chng ta cng xt mt cng ngh gi l remote scripting n cung cp mt c ch dng trnh vic ti np cc trang web.

14 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX III.3.1 Tng quan v 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.

III.4 Gi cc request
1. 2. 3. 4. Cc bc c bn gi request dng i tng XMLHttpRequest l: Dng mt tham chiu ti mt th hin ca XMLHttpRequest Khai bo cho i tng XMLHttpRequest v hm s x l cc trng thi ca XMLHttpRequest. Gn cc thuc tnh ca request. Gi request ti server.

III.5 DOM Level 3 v DOM

III.5.1 DOM Level 3
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.

III.5.2 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. thit k ca DOM da trn c t ca Object Management Group, cho php s dng vi bt k ngn ng lp trnh no. 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 V v thuc tnh ca cc i tng ny, v mi lin h gia cc i tng. Li th ca c t DOM l n cung cp mt chun tng tc vi ti liu.

III.6 Kt lun
Trong chng ny, 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.

15 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

CHNG IV: Gi cc request v x l response

IV.1 Giao thc HTTP

Mt HTTP message bt u vi mt dng request hay status, tip theo c th l nhiu loi headers v phn message body.

IV.1.1 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.

IV.1.1.1 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. 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. Mc tip theo trong Request-Line l Request-uri. Mc ny cung cp a ch nh danh ti nguyn cho mt ti nguyn. Mc cui cng trong Request-Line l phin bn HTTP 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. Mt HTTP request lun cha mt dng trng sau Request-Line. Dng trng - blank line rt quan trng v server xc nh c phn kt ca request, hoc phn kt ca header

IV.1.1.2 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.

16 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

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. 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. StatusCode 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.

IV.1.2 Header Field

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.

IV.1.3 Status Code

Mt phn rt quan trng ca HTTP response l m trng thi - status code. M ny xc nh xem yu cu ca client c c thc hin thnh cng hay khng v cung cp thm thng tin v request. Mi gi tr status code l mt s ba k t.

IV.2 X l cc response ca server

XMLHttpRequest cung cp hai thuc tnh truy cp vo response ca server. Thuc tnh u tin, responseText, ch n gin l cung cp response di dng mt bin string. Thuc tnh th hai, responseXML, cung cp response di dng i tng XML. Truy cp response di dng text n gin rt thun li cho cc trng hp s dng n gin, chng hn nh hin th response trong mt alert hay response l mt cu trc n gin thng bo thnh cng hay b li.

IV.2.1 Dng thuc tnh innerHTML to ni dung ng

Rt kh khn khi dng cc response dng text to ni dung ng cho cc trang web. Thuc tnh responseText tr nn hu ch nu ta dng n chung vi thuc tnh innerHTML ca cc phn t HTML. N n gin l mt xu k t biu din ni dung gia mt th m v th ng. Bng cch dng kt hp responseText v innerHTML, server c th a ra cc on m HTML s c hin th bi cc trnh duyt qua thuc tnh innerHTML.

IV.2.2 Phn tch response theo chun XML

C th server khng cn thit phi gi response vi nh dng XML. N hon ton c th gi response di dng text. Cc cu trc d liu phc tp thng c gi trong nh dng XML.

17 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX IV.2.2.1 W3C Document Object Model
W3C Web nh ngha v DOM: Document Object Model (DOM) l mt nn tng hay l mt giao din ngn ng trung gian cho php cc chng trnh hay cc script truy cp v cp nht ng ni dung, cu trc, kiu dng ca ti liu (document). Ti liu c th c x l, v kt qu ca qu trnh x l ny c th kt hp li trong trang hin th.

IV.2.2.2 W3C DOM v JavaScript

Rt d nhm ln W3C DOM vi JavaScript. DOM l mt tp cc hm API cho cc ti liu HTML v XML, cung cp mt cu trc biu din ti liu v xc nh xem cu trc ti liu c truy cp qua script nh th no. JavaScript l mt ngn ng c dng truy cp v thao tc DOM. Khng c DOM, JavaScript khng th c cc khi nim v trang web v cc phn t nh du trang web .

IV.2.3 Cp nht ni dung ng vi W3C DOM

W3C DOM cung cp cc thuc tnh v phng thc cho php duyt cu trc XML v khai ph d liu yu cu.

IV.3 Gi cc tham s request t pha client

Nu gi request khng km tham s, server s khng c bit c yu cu ca client, v n s gi cc response ging nhau ti tt c client. Cng ngh AJAX yu cu vic gi d liu phi c ng cnh (tc l c cc tham s i km).

IV.3.1 Gi cc tham s request theo chun XML

C th gi d liu dng XML ti server nh mt phn ca request body, ging nh cc cu truy vn c gi trong request body trong mt POST request. Server c th c d liu XML t request body v lm vic vi chng.

IV.3.2 Gi d liu ti server bng JSON

JSON l mt chun nh dng text c lp vi cc ngn ng, c th dng tng t nh cc ngn ng h C nh C, C#, JavaScript,. JSON c xy dng theo hai cu trc d liu h tr tt cc ngn ng lp trnh hin i: Mt tp cc cp name/value. Trong cc ngn ng hin i chng c bit di cc kiu object, record, hay dictionary. Mt danh sch c th t, nh l mt mng.

IV.4 Kt lun
Trong chng ny ta tm hiu mt s cch m XMLHttpRequest v server c th trao i d liu vi nhau. XMLHttpRequest c th gi request dng cc phng thc HTTP GET hay POST, trong khi d liu request c th gi qua

18 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

cc cu truy vn, XML hay d liu JSON. Sau khi x l request, server tr li bng cc d liu text n gin, d liu XML hay thm ch l d liu JSON.

CHNG V: Xy dng ng dng AddressBook

V.1 Gii thiu

AddressBook l mt ng dng web dng qun l cc danh b trc tuyn. ng dng ny c xy dng vi PHP/MySQL c p dng AJAX.

V.2 Thit k cc module trong ng dng

ng dng AddressBook c cc module chnh sau: Module admin Module qun l login/logout cho user Module qun l danh mc Module qun l nhm Module qun l danh sch mail Module qun l cc chc nng khc

V.3 Thit k c s d liu

Ta thit k d liu theo cch t trn xung; ngha l chng ta i tm cc bng, sau tm cc mi lin kt gia cc bng ny, lp s quan h. Xy dng cc bng d liu V ngi s dng ta xy dng bng user lu thng tin ngi dng, v mt bng khc l user_person lu thm cc thng tin v vai tr ca ngi dng trong h thng, l ngi s dng hay l tn ngi trong cc danh mc. Nhng ngi c tn trong cc danh mc c lu tr trong bng person, v bng user_person vi cch thit lp nh ni trn, bng group dng lu cc nhm, address lu cc a ch a l, contact dng lu cc cch lin h c th qua email, in thoi..Bng mailling_list lu cc nhm danh sch email v mailling_list_contact cha id ca mailling_list v contact gi mail cho mt nhm no . Bng closed_frame lu cc frame mc nh c ng li trn giao din.

19 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

V.4 Trin khai ng dng

V.4.1 Yu cu
Ta s dng Appserv trin khai ng dng ny.

V.4.2 Qui trnh ci t

Sau y l cc bc ci t ng dng: Ci t Appserv trn localhost Vo a ch http://localhost/phpMyadmin/ to c s d liu cho ng dng Copy project AddressBook vo th mc webroot (mc nh l \appserv\www) M file cu hnh properties.inc.php (trong AddressBook\inc) cu hnh user v password ca admin Truy cp a ch http://localhost/AddressBook/admin/ vi user v pass c to ngi dng Vo a ch http://localhost/AddressBook/ v s dng chng trnh

V.4.3 Kt qu ci t ng dng trn Windows

20 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

V.5 Trin khai mt ng dng khng dng AJAX

V.5.1 Gii thiu v ci t ng dng SimpleAddressBook
ng dng SimpleAddressBook dng qun l thng tin cc danh mc, gm tn a ch, in thoi y l mt ng dng rt n gin c vit bng PHP/MySQL. Vic trin khai v thc thi ng dng ny vi WAMP Server rt d dng.

VI.5.2 So snh hai ng dng AddressBook v SimpleAddressBook

Chy ng dng SimpleAddressBook trn localhost ta c kt qu sau:

Ta thy khi thc thi mt ng dng khng dng AJAX, mi khi chuyn mt tc v no , chng hn nh thm mt danh mc vo danh b. Trang web s c np li ton b, xut hin thanh tin trnh ca qu trnh np. Trong khi vic thay i cc tc v trong ng dng AddressBook ch dn n s thay i phn ca trang web c thao tc. Ta khng phi i cho vic np li ton b trang web. Nh vy, c th kt lun u im v sc mnh ca AJAX ch, n khng thao tc ng b vi server theo cch truyn thng l cch np li ton b trang web m n truyn d liu theo kiu bt ng b, cho php lm vic vi tng phn ca trang web.

KT LUN
21 Phm Th Thu Duyn- Lp CT702

Tm hiu v xy dng ng dng da trn cng ngh AJAX

AJAX l mt cng ngh mang tnh t ph v l cng ngh ch cht ca th h Web 2.0. Vi AJAX, khng ch l vn ci thin tc duyt Web, m quan trng hn l vic xa nha ranh gii gia cc ng dng Web v ng dng Desktop. Vic m hnh ha theo hng i tng (DOM) cc trang web cho ta mt hng tip cn v thao tc vi tng phn ca trang web vi cc ngn ng script (nh JavaScript) tr nn d dng v hiu qu. hin th cc trang web pha client th CSS l mt gii php hon ho. S kt hp cc cng ngh hin th v cp nht ni dung pha trnh duyt cng vi vic truyn d liu bt ng b qua XMLHtttpRequest hnh thnh ln AJAX. AJAX c th m ra mt hng i mi cho CNTT, khi c th chia s v tit kim ti a. Mt s hng nghin cu v pht trin vi AJAX c th c trin khai l: - Xy dng cc ng dng Web thay th cc ng dng desktop. - Nng cao tnh cng ng v chia s trong cc ng dng Web (mt v d l ng dng flickr). - Xy dng cc ng dng web c tnh tng tc cao vi ngi dng (nh cc ng dng blog, wiki) - To ra cc ng dng Web kiu AJAX thay th cc ng dng web truyn thng. Tt nhin, AJAX ang trong qu trnh hon thin, vn c nhiu vn phi gii quyt, nhng trong tng lai gn, cc ng dng AJAX s dn thay th cc ng dng dng cng ngh truyn thng.

22 Phm Th Thu Duyn- Lp CT702