Ajax Toan Tap Part 7 566

AJAX Tng lai ca Web 2.
0

Collection by traibingo

1

Bi 15: 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.
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.
AJAX Tng lai ca Web 2.0


2
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

Trch:
<!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() {
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();/>


3
</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 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.
Bi sau chng ta s cng nhau tho lun v: DOM Level 3 v DOM kt thc phn: i tng
XMLHttpRequest.
ng thi c tng kt lun.

Bi 16: i tng XMLHttpRequest - DOM Level 3
v DOM.
DOM Level 3


4
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

Trch:
<table>
<tbody>
<tr>
<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.


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

Ajax Toan Tap Part 7 566

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ajax Toan Tap Part 7 566

Transféré par

Droits d'auteur :

Formats disponibles

AJAX Tng lai ca Web 2.

Vous aimerez peut-être aussi