Ajax

Trong nhng nm gn y, ngi ta hay nh gi mt trang web da vo cng ngh m
trang ang ng dng. Mt trong nhng cng ngh tr nn rt nh m trong thi gian
gn y l ng dng web c gi l AJAX. N l tng hp ca nhiu cng ngh khc
nhau.
AJAX l ch vit tt ca Asynchronous JavaScript and XML. Nhng cng ngh c trong
mt gii php AJAX bao gm
JavaScript dng tng tc vi ngi dng hoc cc s kin lin quan n trnh
duyt.
i tng XMLHttpRequest, cho php nhng cu lnh truy vn c gi n
server m khng lm gin on nhng tc v khc ca trnh duyt
XML trn server, hoc nhng nh dng d liu tng t nh HTML v JSON
Thm JavaScript, dng chuyn i d liu t server v hin th n ln trang
web.
Cng ngh AJAX c ca tng nh l v cu tinh ca th gii web, n bin nhng trang
web tnh thnh nhng ng dng c tnh tng tc cao. Rt nhiu frameworks c to ra
gip cc lp trnh vin hc cch s dng n, chnh bi s khng nht qun ca trnh
duyt trong vic ng dng i tng XMLHttpRequest, jQuery cng khng phi l ngoi
l.
Chng ta s xem xem AJAX c thc s k diu nh ngi ta hay ni khng.
Ti d liu khi c yu cu
ng sau nh hong quang, th AJAX thc s ch l mt cng c dng ti d liu t

server v trnh duyt m khng cn phi refresh li trang web. Nhng d liu ny c
nhiu nh dng v chng ta cng c nhiu la chn lm vic vi n khi n c ti
xong.
Chng ta s xy dng mt trang web hin th nhng t mi trong cun t in, cc nhm
t c gom li di mt ch ci nh trong t in. M HTML nh dng vng ni
dung ca trang s nh sau:
1<div id="dictionary">
2</div>
Yep! Ch c vy thi. Trang web ca chng ta s khng c ni dung no ht. Chng ta s
s dng nhng phng thc AJAX ca jQuery hin th th <div> vi cun t in.
Chng ta s cn mt ni kch hot qu trnh ti d liu, do vy chng ta s thm vo
vi ng lin kt sau ny mnh c ni gn b x l s kin.
1 <div class="letters">
2 <div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
3
4 </div>
5 <div class="letter" id="letter-b">
6 <h3><a href="#">B</a></h3>
7 </div>
<div class="letter" id="letter-c">
8 <h3><a href="#">C</a></h3>
9 </div>
10<div class="letter" id="letter-d">
11<h3><a href="#">D</a></h3>
12</div>
</div>
13
14
Thm mt cht CSS, chng ta c mt trang nh sau
By gi chng ta tp trung vo phn ly ni dung cho trang.

Gn HTML vo
ng dng AJAX thng ch l nhng truy vn c c nhng on m HTML. K

thut ny i khi cn c gi l AHAH (Asynchronous HTTP and HTML), li qu n
gin vi jQuery. Trc ht chng ta cn mt on m HTML chn, chng ta s to
mt file mi t tn l a.html. File HTML ny s c m nh sau:
1
2
3
4
5
6
7
8
9
<div class="entry">
<h3 class="term">ABDICATION</h3>
<div class="part">n.</div>
<div class="definition">
An act whereby a sovereign attests his sense of the high
temperature of the throne.
<div class="quote">
<div class="quote-line">Poor Isabella's Dead, whose
abdication</div>
<div class="quote-line">Set all tongues wagging in the
Spanish nation.</div>
10
11
12
13<div class="quote-line">For that performance 'twere
14unfair to scold her:</div>
15<div class="quote-line">She wisely left a throne too
hot to hold her.</div>
16<div class="quote-line">To History she'll be no royal
17riddle —</div>
18<div class="quote-line">Merely a plain parched pea that
19jumped the griddle.</div>
class="quote-author">G.J.</div>
20<div
</div>
21</div>
22</div>
23<div class="entry">
24<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
25<div class="definition">
26Independent, irresponsible. An absolute monarchy is one
27in which the sovereign does as he pleases so long as he
28pleases the assassins. Not many absolute monarchies are
29left, most of them having been replaced by limited
monarchies, where the sovereign's power for evil (and for
30good) is greatly curtailed, and by republics, which are
31governed by chance.
32</div>
33</div>
34
35
36
y l hnh m chng ta s c c, tt nhin n nhn hi ci v cha c nh dng g
ht.
Bn cng nn ch l file a.html khng phi l mt ti liu HTML thc s, bi v n

khng c th <html>, <head> v <body>. y l nhng th bt buc phi c cho mt ti
liu HTML. Nhng file nh th ny c gi l mnh hoc on m, mc ch tn ti
ca n ch dng chn vo nhng ti liu HTML khc, y chnh l vic chng ta s
lm.
1$(document).ready(function() {
2$('#letter-a a').click(function() {
3$('#dictionary').load('a.html');
4return false;
5});
});
6
Phng thc .load() s lm tt c nhng vic cn li cho chng ta. Chng ta ch cho n
ng dn n on m cn chn bng cch s dng nhng b chn jQuery thng
thng, v sau a URL ca tn file m chng ta cn ti di dng tham s ca
phng thc. By gi nu bn nhp chut vo ng lin kt u tin, tp tin s c
ti v t vo trong <div id=dictionary>. Trnh duyt s x l on m HTML mi ngay
khi n c chn vo.
Bn nh n thy rng m HTML ca chng ta t ng c nh dng CSS cn trc y

th n khng c nh dng g. Bi v ngay sau khi on m HTML ny c chn vo
trang th n s chu nh hng bi cc lu t CSS ca trang n c chn vo.
Khi bn th nhn m t ch th nh ngha ca t s xut hi n gn nh ngay l p tc.
y chnh l im nhm ln khi bn lm vi c local. Bn s khng thy c thi gian
phi i truyn ti ti li u trn mng. Gi s chng ta thm m t thng bo khi nh
ngha ca t ti xong
4alert('Loaded!');
5return false;
});
6});
7
Khi bn nhn vo on m jQuery trn bn c th ngh rng h p thng bo ch xut
hi n sau khi ti li u c ti xong. Nhng l nh ca JavaScript l ng b , lm xong
vi tc v ny mi n tc v khc theo tr t t nghim ng t.
Nhng nu on m ny c chy th trn host th t th bng thng bo xut hi n v
bin mt trc khi qu trnh ti hon thnh, chnh l do s ch m tr ca mng. iu

ny xy ra l v nhng cu c gi ca AJAX l khng ng b . Nu khng th ta phi gi
n l SJAX, nghe khng thy ph ri.
Ti d li u khng ng b c ngha l m t khi truy vn HTTP gi i ly on m
HTML v c s dng, on m va gi truy vn l p tc quay li hot ng m
khng ch thm g na. Khong m t lc sau, trnh duy t nh n c phn hi t server
v x l n. Thng th y l iu mnh mun bi v bn khng mun kha ca s
duy t web ca ngi dng trong khi ch ti d li u.
Nhng nu bn mun on m phi ch cho n khi qu trnh ti hon thnh, jQuery
cung cp m t hm truy hi cho vn ny. Chng ta hy xem v d di y
Lm vic vi i tng JavaScript
ti c mt trang HTML c nh dng y rt n gin, nhng cng c lc

chng ta mun on m ca mnh c th x l d liu trc khi n c hin th. Trong
trng hp ny, chng ta cn ly d liu ra vi cu trc m chng ta c th dng
JavaScript thao tc.
Vi b chn jQuery, chng ta c th di chuyn qua li trong HTML v thao tc vi n,
nhng trc ht n phi c chn vo ti liu . nh dng d liu thun JavaScript
hn c ngha l bn t phi vit t m hn.
Ly ra mt i tng JavaScript
Nh chng ta thng thy, i tng JavaScript ch l t p hp ca nhng cp key-value,
v c th c nh ngha ngn gn vi cp ngoc cong {}. Tri li, mng JavaScript li
c nh ngha bng cp ngoc vung []. Kt hp hai khi nim ny, chng ta c th
biu t c nhng cu trc phc tp v giu d li u.
Khi nim JavaScript Object Notation (JSON) c gii thiu bi Douglas Crockford
t n dng th mnh v c php n gin ny. Bn k php ny cho chng ta mt s thay
th hon ho cho nh XML, m c lc rt cng knh.
1
{
2"key": "value",
3"key 2": [
4"array",
5"of",
6"items"
]
7}
8
Lu : Nu bn mun bit thm nhng thng tin v th mnh ca JSON v nhng ng
dng ca n cho nhng ngn ng lp trnh khc, bn c th vo trang web www.json.org
Chng ta c th m ha d liu ca chng ta bng cch s dng nh dng ny bng

nhiu cch. Chng ta s vi mc t trong t in mt file JSON v t tn l b.json.
on m s nh sau
1
2
3 [
4 {
"term": "BACCHUS",
5 "part": "n.",
6 "definition": "A convenient deity invented by the...",
7 "quote": [
8 "Is public worship, then, a sin,",
for devotions paid to Bacchus",
9 "That
"The lictors dare to run us in,",
10"And resolutely thump and whack us?"
11],
12"author": "Jorace"
13},
{
14"term": "BACKBITE",
15"part": "v.t.",
16"definition": "To speak of a man as you find him when..."
17},
18{
"term": "BEARD",
19"part": "n.",
20"definition": "The hair that is commonly cut off by..."
21},
22
23
ly d liu ny ra, chng ta s s dng phng thc $.getJSON(), phng thc ny s
tm np tp tin v x l n, kt qu ca on m c gi s l i tng JavaScript.
Hm jQuery ton cc
Cho n thi im ny, nhng phng thc m chng ta s dng c gn vo mt i

tng jQuery m chng ta to ra bng cch s dng hm $(). B chn cho php chng ta
chn ra mt im trong DOM cc phng thc ca chng ta lm vic trn chng.
Nhng hm $.getJSON th li khc. N s khng c p dng ln bt c phn t DOM
no, i tng tr v phi c s dng cho on m ch khng phi l chn vo trang.
Chnh v l do ny m hm getJSON() c nh ngha l phng thc i tng jQuery
ton cc (mt i tng c gi bi jQuery hoc c $ xc nh mt ln bi jQuery)
ch khng phi mt phin bn i tng jQuery (i tng c chng ta to vi hm $
().
Nu JavaScript c class nh nhng ngn ng l p trnh hng i tng khc, th chng
ta s gi $.getJSON() l m t phng thc class. Do vy chng ta gi phng php dng
ny l hm ton cc, trong thc t, n l nhng hm s dng du cch jQuery trnh b
xung t vi tn ca cc hm khc.
s dng hm ny, chng ta truyn qua tn file nh trc:

2$('#letter-b a').click(function() {
3$.getJSON('b.json');
4return false;
5});
});
6
on m trn khng to ra thay i g r rng khi bn nhp vo ng lin kt. Hm
c gi s ti t p tin, nhng chng ta cha bo JavaScript phi lm g vi d li u c
c. Do v y chng ta phi s dng hm truy hi.
Hm $.getJSON() ly vo m t tham s th 2, tham s ny cng chnh l m t hm c
gi khi qu trnh ti hon thnh. Nh ni trc y, nhng cu c gi ca AJAX l dng
khng ng b , cho nn hm truy hi s i cho d li u c ti ht thay v chy on
m ngay l p tc. Hm truy hi ny cng ly vo m t tham s na dng cha d li u
thu v. Nn chng ta c th vit:
2$('#letter-b a').click(function() {
3$.getJSON('b.json', function(data) {
4});
5return false;
});
6});
7
y chng ta s dng m t hm n nh l hm truy hi, nh m t cch vit tt ph bin
trong jQuery. M t hm c th c s dng lm hm truy hi.
Bn trong hm ny, chng ta c th s dng bin s data di chuyn trong cu trc d
li u nu cn. Chng ta cn phi chy ln mng trn cng, xy dng HTML cho tng
phn t. Chng ta cng c th lm vi c ny vi m t vng for, nhng thay vo , chng
ta s lm quen vi m t hm ton cc na ca jQuery l $.each(). Chng ta bit m t
hm gn ging n l phng thc .each() trong chng 5. Thay v ch lm vi c vi m t
i tng jQuery, hm ny ly vo m t mng ho c m t biu lm tham s th nht v
m t hm truy hi lm tham s th 2. Mi ln vng l p chy th ch s l p hi n ti v
phn t hi n ti trong mng ho c biu c chuyn vo nh hai tham s cho hm
truy hi.
1
2
3
4
5
6
$(document).ready(function() {
$('#letter-b a').click(function() {
$.getJSON('b.json', function(data) {
$('#dictionary').empty();
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
7
8
9 html += '<div class="definition">';
html += entry['definition'];
10html += '</div>';
11html += '</div>';
12$('#dictionary').append(html);
13});
14});
return false;
15});
16});
17
18
Trc khi vng l p bt u, chng ta lm rng th <div id=dictionary>, do v y
chng ta c th chn vo m HTML va to c. Sau chng ta s dng hm $.each()
kim tra tng phn t m t, xy dng cu trc HTML da vo n i dung ca biu .
Cui cng chng ta bin on m HTML thnh cy DOM bng cch gn n vo th
<div>
Lu : cch ny gia s rng d li u tai v l an ton s dng vi HTML, n khng
c c nhng ky hi u nh kiu <.
By gi ch cn phn trch dn ca mc t trong t in, bng cch s dng m t vng
l p $.each() na.
1 $(document).ready(function() {
2 $('#letter-b a').click(function() {
$.getJSON('b.json', function(data) {
3 $('#dictionary').empty();
4 $.each(data, function(entryIndex, entry) {
5 var html = '<div class="entry">';
6 html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
7 html += '<div class="definition">';
8 html += entry['definition'];
9 if (entry['quote']) {
10html += '<div class="quote">';
11$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
12});
13if (entry['author']) {
14html += '<div class="quote-author">' + entry['author'] + '</div>';
15}
+= '</div>';
16html
}
17html += '</div>';
18html += '</div>';
19$('#dictionary').append(html);
20});
});
21return false;
22
23
24
});
25});
26
27
28
By gi bn c th th nhp chu t vo ch B xem th kt qu
Lu : inh dng JSON rt ngn gon nhng nghim ng t. Mi du ngo c, du nhy hay
du phai u phai y v chinh xc, nu khng t p tin se khng c tai. Trong phn
ln cc trnh duy t, th m chi n con khng bo li m ca on ma hon ton khng chy
m t cch m thm.
Chay m t oan ma
i khi chng ta khng mun ly v tt c m JavaScript khi trang web c ti ln u

tin. Chng ta khng bit on m no l cn thit cho n khi c nhng tng tc ca
ngi dng. Chng ta cng c th s dng th <script> nu cn nhng c m t cch khc
hay hn chn thm m vo l dng jQuery ti trc tip t p tin .js
chn vo m t on m cng n gin nh khi chn m t on HMTL. Trong trng

ny chng ta s dng hm ton cc $.getScript(), hm ny cng nh nhng hm cng
chc nng ca n, chp nh n m t a ch URL tro n v tr ca t p tin.
2$('#letter-c a').click(function() {
3$.getScript('c.js');
4return false;
5});
});
6
v d cui cng ca chng ta, chng ta cn phi x l d li u tr v mnh c th lm
m t ci g vi t p tin c ti v. Nhng vi nhng t p tin cha m, qu trnh x l
l hon ton t ng, m t khi c ti on m s t chy.
M c ti bng cch ny s chy trong ng cnh ton cc ca trang hi n ti. iu
c ngha l chng c th n c tt c nhng hm v cc bin s c khai bo ton
cc, k c bn thn jQuery. Cho nn chng ta c th bt chc v d v JSON chun b
v chn HTML vo trang khi on m c thc thi, v t on m ny vo t p c.js:
1 var entries = [
2 {
"term": "CALAMITY",
3 "part": "n.",
4 "definition": "A more than commonly plain and..."
5 },
6 {
"term": "CANNIBAL",
7 "part": "n.",
8 "definition": "A gastronome of the old school who..."
9 },
10{
11"term": "CHILDHOOD",
"part": "n.",
12"definition": "The period of human life intermediate..."
13},
14{
15"term": "CLARIONET",
"n.",
16"part":
"definition": "An instrument of torture operated by..." },
17{
18"term": "COMFORT",
19"part": "n.",
20"definition": "A state of mind produced by..."
},
21{
22"term": "CORSAIR",
23"part": "n.",
24"definition": "A politician of the seas."
25}
];
26var html = '';
27
28
29
30
31
32$.each(entries, function() {
33html += '<div class="entry">';
34html += '<h3 class="term">' + this['term'] + '</h3>';
35html += '<div class="part">' + this['part'] + '</div>';
36html += '<div class="definition">' + this['definition'] + '</div>';
html += '</div>';
37});
38$('#dictionary').html(html);
39},
40{
"COMFORT",
41"term":
"part": "n.",
42"definition": "A state of mind produced by..."
43},
44{
45"term": "CORSAIR",
"part": "n.",
46"definition": "A politician of the seas."
47}
48];
49var html = '';
50$.each(entries, function() {
html += '<div class="entry">';
51html += '<h3 class="term">' + this['term'] + '</h3>';
52html += '<div class="part">' + this['part'] + '</div>';
53html += '<div class="definition">' + this['definition'] + '</div>';
54html += '</div>';
55});
$('#dictionary').html(html);
56
57
58
59
60
61
Bn th nhn vo ch ci C xem kt qu.
Ti ti li u
XML
XML l m t phn trong nhng ch ci vit tt ca AJAX, nhng chng ta vn cha ti

XML ln no. Cch ti t p XML cng kh n gin v rt ging vi cch m chng ta
lm vi JSON. Trc ht chng ta cn m t t p XML l t tn l d.xml v cha nhng
d li u chng ta cn hin th.
1 <?xml version="1.0" encoding="UTF-8"?>
2 <entries>
<entry term="DEFAME" part="v.t.">
3 <definition>
4 To lie about another. To tell the truth about another.
5 </definition>
6 </entry>
<entry term="DEFENCELESS" part="adj.">
7 <definition>
8 Unable to attack.
9 </definition>
10</entry>
11<entry term="DELUSION" part="n.">
<definition>
12The father of a most respectable family, comprising
13Enthusiasm, Affection, Self-denial, Faith, Hope,
14Charity and many other goodly sons and daughters.
15</definition>
16<quote author="Mumfrey Mappel">
17
18
19
20<line>All hail, Delusion! Were it not for thee</line>
21<line>The world turned topsy-turvy we should see;
22</line>
23<line>For Vice, respectable with cleanly fancies,
24</line>
<line>Would fly abandoned Virtue's gross advances.
25</line>
26</quote>
27</entry>
28<entry term="DIE" part="n.">
29<definition>
The singular of "dice." We seldom hear the word,
30because there is a prohibitory proverb, "Never say
31die." At long intervals, however, some one says: "The
32die is cast," which is not true, for it is cut. The
33word is found in an immortal couplet by that eminent
and domestic economist, Senator Depew:
34poet
</definition>
35<quote>
36<line>A cube of cheese no larger than a die</line>
37<line>May bait the trap to catch a nibbling mie.</line>
38</quote>
</entry>
39</entries>
40
41
42
43
Tt nhin d li u ny c th c biu th bng nhiu cch, v m t s phn rt ging vi
cu trc m chng ta lm vi HTML v JSON trc y. Nhng trong v d ny bn
s c lm quen vi m t vi chc nng ca XML c thit k con ngi cn c th
hiu c, nh l cch s dng thu c tnh cho term v part thay v dng th.
Chng ta cng bt u hm vi cch quen thu c
2$('#letter-d a').click(function() {
3$.get('d.xml', function(data) {
4});
5return false;
});
6});
7
Ln ny chng ta s dng hm $.get(). Ni chung, hm ny ch n thun l truy xut t p
tin a ch URL cho trc v cung cp m t on ch trng khng nh dng cho hm
truy hi. Nhng nu phn hi li l nh dng XML da vo MINE type ca server cung
cp, hm truy hi s nh n c cy XML DOM.
Cng may cho chng ta l jQuery c kh nng di chuyn rt tt trong DOM. Chng ta c
th s dng phng thc .find(), .filter() v nhng phng thc di chuyn khc trong ti
li u XML y nh cch m chng ta lm vi c vi HTML.
1
2
3
5 $('#letter-d a').click(function() {
$.get('d.xml', function(data) {
6 $('#dictionary').empty();
7 $(data).find('entry').each(function() {
8 var $entry = $(this);
+= '<h3 class="term">' + $entry.attr('term')
10html
+ '</h3>';
11html += '<div class="part">' + $entry.attr('part')
12+ '</div>';
13html += '<div class="definition">';
14html += $entry.find('definition').text();
var $quote = $entry.find('quote');
15if ($quote.length) {
17$quote.find('line').each(function() {
18html += '<div class="quote-line">'
19+ $(this).text() + '</div>';
});
20if ($quote.attr('author'))
21html += '<div class="quote-author">'
22+ $quote.attr('author') + '</div>';
23}
html += '</div>';
24}
25html += '</div>';
26html += '</div>';
27$('#dictionary').append($(html));
28});
});
29return false;
30});
31});
32
33
34
Bn nhn th ch D xem kt qu
y l m t cch mi trong nhng phng thc di chuyn trong DOM m chng ta

bit, cho ta thy tnh linh ng ca b chn CSS trong jQuery. C php ca CSS thng
c s dng lm ep cho trang HTML, cho nn b chn tiu chun trong file .css s
dng tn th HTML nh div v body tm n n i dung. Tuy nhin, jQuery cng c th
s dng nhng th XML thng thng nh l entry v definition, nh cch m chng ta
s dng HTML.
Nhng b chn nng cao ca jQuery cn cho php tm n nhng phn ti li u XML
trong nhng trng hp phc tp hn nhiu. V d chng ta mun gii hn hin th
nhng mc t c cha cu trch dn v thu c tnh author. lm c iu ny, chng ta
c th gii hn nhng mc t c cha cc phn t <quotes> bng cch thay i entry
thnh entry:has(quote). Sau chng ta cng c th gii hn thm nhng mc t c cha
thu c tnh author trong phn bng cch vit entry:has(quote[author]). By gi b chn
ca chng ta s nh sau:
1$(data).find('entry:has(quote[author])').each(function() {
Biu thc b chn by gi gii hn nhng mc t nh hnh
Phn 2
La chon inh dang d li u
Chng ta xem qua 4 nh dng cho d li u bn ngoi, mi m t dng u c x l

bi nhng hm thun AJAX ca jQuery. Chng ta cng xc minh c 4 nh dng u
c th x l c tnh hung l ti thng tin cho trang mi khi ngi dng yu cu ch
khng phi trc . Nh v y th nh dng no ph hp vi ng dng no?
HTML khng mt nhiu cng ti. D li u bn ngoi ngoi c th c ti v chn vo
trang vi m t phng thc m thm ch khng cn c hm truy hi. Chng ta cng
khng cn s dng nhng phng thc di chuyn trong d li u thm m t on
HTML vo trang. Tri li, d li u ny khng c cu trc ph hp c th ti s dng
cho nhng ng dng khc. M n c lin kt ch t ch vi thnh phn m n s c
chn vo.
JSON th c cu trc cho vi c ti s dng n gin. nh dng ny c ng v d c.
Nhng chng ta phi di chuyn trong cu trc d li u ly thng tin hin th ra trang
web, nhng iu ny cng d dng c thc hin bi nhng k thu t JavaScript tiu
chun. Bi v t p tin c th c ti ch bng m t cu c gi n phng thc JavaScript
eval(), phng thc ny c t p JSON ht sc mau le. Tuy nhin cch s dung eval()
cng cht cha m t cht ri ro. Nhng li l p trnh trong t p JSON c gy ra li n v
to ra hi u ng ph khng mong mun trn trang, cho nn d li u phi c vit ht sc
cn th n.
T p JavaScript c tnh linh ng nht nhng n li khng thc s l m t c ch lu tr

d li u. Bi v n mang hi hng ca ngn ng l p trnh, n khng th cung cp cng
m t loi thng tin cho nhng h thng khc nhau. Thc t vi c ti m t t p JavaScript
c ngha l nhng b x l m t khi c dng ti c th tch ri m t t p bn
ngoi, nh th chng ta c th gim c dung lng ca m v ch ti n khi cn thit.
Ti li u XML cc k c ng. Bi v XML tr thnh ngn ng chung cho th gii
mng, cung cp d li u di dng ny th n rt c th c ti s dng u . V d
Flickr, del.icio.us v Upcoming u xut d li u ca h di dng XML, v c rt
nhiu cc trang khc ti s dng rt sng to. Tuy nhin nh dng XML hi cng knh
v mt nhiu thi gian ti v thao tc hn nhng nh dng khc.
Vi nhng tnh nng nh trn, th bn thy cch d nht cung cp d li u t bn
ngoi l di dng HTML min l d li u khng cn phi c s dng cho nhng
ng dng khc. Trong trng hp d li u s c ti s dng v nhng ng dng khc
c th b nh hng, th JSON thng l la chn tt bi v n c hi u sut lm vi c cao
v dung lng nho. Nhng khi ng dng l iu m bn khng chc chn, th XML l la
chn an ton nht c tnh tng kt cao nht.
Trn tt c nhng iu trn, chng ta phi xc nh xem d li u c sn cha. Nu n
c sn ri th rt c th n ri vo m t trong nhng nh dng trn v nh th th bn
khoi cn phi mt cng t quyt nh.
Truyn d li u
n server
Nhng v d ca chng ta cho n gi ch t p trung vo vi c ly d li u tnh t web

server. Tuy nhin, AJAX ch thc s mnh m khi m server c th t ng truyn d
li u da vo thng tin c nh p t trnh duy t web. JQuery c th gip chng ta rt
nhiu trong qu trnh ny, nhng phng thc chng ta hc n nay c th c ci
tin m t cht cho qu trnh truyn ti d li u tr thnh ng 2 chiu.
Lu : nhng vi d sp ti oi hoi phai tng tc vi web server, cho nn y l ln u
tin trong cun sch chung ta se s dng ma server-side. Trong nhng phn ti chung ta
se s dng ngn ng l p trnh PHP, y l ngn ng c s dng r ng rai v hon ton
min phi. Chung ta se khng c p n cch to web server trong khun kh ca cun
sch ny. Bn c th tm cc ngun hng dn nh trang Apache.org ho c php.net.
Trn izwebz cung c m t vi bi hng dn cch to localhost lm vi c vi PHP.
Thc hi n l n
h truy vn GET
minh ha cho qu trnh giao tip gia ngi dng v server, chng ta s vit m t
on m m n c th ch gi m t mc t trong t in n trnh duy t cho mi m t
l nh truy vn. Mc t c chn s da vo tham s c gi qua trnh duy t. M ca
chng ta s ly d li u t cu trc d li u trong nh sau:
1 <?php
2
3
4
5 $entries = array(
'EAVESDROP' => array(
6 'part' => 'v.i.',
7 'definition' => 'Secretly to overhear a catalogue of the
8 crimes and vices of another or yourself.',
9 'quote' => array(
10'A lady with one of her ears applied',
'To an open keyhole heard, inside,',
11'Two female gossips in converse free —',
12'The subject engaging them was she.',
13'"I think," said one, "and my husband thinks',
14'That she\'s a prying, inquisitive minx!"',
soon as no more of it she could hear',
15'As
'The lady, indignant, removed her ear.',
16'"I will not stay," she said, with a pout,',
17'"To hear my character lied about!"',
18),
19'author' => 'Gopete Sherany',
),
20'EDIBLE' => array(
21'part' => 'adj.',
22'definition' => 'Good to eat, and wholesome to digest, as
23a worm to a toad, a toad to a snake, a snake to a pig,
24a pig to a man, and a man to a worm.',
),
25'EDUCATION' => array(
26'part' => 'n.',
27'definition' => 'That which discloses to the wise and
28disguises from the foolish their lack of
29understanding.',
),
30);
31?>
32
33
34
trong nhng ng dng th t s th d li u phi c lu tr trong c s d li u v ch
c ti khi hoi. Bi v d li u l m t phn ca on m trn cho nn vi c vit m
ly d li u ra kh n gin. Chng ta s xem xt d li u c to ra v vit m
HTML hin th n:
1
2
3
4
5
6
7
<?php
$term = strtoupper($_REQUEST['term']);
if (isset($entries[$term])) {
$entry = $entries[$term];
$html = '<div class="entry">';
$html .= '<h3 class="term">';
$html .= $term;
$html .= '</h3>';
$html .= '<div class="part">';
8
9
10
.= $entry['part'];
11$html
$html .= '</div>';
12$html .= '<div class="definition">';
13$html .= $entry['definition'];
14if (isset($entry['quote'])) {
15$html .= '<div class="quote">';
foreach ($entry['quote'] as $line) {
16$html .= '<div class="quote-line">'. $line .'</div>';
17}
18if (isset($entry['author'])) {
19$html .= '<div class="quote-author">'. $entry['author']
20.'</div>';
}
21$html .= '</div>';
22}
23$html .= '</div>';
24$html .= '</div>';
print($html);
25}
26?>
27
28
29
By gi khi on m c truy vn th t p e.php c gi, v n s tr v m t on
HTML ph hp vi iu ki n c gi qua tham s ca GET. V d khi bn truy c p
on m vi e.php?term=eavesdrop, chng ta s c c.
M t ln na chng ta thy c trang kt qu khng c cht nh dng no bi v CSS

cha c p dng vo trang ny.
Bi v chng ta s nghin cu d li u c truyn ti n server nh th no, chng ta s
s dng m t phng thc khc ly mc t thay v ch s dng m t dng nt n t
trc ti gi. Di y l on m HTML
1 <div class="letter" id="letter-e">
2 <h3>E</h3>
<ul>
3 <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>
4 <li><a href="e.php?term=Edible">Edible</a></li>
5 <li><a href="e.php?term=Education">Education</a></li>
6 <li><a href="e.php?term=Eloquence">Eloquence</a></li>
<li><a href="e.php?term=Elysium">Elysium</a></li>
7 <li><a href="e.php?term=Emancipation">Emancipation</a>
8 </li>
9 <li><a href="e.php?term=Emotion">Emotion</a></li>
10<li><a href="e.php?term=Envelope">Envelope</a></li>
11
12<li><a href="e.php?term=Envy">Envy</a></li>
13<li><a href="e.php?term=Epitaph">Epitaph</a></li>
14<li><a href="e.php?term=Evangelist">Evangelist</a></li>
15</ul>
</div>
16
17
By gi chng ta cn m JavaScript gi n PHP vi tham s ph hp. Chng ta c th
lm c vi c ny vi c ch .load(), gn chui truy vn vo URL v sau th truy xut
d li u trc tip vi a ch nh kiu e.php?term=eavesdrop. Tuy nhin, thay v lm nh
v y chng ta s s dng jQuery xy dng chui truy vn da vo biu m ta cung
cp cho hm $.get():
1
2$('#letter-e a').click(function() {
3$.get('e.php', {'term': $(this).text()}, function(data) {
4$('#dictionary').html(data);
5});
6return false;
});
7});
8
Ti gi chng ta thy nhng giao tc AJAX m jQuery cung cp, cch lm vi c ca
hm ny rt quen thu c. iu khc bi t duy nht l tham s th 2, n cho php chng
ta cung cp m t biu key-value v n l m t phn ca chui truy vn. Trong trng
hp trn, gi tr key lun l term nhng value s c ly t ch ca mi ng lin kt.
Nn nu by gi bn nhp chu t vo ng lin kt u tin trong danh sch th nh
ngha ca t s xut hi n.
Tt c nhng ng lin kt u c a ch d cho chng ta khng s dng n trong m.

iu ny cho php nhng ngi dng khng c ho c khng b t JavaScript vn c th
xem c thng tin trn trang. trnh ng lin kt di chuyn theo m c nh, b x
l s ki n phi l return false.
Thc hi n l n
h truy vn POST
Truy vn HTTP s dng phng thc POST gn nh tng ng vi phng thc GET.
M t trong nhng khc bi t d thy nht l phng thc GET t tham s ca n vo
chui truy vn ca URL. Cn POST th khng. Tuy nhin trong cc cu c gi ca AJAX,
im khc bi t ny cng b n i vi ngi dng. Ni chung, l do chnh chn
phng thc ny thay v phng thc khc l ph hp vi chun ca server, hoc
truyn ti m t lng d li u ln. Phng thc GET c gii hn nghim khc hn. Chng
ta vit m PHP trong v d ny sao cho n c th lm vi c c vi c 2 phng thc,
chng ta c th chuyn t GET sang POST ch bng cch thay i phng thc
jQuery m chng ta gi:
1
3$.post('e.php', {'term': $(this).text()}, function(data) {
5});
6return false;
});
7});
8
Cc tham s th vn v y nhng l nh truy vn s c gi qua POST. Chng ta cng c
th n gin ha on m hn na bng cch s dng phng thc .load(). Phng thc
ny theo m c nh l s dng POST khi n c cung cp m t biu tham s.
3$('#dictionary').load('e.php', {'term': $(this).text()});
4return false;
5});
});
6
Phin bn m ngn hn ny vn c tc dng tng t khi ch a c nhp chu t.
Sp xp th t form
Thng khi bn mun gi d li u n server bn c yu cu phi in vo form. Thay

v phi ph thu c vo nhng c ch gi form bnh thng nh kiu ti ton b cu tr li
vo m t ca s trnh duy t, chng ta c th s dng AJAX ca jQuery gi m t form
theo th t v t cu tr li vo trang hi n ti. Di y chng ta s to m t form n
gin:
1
<div class="letter" id="letter-f">
2<h3>F</h3>
3<form>
4<input type="text" name="term" value="" id="term" />
5<input type="submit" name="search" value="search"
/>
6id="search"
</form>
7</div>
8
Ln ny chng ta s tr v m t t p hp cc mc t t m PHP bng cch tm kim t

kha c cung cp di dng chui ph ca t trong t in. Cu trc d li u s c
nh dng ging nh trc y, nhng logic th hi khc m t cht.
1
2
3 foreach ($entries as $term => $entry) {
4 if (strpos($term, strtoupper($_REQUEST['term']))
5 !== FALSE) {
6 $html = '<div class="entry">';
$html .= '<h3 class="term">';
7 $html .= $term;
8 $html .= '</h3>';
9 $html .= '<div class="part">';
10$html .= $entry['part'];
.= '</div>';
11$html
$html .= '<div class="definition">';
12$html .= $entry['definition'];
13if (isset($entry['quote'])) {
14foreach ($entry['quote'] as $line) {
15$html .= '<div class="quote-line">'. $line .'</div>';
}
16if (isset($entry['author'])) {
17$html .= '<div class="quote-author">'.
18$entry['author'] .'</div>';
19}
20}
$html .= '</div>';
21$html .= '</div>';
22print($html);
23}
24}
25
26
Hm strops() tm t kha ph hp vi chui tm kim ca ngi dng. By gi chng ta
c th phn ng li vi form gi v v to tham s truy vn ph hp bng cch di chuyn
trong cy DOM:
2$('#letter-f form').submit(function() {
3$('#dictionary').load('f.php',
4{'term': $('input[name="term"]').val()});
5return false;
});
6});
7
Tuy on m ca chng ta lm vi c nh mong mun, nhng tm tng trng nh p
li u bng tn v sau gn tng ci m t cho biu th phin phc qu. Hn na cch
ny kh x l c khi m form ca chng ta tr nn phc tp hn. Cng may l jQuery
c cch gip chng ta trong trng hp ny. Phng thc .serialize() hot ng trn m t
i tng jQuery v chuyn nhng phn t DOM ph hp thnh chui truy vn v
chuyn n cng vi AJAX truy vn. Chng ta c th vit m cho b x l form nh sau:
1
2$('#letter-f form').submit(function() {
3$.get('f.php', $(this).serialize(), function(data) {
5});
6return false;
});
7});
8
By gi on m c th gi form, cho d s lng cc trng nh p li u c tng. Khi
chng ta mun tm kim, nhng mc t ph hp s c hin th.
Nn chu n l n
h truy vn
Cho n gi chng ta c th to cu c gi n phng thc AJAX v kin nhn ch i

c tr li. Nhng cng c lc chng ta mun bit thm m t cht na v l nh truy vn
HTTP khi n c thc hi n. jQuery cho bn m t s hm c th c s dng ng
k hm truy hi khi nhiu s ki n lin quan n AJAX xy ra.
Hai phng thc .ajaxStart() v .ajaxStop() l nhng v d in hnh v chc nng quan
st, v c th c gn vi bt k i tng jQuery no. Khi l nh gi AJAX bt u m
khng c g ang c ti, hm truy hi .ajaxStart() s khi ng. Ngc li, khi l nh
truy vn cui cng kt thc, hm truy hi c gn vi .ajaxStop() s bt u. Tt c
nhng hm quan st l dng hm ton cc, chng c gi mi khi s giao tip AJAX
xy ra, m khng quan tm n m no gi n.
Chng ta c th s dng nhng phng thc ny thng bo cho ngi dng bit trong
trng hp mng ca h khng c nhanh. on m HTML s c m t on thng bo
ang ti d li u:
1<div id="loading">
2Loading...
3</div>
Thng bo ny ch l m t on m HTML bnh thng, nhng bn cng c th thm vo
m t hnh GIF ng kiu xoay xoay cho n chun. Chng ta s chnh sa CSS m t cht
khi thng bo c a ra n c hin th nh hnh di.
Bi v y ch l tnh nng lm cho trang thm ep cho nhng ngi dng c trnh duy t
hi n i, do v y chng ta s khng chn on m HTML ny trc tip vo trang. Bi v
chng ta ch mun n hin th vi nhng ai c b t JavaScript, cho nn chng ta s chn
n bng jQuery.
2$('<div id="loading">Loading...</div>')
3.insertBefore('#dictionary')
4});
Chng ta s khai bo trong CSS cho th div ny c display: none; cho khi trang c
ti, th thng bo s b n i. n hin th ng lc mnh cn, chng ta ch cn ng k
n vi chc nng quan st vi .ajaxStart():
2$('<div id="loading">Loading...</div>')
4.ajaxStart(function() {
5$(this).show();
});
6});
7
Chng ta kt hp phng thc .hide() lun vo y
1
{
2$(document).ready(function()
$('<div id="loading">Loading...</div>')
4.ajaxStart(function() {
5$(this).show();
6}).ajaxStop(function() {
$(this).hide();
7});
8});
9
Nh v y chng ta c bng thng bo.
M t ln na bn cng nn lu rng nhng phng thc ny khng lin quan g n
cch m giao tip AJAX bt u. Chnh phng thc .load() c gn cho ch A v
.getJSON() c gn cho ch B lm cho giao tip AJAX xy ra.
Trong trng hp ny, t p tnh ton cc l iu chng ta mun. Tuy nhin nu chng ta
mun c th hn na, chng ta c vi la chn s dng. M t vi chc nng quan st
nh, .ajaxError(), n s gi cho hm truy hi m t tham chiu n i tng
XMLHttpRequest. Ci ny c th dng phn bi t gia cc l nh truy vn vi nhau, v
cung cp nhng t p tnh khc nhau. c nhng cch x l c th hn bn c th s
dng hm $.ajax() cp thp, m chng ta s bn ti phn di.
Tuy nhin cch ph bin nht giao tip vi l nh truy vn l hm truy hi thnh cng,
m chng ta ni n trn. Chng ta s dng n trong m t vi nhng v d trn
x l d li u quay li t server v cho hin th kt qu ln trang web. Tt nhin n cng
c th c s dng cho nhng thng tin phn hi khc. Hy xem li v d v .load():
4return false;
5});
});
6
Chng ta c th ci tin m t cht y bng cch lm cho n i dung t t hi n ra thay v
m m t pht. Phng thc .load() c th ly vo m t hm truy hi v kch hot n khi
hon thnh.
1
3$('#dictionary').hide().load('a.html', function() {
4$(this).fadeIn();
5});
6return false;
});
7});
8
Trc tin ta n i phn t ch, v sau th khi ng qu trnh ti. Khi qu trnh ti
hon thnh, chng ta s dng hm truy hi cho phn t va to hi n ra t t.
AJAX v s kin
Gi s chng ta mun dng cc mc t trong t in quyt nh n ho c hi n nh

ngha ca t , khi ngi dng nhp chu t vo t th n s n ho c hi n nh ngha i
km vi n. Vi nhng k thu t ta hc, th lm c vi c ny rt n gin
2$('.term').click(function() {
3$(this).siblings('.definition').slideToggle();
4});
});
5
Khi mc t b nhp chu t, jQuery s tm phn t l anh em h ca n m c
class=definition, v trt n ln trn ho c xung di.
Mi vi c nghe c v hp l, nhng khi ta nhp chu t vo th s khng xy ra vi c g.
Vn l mc t cha c thm vo ti li u khi ta gn b x l s ki n. Cho d ta c
th gn c b x l click vo cc phn t ny, m t khi mnh nhp chu t vo m t ch

ci khc th b x l s khng cn c gn cho n na.
y l vn thng thy trong phm vi ca trang c a vo bi AJAX. M t gii
php thng thng l chng ta s gn li b x l mi khi vng ca trang c refresh.
Nhng cch ny cng hi mt thi gian bi v on m gn s ki n phi c gi mi
khi c m t thnh phn no lm thay i cu trc DOM ca trang.
M t cch thay th hay nht cho vn ny c gii thi u chng 3: Chng ta c th
p dng y thc s ki n y, bng cch gn s ki n cho thnh phn b me v y l
nhng thnh phn s khng bao gi thay i. Trong trng hp ny, chng ta s gn b
x l s ki n nhp chu t vo ti li u s dng phng thc.live()
2$('.term').live('click', function() {
3$(this).siblings('.definition').slideToggle();
4});
});
5
Phng thc .live() s hng dn cho trnh duy t quan st tt c nhng c nhp chu t
trn ton b trang web, v ch khi m t phn t ph hp vi b chn .term, th b x l
s ki n mi thc hi n. By gi phng thc.slideToggle() s hot ng di bt k term
no, cho d n c thm vo sau ny bi m t giao tc AJAX
Han ch v bo m t
i vi tt c cc ti n ch ca n trong vi c to cc ng dng web ng,

XMLHttprequest (cng ngh trnh duy t c bn ng sau nhng ng dng jQuery
AJAX) c qun l rt nghim ng t. Thng th bn khng th truy vn c m t ti
li u ang nm m t server khc vi server ang cha trang gc ca bn, iu ny
trnh nhng v tn cng cross-site.
y thc t li l m t vi c tt. V d c ngi cho rng cch thc thi phn tch JSON
bng cch s dng .eval() l khng an ton. Nu c nhng on m c nm trong t p
d li u, n s chy nu hm .eval() gi n. V y nn nu t p d li u v bn thn trang
web cng nm trn m t server th kh nng chn m c vo t p d li u gn nh tng
ng vi vi c t chn m vo trang ca mnh. iu c ngha l, trong trng hp
bn ti nhng t p JSON khng mang m c, th hm.eval() khng cn l m t mi lo
cho bo m t.
Nhng cng trong nhiu trng hp li c li hn nu bn c th ti d li u t m t
ngun th 3. C vi cch bn c th lm trnh c khu gii hn bo m t v cho
php vi c ti d li u ny c th thc hi n c.
Cch th nht l da vo server ti d li u t xa v sau th cung cp n khi c
yu cu bi ngi dng. y l cch rt mnh bi v server c th x l trc d li u
nu cn. V d chng ta c th ti file XML cha RSS Feed t nhiu ngun, t p hp

chng li thnh m t feed trn server v pht hnh t p mi ny n ngi dng khi c
yu cu.
ti d li u t m t v tr t xa m khng cn s can thi p ca server, chng ta phi
gian manh m t t. M t cch thng dng trong trng hp bn mun ti m t t p
JavaScript bn ngoi l chn c p th <script> khi cn. Bi v jQuery c th gip chng ta
chn nhng phn t DOM mi, nn chng ta d dng c th vit:
1$(document.createElement('script'))
2.attr('src', 'http://example.com/example.js')
3.appendTo('head');
Thc t, phng thc $.getScript() cng t ng thch nghi vi k thu t ny nu n pht
hi n m t host khc trong tham s URL, v y nn k c vi c ny cng c gii quyt
cho chng ta.
Trnh duy t s chy on m c ti, nhng khng c c ch no c th ly v kt qu
t on m. Chnh v th k thu t ny i hoi s c ng tc vi host xa. on m c
ti v cng phi lm m t ci g nh l to ra m t bin ton cc v c hi u lc trn
mi trng cc b . Nhng ai to ra m c th chy c bng cch ny cng s cung cp
m t API tng tc vi m t xa ny.
M t cch na l s dng th HTML <iframe> ti d li u t xa. Phn t ny cho php
bt c URL no cng c s dng lm ngun truy xut d li u ca n, cho d n
khng cng m t server. D li u d dng c ti v hin th ln trang. Nhng thao tc
vi d li u th cng i hoi s c ng tc nh l cch s dng th <script>. M nm trong
<iframe> cn phi cung cp d li u cho i tng trong ti li u gc m t cch r rng.
S dng JSONP cho d li u t xa
Y tng s dng th <script> truy xut t p JavaScript t m t ngun xa cng c th

s dng ko m t file JSON t m t server khc. Nhng thc hi n c, chng ta
cn phi chnh sa t p JSON m t cht. Cng c vi cch lm vi c ny, m t trong s
c h tr trc tip bi jQuery: JSON vi Padding ho c vit tt l JSONP.
nh dng ca t p JSONP bao gm m t t p JSON tiu chun c t trong du
ngo c n v gn vo ng sau m t chui k t bnh thng. Chui ny, hay cn l
padding, c xc nh bi ngi dng ang truy vn d li u. Bi v hai du ngo c
ny, ngi dng c th ho c l lm cho hm c gi ho c m t bin c thit l p ph
thu c vo ci g c gi di dng chui padding.
M t ng dng PHP ca k thu t JSONP kh n gin:
1<?php
2print($_GET['callback'] .'('. $data .')');
?>
3
y bin $data cha m t chui lm i di n cho m t t p JSON. Khi on m ny
c gi, m t tham s chui truy vn callback c gn vo trc t p kt qu v s
c tr v cho ngi dng.
minh ho cho k thu t ny, chng ta ch cn sa i m t cht v d v JSON trn
gi ngun d li u t xa. Hm $.getJSON() t n dng k t gi ch c bi t?,
, lm
c vi c ny.
1
2
4 var url = 'http://examples.learningjquery.com/jsonp/g.php';
5 $('#letter-g a').click(function() { $.getJSON(url + '?callback=?',
6 function(data) {
$('#dictionary').empty();
7 $.each(data, function(entryIndex, entry) {
9 html += '<h3 class="term">' + entry['term']
10+ '</h3>';
11html += '<div class="part">' + entry['part']
+ '</div>';
12html += '<div class="definition">';
13html += entry['definition'];
14if (entry['quote']) {
$.each(entry['quote'], function(lineIndex, line) {
16html += '<div class="quote-line">' + line
17+ '</div>';
18});
19if (entry['author']) {
20html += '<div class="quote-author">'
+ entry['author'] + '</div>';
21}
22html += '</div>';
23}
24html += '</div>';
+= '</div>';
25html
$('#dictionary').append(html);
26});
27});
28return false;
29});
});
30
31
32
Thng th chng ta khng c php truy xut JSON t m t server xa. Nhng bi v
file ny c to nn cung cp d li u ca n di dng JSONP, chng ta c th ly
d li u ny bng cch gn m t chui truy vn vo URL, s dng du ? lm ni lu gi
cho gi tr ca tham s hm truy hi. Khi truy vn c to, jQuery s thay th du ?

cho chng ta, phn tch kt qu, v chuyn n n hm di dng d li u nh th l
m t truy vn JSON n i b .
Bn cng nn lu v vn bo m t y nh trc, bt c ci g server tr v n
trnh duy t u s c thc hi n trong my tnh ca ngi dng. K thu t JSONP ch
nn c s dng vi d li u n t cc ngun c ng tin c y.
La chon thm
B cng c AJAX c cung cp bi jQuery rt y . Chng ta xem qua m t s la

chn, nhng mi ch l b ni ca tng bng. C qu nhiu th c th ni n trong
phn ny, do v y chng ta ch khi qut qua m t s nhng cch ph bin ty bin
giao tip AJAX.
Phng php AJAX cp thp
Chng ta thy m t s phng php khi ng giao tc AJAX. Nhng ng sau h u

trng, jQuery gom mi m t phng thc ny vo nhng hm $.ajax() ton cc khc
nhau. Thay v phong on m t dng s ki n AJAX, hm ny ly vo m t biu cc s
la chn m c th c s dng ty bin ch ca n.
V d u tin m chng ta s dng $(#dictionary).load(a.html) ti m t on m
HTML. Cch ny c th c thay th bng phng thc $.ajax() nh sau:
1
$.ajax({
2url: 'a.html',
3type: 'GET',
4dataType: 'html',
5success: function(data) {
}
7});
8
Chng ta cn phi ht sc c th vi phng thc truy vn, loi d li u tr v, v s lm
g vi kt qu d li u . Ci ny c v hi tn cng sc nhng b li vi cng sc bn
bo ra l thnh qu m mn. M t vi trong s nhng kh nng c bi t khi s dng vi
nhng phng thc $.ajax() cp thp bao gm:
Ngn khng cho trnh duy t lu li s phn hi t server. iu ny c ch khi m

server t ng to ra d li u ca n.
ng k ring bi t hm truy hi cho d khi l nh truy vn thc hi n thnh cng,
b li ho c trong tt c cc trng hp.
Ch n b x l ton cc (nh l b x l ng k vi$.ajaxStart()) m thng
c khi ng bi tt c cc tng tc AJAX.
Cung cp Username v m t khu xc nh n vi host t xa.
Chu : bit thm chi tit v cch s dng nhng la chon khc, xem thm phn
jQuery Reference Guide ho c xem phn API Reference ti
(http://docs.jquery.com/Ajax/jQuery.ajax).
Chinh sa tuy chon m c inh
Hm $.ajaxSetup() cho php chng ta nh r gi tr m c nh ca mi ty chn c s

dng khi phng thc AJAX c gi. N cng ly vo m t biu ty chn ging y
nh biu c trong bn thn $.ajax(), v lm cho nhng gi tr ny c s dng cho
nhng truy vn AJAX v sau tr khi c ci khc mnh hn.
1
2 $.ajaxSetup({
'a.html',
3 url:
type: 'POST',
4 dataType: 'html'
5 });
6 $.ajax({
7 type: 'GET',
success: function(data) {
8 $('#dictionary').html(data);
9 }
10});
11
Dy thao tc ny hot ng ging nh v d trc l $.ajax(). Bn nn ch rng URL
ca l nh truy vn c xc nh lm gi tr m c nh bi cu c gi$.ajaxSetup(), cho nn
gi tr ny c th c bo trng khi $.ajax() c gi. Ngc li, tham s type c gi tr
m c nh l POST, nhng n vn b ln bi cu c gi$.ajax() n GET.
Ti cc phn cua m t trang HTML
K thu t u tin v cng l n gin nht m chng ta tho lu n trn l truy xut
m t on code HTML v chn n vo m t trang. Nhng cng c khi server cung cp
cho ta on HTML mnh cn nhng n li b bao quanh bi m t trang HTML khc m ta
khng mun. Khi m vi c yu cu server cung cp nh dng chng ta mun khng
thu n ti n, jQuery c th gip chng ta pha ngi dng.
Hy tng tng trng hp nh v d u tin, nhng trang cha cc t mc li l
m t trang HTML hon chnh nh sau:
1
2
3
4
5
6
7
8
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>The Devil's Dictionary: H</title>
<link rel="stylesheet" href="dictionary.css"
type="text/css" media="screen" />
</head>
9
10
11
12<body>
<div id="container">
13<div id="header">
14<h2>The Devil's Dictionary: H</h2>
15<div class="author">by Ambrose Bierce</div>
16</div>
<div id="dictionary">
18<h3 class="term">HABEAS CORPUS</h3>
19<div class="part">n.</div>
20<div class="definition">
21A writ by which a man may be taken out of jail
when confined for the wrong crime.
22</div>
23</div>
25<h3 class="term">HABIT</h3>
class="part">n.</div>
26<div
<div class="definition">
27A shackle for the free.
28</div>
29</div>
30</div>
</div>
31</body>
32</html>
33
34
35
Chng ta c th ti ton b ti li u vo trong trang bng cch s dng on m ta vit
trc y:
2$('#letter-h a').click(function() {
3$('#dictionary').load('h.html');
4return false;
5});
});
6
Bn thy trang web khng c bnh thng bi v n cha nhng on HTML chng ta
khng mun thm vo.
loi bo nhng on d ny, chng ta c th s dng m t tnh nng mi ca phng

thc .load(). Khi bn khai bo URL ca ti li u cn ti, chng ta cng c th cung cp
m t biu thc b chn jQuery. Nu khai bo, biu thc ny s c s dng xc
nh m t phn m ca ti li u. Ch nhng phn no ph hp vi b chn mi c chn

vo trang. Trong trng hp ny, chng ta c th s dng k thu t ny ko ch nhng
mc t nm trong ti li u v chn n:
2$('#letter-h a').click(function() {
3$('#dictionary').load('h.html .entry');
4return false;
5});
});
6
By gi nhng phn khng lin quan ca ti li u loi bo khoi trang
Tom tt
Chng ta hc c rng nhng phng thc AJAX cung cp bi jQuery c th gip

chng ta ti d li u di m t s nh dng khc nhau t server m khng cn phi
refresh li trang. Chng ta c th thc hi n m t server khi cn v gi d li u quay li
server.
Chng ta cng hc c cch x l vi nhng kh khn thng g p ca k thu t ti
khng ng b nh l gi b x l nguyn v tr khi qu trnh ti bt u v ti d li u
t m t server th 3.
Chng ny khp li phn tutorial ca cun sch. Chng ta c nhng cng c
ch yu ca jQuery: b chn, s ki n, hi u ng, thao tc DOM v truy vn server khng
ng b . y khng phi l tt c jQuery c th h tr ta, chng ta s tm hiu thm v
m t vi tnh nng m cc jQuery Plugin em li trong chng ti. Nhng trc ht,
chng ta hy xem xt nhng kt hp ca cc k thu t hc lm cho trang web ca
chng ta hp dn hn.

Ajax

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax

Uploaded by

Copyright:

Available Formats

Trong nhng nm gn y, ngi ta hay nh gi mt trang web da vo cng ngh m

ng sau nh hong quang, th AJAX thc s ch l mt cng c dng ti d liu t

By gi chng ta tp trung vo phn ly ni dung cho trang.

ng dng AJAX thng ch l nhng truy vn c c nhng on m HTML. K

Bn cng nn ch l file a.html khng phi l mt ti liu HTML thc s, bi v n

Bn nh n thy rng m HTML ca chng ta t ng c nh dng CSS cn trc y

bin mt trc khi qu trnh ti hon thnh, chnh l do s ch m tr ca mng. iu

ti c mt trang HTML c nh dng y rt n gin, nhng cng c lc

Chng ta c th m ha d liu ca chng ta bng cch s dng nh dng ny bng

Cho n thi im ny, nhng phng thc m chng ta s dng c gn vo mt i

s dng hm ny, chng ta truyn qua tn file nh trc:

i khi chng ta khng mun ly v tt c m JavaScript khi trang web c ti ln u

chn vo m t on m cng n gin nh khi chn m t on HMTL. Trong trng

XML l m t phn trong nhng ch ci vit tt ca AJAX, nhng chng ta vn cha ti

y l m t cch mi trong nhng phng thc di chuyn trong DOM m chng ta

Chng ta xem qua 4 nh dng cho d li u bn ngoi, mi m t dng u c x l

T p JavaScript c tnh linh ng nht nhng n li khng thc s l m t c ch lu tr

Nhng v d ca chng ta cho n gi ch t p trung vo vi c ly d li u tnh t web

M t ln na chng ta thy c trang kt qu khng c cht nh dng no bi v CSS

Tt c nhng ng lin kt u c a ch d cho chng ta khng s dng n trong m.

Thng khi bn mun gi d li u n server bn c yu cu phi in vo form. Thay

Ln ny chng ta s tr v m t t p hp cc mc t t m PHP bng cch tm kim t

Cho n gi chng ta c th to cu c gi n phng thc AJAX v kin nhn ch i

Gi s chng ta mun dng cc mc t trong t in quyt nh n ho c hi n nh

th gn c b x l click vo cc phn t ny, m t khi mnh nhp chu t vo m t ch

i vi tt c cc ti n ch ca n trong vi c to cc ng dng web ng,

nu cn. V d chng ta c th ti file XML cha RSS Feed t nhiu ngun, t p hp

Y tng s dng th <script> truy xut t p JavaScript t m t ngun xa cng c th

cho gi tr ca tham s hm truy hi. Khi truy vn c to, jQuery s thay th du ?

B cng c AJAX c cung cp bi jQuery rt y . Chng ta xem qua m t s la

Chng ta thy m t s phng php khi ng giao tc AJAX. Nhng ng sau h u

Ngn khng cho trnh duy t lu li s phn hi t server. iu ny c ch khi m

Hm $.ajaxSetup() cho php chng ta nh r gi tr m c nh ca mi ty chn c s

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

loi bo nhng on d ny, chng ta c th s dng m t tnh nng mi ca phng

nh m t phn m ca ti li u. Ch nhng phn no ph hp vi b chn mi c chn

Chng ta hc c rng nhng phng thc AJAX cung cp bi jQuery c th gip

You might also like