Trong nh ng năm g n đây, ng i ta hay đánh giá m t trang web d a vào công ngh màữ ầ ườ ộ ự ệ
trang đó đang ng d ng. M t trong nh ng công ngh tr nên r t đình đám trong th iứ ụ ộ ữ ệ ở ấ ờ
gian g n đây là ng d ng web đ c g i là AJAX. Nó là t ng h p c a nhi u công nghầ ứ ụ ượ ọ ổ ợ ủ ề ệ
khác nhau.
AJAX là ch vi t t t c a Asynchronous JavaScript and XML. Nh ng công ngh cóữ ế ắ ủ ữ ệ
trong m t gi i pháp AJAX bao g mộ ả ồ
•JavaScript dùng đ t ng tác v i ng i dùng ho c các s ki n liên quan đ nể ươ ớ ườ ặ ự ệ ế
trình duy t.ệ
•Đ i t ng XMLHttpRequest, cho phép nh ng câu l nh truy v n đ c g i đ nố ượ ữ ệ ấ ượ ử ế
server mà không làm gián đo n nh ng tác v khác c a trình duy tạ ữ ụ ủ ệ
•XML trên server, ho c nh ng đ nh d ng d li u t ng t nh HTML vàở ặ ữ ị ạ ữ ệ ươ ự ư
JSON
•Thêm JavaScript, dùng đ chuy n đ i d li u t server và hi n th nó lên trangể ể ổ ữ ệ ừ ể ị
web.
Công ngh AJAX đ c ca t ng nh là v c u tinh c a th gi i web, nó bi n nh ngệ ượ ụ ư ị ứ ủ ế ớ ế ữ
trang web tĩnh thành nh ng ng d ng có tính t ng tác cao. R t nhi u frameworksữ ứ ụ ươ ấ ề
đ c t o ra đ giúp các l p trình viên h c cách s d ng nó, chính b i s không nh tượ ạ ể ậ ọ ử ụ ở ự ấ
quán c a trình duy t trong vi c ng d ng đ i t ng XMLHttpRequest, jQuery cũngủ ệ ệ ứ ụ ố ượ
không ph i là ngo i l .ả ạ ệ
Chúng ta s xem xem AJAX có th c s kỳ di u nh ng i ta hay nói không.ẽ ự ự ệ ư ườ
T i d li u khi đ c yêu c uả ữ ệ ượ ầ
Đ ng sau ánh hoàng quang, thì AJAX th c s ch là m t công c dùng đ t i d li uằ ự ự ỉ ộ ụ ể ả ữ ệ
t server v trình duy t mà không c n ph i refresh l i trang web. Nh ng d li u nàyừ ề ệ ầ ả ạ ữ ữ ệ
có nhi u đ nh d ng và chúng ta cũng có nhi u l a ch n đ làm vi c v i nó khi nóề ị ạ ề ự ọ ể ệ ớ
đ c t i xong. ượ ả
Chúng ta s xây d ng m t trang web hi n th nh ng t m i trong cu n t đi n, cácẽ ự ộ ể ị ữ ừ ớ ố ừ ể
nhóm t đ c gom l i d i m t ch cái nh trong t đi n. Mã HTML đ đ nh d ngừ ượ ạ ướ ộ ữ ư ừ ể ể ị ạ
vùng n i dung c a trang s nh sau:ộ ủ ẽ ư
1
2
<div id="dictionary">
</div>
Yep! Ch có v y thôi. Trang web c a chúng ta s không có n i dung nào h t. Chúng taỉ ậ ủ ẽ ộ ế
s s d ng nh ng ph ng th c AJAX c a jQuery đ hi n th th <div> v i cu n tẽ ử ụ ữ ươ ứ ủ ể ể ị ẻ ớ ố ừ
đi n.ể
Chúng ta s c n m t n i đ kích ho t quá trình t i d li u, do v y chúng ta s thêmẽ ầ ộ ơ ể ạ ả ữ ệ ậ ẽ
vào vài đ ng liên k t đ sau này mình có n i đ gán b x lý s ki n.ườ ế ể ơ ể ộ ử ự ệ
1
2
3
4
5
6
7
8
9
1
0
1
1
12
13
1
4
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="#">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="#">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="#">D</a></h3>
</div>
</div>
Thêm m t chút CSS, chúng ta có m t trang nh sauộ ộ ư
Bây gi chúng ta t p trung vào ph n l y n i dung cho trang.ờ ậ ầ ấ ộ
Gán HTML vào
ng d ng AJAX th ng ch là nh ng truy v n đ có đ c nh ng đo n mã HTML. KỨ ụ ườ ỉ ữ ấ ể ượ ữ ạ ỹ
thu t này đôi khi còn đ c g i là AHAH (Asynchronous HTTP and HTML), l i quáậ ượ ọ ạ
đ n gi n v i jQuery. Tr c h t chúng ta c n m t đo n mã HTML đ chèn, chúng taơ ả ớ ướ ế ầ ộ ạ ể
s t o m t file m i đ t tên là a.html. File HTML này s có mã nh sau: ẽ ạ ộ ớ ặ ẽ ư
1
2
3
4
<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
5
6
7
8
9
1
0
1
1
12
13
1
4
15
1
6
1
7
1
8
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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>
<div class="quote-line">For that performance 'twere
unfair to scold her:</div>
<div class="quote-line">She wisely left a throne too
hot to hold her.</div>
<div class="quote-line">To History she'll be no royal
riddle &mdash;</div>
<div class="quote-line">Merely a plain parched pea that
jumped the griddle.</div>
<div class="quote-author">G.J.</div>
</div>
</div>
</div>
<div class="entry">
<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
<div class="definition">
Independent, irresponsible. An absolute monarchy is one
in which the sovereign does as he pleases so long as he
pleases the assassins. Not many absolute monarchies are
left, most of them having been replaced by limited
monarchies, where the sovereign's power for evil (and for
good) is greatly curtailed, and by republics, which are
governed by chance.
</div>
</div>
Đây là hình mà chúng ta s có đ c, t t nhiên nó nhìn h i “cùi” vì ch a có đ nh d ngẽ ượ ấ ơ ư ị ạ
gì h t. ế
B n cũng nên chú ý là file a.html không ph i là m t tài li u HTML th c s , b i vì nóạ ả ộ ệ ự ự ở
không có th <html>, <head> và <body>. Đây là nh ng th b t bu c ph i có cho m tể ữ ẻ ắ ộ ả ộ
tài li u HTML. Nh ng file nh th này đ c g i là m nh ho c đo n mã, m c đích t nệ ữ ư ế ượ ọ ả ặ ạ ụ ồ
t i c a nó ch dùng đ chèn vào nh ng tài li u HTML khác, đây chính là vi c chúng taạ ủ ỉ ể ữ ệ ệ
s làm.ẽ
1
2
3
4
5
6
$(document).ready(function() {
$('#letter-a a').click(function() {
$('#dictionary').load('a.html');
return false;
});
});
Ph ng th cươ ứ .load() s làm t t c nh ng vi c còn l i cho chúng ta. Chúng ta ch choẽ ấ ả ữ ệ ạ ỉ
nó đ ng d n đ n đo n mã c n chèn b ng cách s d ng nh ng b ch n jQuery thôngườ ẫ ế ạ ầ ằ ử ụ ữ ộ ọ
th ng, và sau đó đ a URL c a tên file mà chúng ta c n t i d i d ng tham s c aườ ư ủ ầ ả ướ ạ ố ủ
ph ng th c. Bây gi n u b n nh p chu t vào đ ng liên k t đ u tiên, t p tin đó sươ ứ ờ ế ạ ấ ộ ườ ế ầ ệ ẽ
đ c t i và đ t vào trong <div id=’dictionary’>. Trình duy t s x lý đo n mã HTMLượ ả ặ ệ ẽ ử ạ
m i ngay khi nó đ c chèn vào.ớ ượ
Ban nhân thây răng ma HTML cua chung ta đa t đông co đinh dang CSS con tr c đây& & ' ( ) * ' ) ư& & ' & & ( ươ'
thi no không co đinh dang gi. B i vi ngay sau khi đoan ma HTML nay đ c chen vao( ' ' & & ( ơ* ( & ) ( ươ& ( (
trang thi no se chiu anh h ng b i cac luât CSS cua trang no đ c chen vao.( ' ) & * ươ* ơ* ' & * ' ươ& ( (
Khi ban th nhân môt ch thi đinh nghia cua t đo se xuât hiên gân nh ngay lâp t c.& ư* ' & ư) ( & ) * ư( ' ) ' & ( ư & ư'
Đây chinh la điêm nhâm lân khi ban lam viêc local. Ban se không thây đ c th i gian' ( * ( ) & ( & & ) ' ươ& ơ(
phai đ i đê truyên tai tai liêu trên mang. Gia s chung ta thêm môt thông bao khi đinh* ơ& * ( * ( & & * ư* ' & ' &
nghia cua t đa tai xong) * ư( ) *
1
2
3
4
5
6
7
$(document).ready(function() {
$('#letter-a a').click(function() {
$('#dictionary').load('a.html');
alert('Loaded!');
return false;
});
});
Khi ban nhin vao đoan ma jQuery trên ban co thê nghi răng hôp thông bao chi xuât& ( ( & ) ơ* & ' * ) ( & ' * '
hiên sau khi tai liêu đa đ c tai xong. Nh ng lênh cua JavaScript la đông bô, lam xong& ( & ) ươ& * ư) & * ( ( & (
v i tac vu nay m i đên tac vu khac theo trât t nghiêm ngăt.ơ' ' & ( ơ' ' ' & ' & ư& &
Nh ng nêu đoan ma nay đ c chay th trên host thât thi bang thông bao xuât hiên vaư ' & ) ( ươ& & ư* & ( * ' ' & (