AJAX Tng lai ca Web 2.0

Collection by traibingo

1

Bi 10: 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

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:

Trch:

var xmlHttp;

function createXMLHttpRequest() {

AJAX Tng lai ca Web 2.0

Collection by traibingo

2

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

Bi sau chng ta s i vo phn tch cc c tnh ca XMLHttpRequest.

Bi 11: 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:

AJAX Tng lai ca Web 2.0

Collection by traibingo

3

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

AJAX Tng lai ca Web 2.0

Collection by traibingo

4

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