Ajax Vit

Phn 1: Ajax C Bn
Ajax = Asynchronous JavaScript and XML (Java v XML bt ng b). C th tm hiu Ajax l mt k thut yu cu d liu bt i xng ca trnh duyt i vi my ch. Ajax khng phi l mt ngn ng lp trnh mi, nhng l mt tiu chun mi trong lp trnh. Ajax l ngh thut trao i d liu vi mt my ch, cp nht tng phn ca trang web m khng phi ti li ton b trang web. Cho php trang web c cp nht khng ng b v trao i mt phn nh d liu vi my ch mt cch ngm nh. Vi trang web c in (khng s dng Ajax) phi ti li c trang web mi khi c mt phn ni dung thay i. Cc ng dng s dng Ajax: Google Maps, Google Suggest, Gmail, Youtube, Facebook, ... Ajax l mt k xo cho php to mt trang web nhanh v "ng". Ajax da trn cc ngn ng internet c bn v s dng s phi hp ca: + i tng XMLHttpRequest + JavaScript/DOM + CSS +XML Trc khi bt u hc Ajax bn phi hiu bit tt cc ngn ng sau: + HTML/XHTML + CSS + JavaScript/DOM + MySQL + XML + PHP + ASP (nu bn lp trnh ASP phi bit SQL Server) Phi thnh tho s dng cc cng c lp trnh nh Dreamweaver, ng dng localhost nh Wamp, Xampp

Chng 1: Gii thiu

Chng 2: Ajax lm vic nh th no

Ajax lm vic nh th no? Ajax da trn s phi hp ca cc tiu chun internet sau: + i tng XMLHttpRequest ( trao i d liu bt ng b vi my ch). + JavaScript/DOM ( hin th/tng tc vi thng tin). + XML (thng c s dng nh dng d liu trao i). Ajax l mt ng dng pha trnh duyt v c lp nn.

http://pleily.vn

Ajax Vit

hiu Ajax lm vic nh th no, chng ta s to mt ng dng nh Ajax: ng dng Ajax ny da trn mt th div v hai nt bm (button). + Th div s c dng hin th thng tin tr v t my ch. Nt bm gi mt hm, hm ny s ti mt ti liu test nu chng ta nhp ln nt bm.

Chng 3: ng dng Ajax u tin

http://pleily.vn

Ajax Vit

Bc tip theo ta thm th script vo th head ca trang. Th script s cha hm loadXMLDoc():

Chng tip theo chng ta s thm on m Ajax v xem ng dng lm vic nh th no.

http://pleily.vn

Ajax Vit
ng dng Ajax da trn yu t quyt nh l i tng XMLHttpRequest. Hu ht cc trnh duyt u h tr i tng XMLHttpRequest (IE5, IE6 s dng mt ActiveXObject). i tng XMLHttpRequest c s dng yu cu (request) thng tin (d liu) t my ch (server). T v d Ajax trn, hm loadXMLDoc() c gi mt khi nt bm (button) c nhp (click). Trong hm loadXMLDoc(), chng ta cn to mt i tng XMLHttpRequest. on m bn di lm vic trong hu ht cc trnh duyt (browser), (cc trnh duyt di ng c th khng tng thch):
4

Chng 4: i tng XMLHttpRequest

Ch : on m trn c th c s dng mi ln bn cn to mt i tng XMLHttpRequest, vy nn c th lu li, sao chp v dn khi cn. Gii thch gi mt yu cu ti my ch:

gi mt yu cu ti my ch, chng ta s dng phng thc open() v send() ca i tng

http://pleily.vn

Ajax Vit
XMLHttpRequest. Phng thc open() nhn ba tham s: + Tham s u tin ch r phng thc yu cu (GET hay POST). + Tham s th hai ch r ng dn ti nguyn trn my ch. + Tham s th ba ch r yu cu c phi x l bt ng b hay khng. Tham s ny quan trng nht v hu ht cc ng dng Ajax u x l bt ng b. Tham s nhn hai gi tr: true (bt ng b), false (ng b). Phng thc send() gi cc yu cu i n my ch. Thuc tnh (Property) M t (Description) method: phng thc yu cu: GET or POST open(method, url, boolean) url: ng dn ca file boolean: true (bt ng b) hoc false (ng b) null cho mt lnh GET. Ch : khng gi null send(string) cho ActiveXObject i tng XMLHttpRequest. Hng cui cng ca on m trn cp nht innerHTML ca th div vi d liu tr v t my ch. p ng t my ch c th c gi nh l mt chui hoc d liu XML
Thuc tnh (Property) responseText responseXML M t (Description) gi p ng d liu nh l mt chui k t gi p ng d liu nh l d liu XML Gii thch cp nht trang vi p ng t my ch gi p ng t mt my ch, chng ta s dng thuc tnh responseText hoc responseXml ca

http://pleily.vn

Ajax Vit
V d c hon chnh:

Ni dung file test1.txt:

Ni dung file test2.txt:

http://pleily.vn

Ajax Vit

Kt qu trn trnh duyt: a.

7

b.

c.

Chng trc ta lm vic vi Ajax gi yu cu ng b, chng ny ta lm vic tip vi Ajax gi yu cu bt ng b. Cho cc yu cu bt ng b, mt hm gi li phi c to kim tra nu p ng sn sng c x l.
To mt hm gi li

Chng 5: S dng hm gi li (Callback)

Hm gi li s kim tra nu p ng sn sng c x l. Ch l s dng m t chng trc (m s lm vic trn mi trnh duyt):

http://pleily.vn

Ajax Vit

Hm gi li ng k qua thuc tnh onreadystatechange ca i tng XMLHttpRequest Ba thuc tnh quan trng ca i tng XMLHttpRequest khi s dng mt hm gi li: Thuc tnh (Property) onreadystatechange M t (Description) L mt hm dng sn (hoc tn ca mt hm) c gi t ng mi ln thuc tnh readyState thay i. Gi cc trng thi p ng ca server. Thay i gi tr t 0 n 4 khi thc hin mt chu trnh yu cu.

readyState

http://pleily.vn

Ajax Vit
0: cha khi to 1: thit lp kt ni 2: nhn yu cu 3: ang x l 4: kt thc v sn sng p ng 200: "OK" 404: khng to trang (page not found)

status Hm gi li nhn ging nh th ny:

9

M hon chnh nh sau:

http://pleily.vn

Ajax Vit

10

Cc bn chp file html hon chnh, file test1.txt, test2.txt ln mt th mc trn my ch ( c th l my ch localhost), nh l my ch localhost phi c bt. Ln lt thay m ca hm stateChange readyState ln lt l 0,1,2,3,4 status l 200, 404. Kim tra

http://pleily.vn

Ajax Vit
kt qu trn trnh duyt xem cc tham s lm vic nh th no. Th i tn hai file test.txt hay xa hai file ri kim tra li trn trnh duyt i chiu kt qu. on m trn c mnh chy th honh chnh. Nu ko chy l do thao tc ca cc bn. Nn kim tra li.

11

Khng c g nhiu ni v mt my ch Ajax! i tng XMLHttpRequest c th yu cu vi loi d liu. Vi i tng XMLHttpRequest bn c th yu cu cc ti nguyn web t mt my ch. Bn c th yu cu file TXT, file HTML, file XML, file PHP, hnh nh hoc d liu khc min l s dng c trn internet. Ty vo ng dng m bn chn loi d liu yu cu ph hp. + Yu cu file text Thun tin cho nhng bi post thun vn bn, c nh dng sn ni dung bng th div vi css. Ging nh l c mm a, bn gh ch vic b n ln. + Yu cu file XML Thun tin lp trnh tng tc ngi dng. c s dng nhiu nht. + Yu cu file PHP hay ASP Ci ny rt quan trng khi lp trnh nh lp trnh bng gi cha, ( chng khon, c ph, nng sn, thi tit, t gi). + Yu cu file HTML thun Ly mt phn trang web m khng cn ti li trang. + Hon thnh cc FORM. Hon thnh cc form m khng cn phi ti li c trang, gim tiu tn ti nguyn (bng thng). + Yu cu Images Ging yu cu vn bn.

Chng 6: My ch Ajax

Phn 2: Ajax Nng Cao

Chng 7: Ajax Suggest (Gi )

Ajax c s dng to nhng ng dng tng tc web. Google Suggest c xy dng vo nm 2005 l mt ng dng Ajax Suggest. Khi ngi dng g mt t kha ngn no y ln thanh tm kim th lp tc c cc kt qu gi tr v bn di.

http://pleily.vn

Ajax Vit

12

Xy dng v d Ajax Suggest V d di s cho chng ta thy r trang web lm nh th no tng tc vi my ch web. Chng ta s to mt form nhp liu cho php nhp tn vo, nu tn c trong danh sch my ch web th ch cn g mt t chng ta c nhng gi , nu khng th s khng cho ra gi no. a. To form html Trc tin ta to mt form html nh sau:

Chng ta s to ra hm showHint(), by bi s kin onkeyup (nh k t ln). Ta tham chiu ti form ny vi id=" txt1" Di th form l mt th span tham chiu ti vi id="txtHint". Th span s dng mt id="txtHint" dng ly d liu v t my ch web Khi ngi dng nhp d liu, hm showHint() c thi hnh. S thi hnh ca hm showHint() c by bi s kin "onkeyup". C mi ln ngi dng nhp mt k t t bn phm vo trng input hm showHint() li c gi. b.Vit hm showHint() Hm showHint() l mt hm JavaScript nm trong th head ca trang html:

http://pleily.vn

Ajax Vit

13

Hm showHint() c thi hnh mi ln c mt k t nhp vo trng input. Nu trng input (str.length > 0), hm showHint() s thc thi nh bn di: + Ch nh r URL (tn file) gi ti my ch. + Thm mt tham s (q) ti URL vi ni dung ca ca trng input. + Thm mt s ngu nhin (0 hoc 1 bng hm Math.random()) ti my ch to mt file tm. + To mt i tng XMLHTTP, v ni i tng thc thi hm gi li stateChanged khi c mt s thay i no trng input. + M i tng XMLHTTP vi URL cho. + Gi mt yu cu HTTP ti my ch. Nu trng input rng (str.length==0) hm n gin ch lm sch ni dung ca txtHint. (lm trng trng span). c. Vit hm GetXmlHttpObject() Hm showHint() trn gi mt hm c tn l GetXmlHttpObject(). Mc ch ca hm GetXmlHttpObject() l gii quyt vn to cc i tng XMLHTTP khc nhau ca cc trnh duyt khc nhau:

d. Vit hm stateChanged() Hm stateChanged() c ni dung nh bn di:

http://pleily.vn

Ajax Vit

Hm stateChanged() thc thi mi ln trng thi ca i tng XMLHTTP thay i. Khi trng thi thay i n 4 ("honh thnh"), ni dung ca id="txtHint" c lm y vi p ng text t my ch.
14

e. Ni dung ca file gethint.php

M trn ti dng 34, v:

http://pleily.vn

Ajax Vit

15

M trn ti dng 56, v:

Kt qu trn trnh duyt: Khng c gi

http://pleily.vn

Ajax Vit
C gi :

16

Ajax c s dng truyn thng tin qua li vi mt c s d liu. Xy dng v d Ajax Database V d di y s gii thch lm th no mt trang web c th ly thng tin t c s d liu vi cng ngh Ajax. Chng ta s to mt hp chn bng menu th xung nh bn di:

Chng 8: Ajax Database (C s d liu)

a. To trang html M bn di l mt form html v mt link n mt file JavaScript

http://pleily.vn

Ajax Vit
Bn c th thy n l mt form html n gin vi mt hp thc n th xung gi l "Min". Th div bn di form s c dng hin th thng tin tr v t my ch web. Khi ngi dng chn d liu, mt hm gi li "showMien()" c thi hnh. Vic thc thi hm ny c by bi s kin "onchange". Mi ln ngi dng thay i gi tr trong menu th xung, hm showMien() s c gi li. b. Vit m JavaScript Di y l m JavaScript ch trong file "chonmien.js":

17

c. To trang php (trang p ng Ajax trn my ch) Trang laymien.php c gi bi JavaScript M php chy mt truy vn n mt c s d liu MySQL, v kt qu tr v dng m html:

http://pleily.vn

Ajax Vit

18

d. To c s d liu To mt c s d liu tn ajax mien, mt bng mien. Bng cc lnh to Database nh: V lnh to table:

CREATE DATABASE 'ajax mien' DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

CREATE TABLE 'ajax mien'.'mien' ('id' INT( 3 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY , 'Mien' CHAR( 20 ) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL , 'SoTinhTP' INT( 4 ) UNSIGNED NOT NULL , 'TenTinhTP' TEXT CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci; Ch : C th b Colation trong tng dng nu chn collation cho c table.

Dng mt bng ca c s d liu nh sau:

D liu c thm nh sau:

http://pleily.vn

Ajax Vit

19

Xong! By gi ta cng kim chng kt qu trn trnh duyt. Lu c ba file. html, js, php vo cng mt th mc trn my ch. Chy trnh duyt v kim chng kt qu.

http://pleily.vn

Ajax Vit
|

20

Ti y l hi mt ri. Tip thi ch my bn li ni ang hay m li dng:

Chng 9: Ajax XML

Ajax c s dng trao i d liu vi mt file XML. V d sau s gii thch lm th no mt trang web ly thng tin t mt file XML vi cng ngh Ajax. a. To mt trang form html M html bn di gm mt form html n gin v mt link ti file JavaScript.

Chng ta s t thng tin p ng t file XML ly t my ch vo mt th div vi id="xmlGoiy". Khi ngi dng chn d liu, mt hm xemAlbum() s c thi hnh. S thi hnh ca hm c kch hot bi s kin ongchange. Mi ln ngi dng thay i gi tr trong thc n th xung, hm xemAlbum() c gi li.
http://pleily.vn

Ajax Vit
b. To m JavaScript M JavaScript s c t trong trong file "selectalbum.js":

21

c.To trang p ng Ajax trn server layalbum.php Trang layalbum.php s c gi bi JavaScript. Trang PHP c m kch bn load mt ti liu XML, "listalbum.xml", chy mt truy vn n file XML, v tr kt qu l m html.

http://pleily.vn

Ajax Vit

22

d. Vit file XML File XML c tn listalbum.xml

http://pleily.vn

Ajax Vit

23

V t dng 42

http://pleily.vn

Ajax Vit

24

Ch : Vit XML phi chun v ng, dng m k hiu c bit cho chnh xc. V d trn l & thay cho &. Sai l n ku m ln! Xong! Gi hy th kt qu trn trnh duyt:

http://pleily.vn

Ajax Vit

25

p ng text (responseText) tr li cho trnh duyt mt chui p ng xml (responseXMl) gi cho trnh duyt mt file xml Xy Dng V D AJAX p ng XML (ResponseXML) Thuc tnh responseXML s tr kt qu l mt i tng ti liu XML. (T tham kho)

Chng 10: p ng XML Vi AJAX

Chng 11: Thc hnh cc v d AJAX

(T tham kho) Mt ri. Khng vit na. Ng pht

click: nhp chut server: my ch request: yu cu response: p ng asynchronous: bt ng b load: ti object: i tng function: hm data: d liu copy: sao chp paste: dn resource: ti nguyn location: ng dn T tm hiu

Ngun tham kho: http://www.w3schools.com http://www.w3.org

http://pleily.vn