Xy dng cc trang web da trn Ajax bng PHP

Hy lm diu d c phong cch vi mt s khung cng tc mi nht hin c

Muc d: Trung bnh
Ken Ramirez, Sng lp vin, Axsys Technology Group
07 08 2009
Tm hiu qu trnh vit cc ung dung JavaScript + XML khng dng b (Ajax) bng cch su
dung m JavaScript nguyn sinh v PHP. Bi vit ny gioi thiu mt s khung cng tc v
cc giao din chuong trnh ung dung (API) khc nhau, giam bot duoc s luong m ban cn
vit d hon tt mt ung dung web dua trn Ajax.
PHP d c mt tu nhiu nm nay. Thuong n duoc su dung nhu mt ngn ngu kich ban lnh pha my chu
d pht trin cc ung dung dua trn web kh nhanh chng v dat duoc cc kt qua tt. Thuc t mt s du
n dua trn web ph bin nht nhu PHP-Nuke, osCommerce, v Joomla tt ca du duoc pht trin bng
PHP v ngy nay tip tuc lon manh.
Ajax cung d c mt duoc mt thoi gian, nhung mi gn dy moi c nhiu trang web duoc pht trin bng
cch su dung cc thuc hnh Ajax. Ajax cung cp cng ngh cho php mt trang web hay ung dung dua
trn web giao tip voi my chu m khng cn phai lm moi lai ton b trang. V co ban, cc dc tnh
khng dng b cung cp phuong tin d trnh duyt cua my khch gui yu cu hoc goi cc phuong thuc
m duoc thuc hin bn pha my chu. Kt qua tu my chu sau d c th duoc xu l bn pha khch bng
cch su dung m JavaScript, v bt ky kt qua du ra no cung c th duoc trn vo khung nhn HTML
mt truoc (front-end) hin tai m khng cn lm moi lai trang. Khi su dung Ajax, ban khng tht su su
dung mt ngn ngu lp trnh moi. Trn thuc t, tt ca nhung g ban lm l tn dung cc cng ngh hin c
v dua vo su dung chng tt hon.
Khi kt hop voi nhau, PHP v Ajax cung cp mt nn tang manh d tao ra cc trang web hoc cc ung
dung dua trn web voi cc tnh nng vung manh. Bi ny xem xt mt s cch su dung PHP v Ajax v
khao st cch ban c th tn dung chng trong cc ung dung dua trn web cua ban nhu th no. Truoc khi
ban tin hnh, mt su hiu bit vung vng v HTML v m JavaScript l rt quan trong. Ban cung cn
quen bit PHP nhu l mt ngn ngu kich ban lnh, mc d hu ht ngn ngu kich ban lnh no khc cung
c th thay th duoc n.
Giao tip vi my ch
Cha kha cho vic giao tip khch/chu trong Ajax l su dung di tuong XMLHttpRequest cua
JavaScript. Di tuong ny duoc hu ht cc trnh duyt h tro, gm Windows Internet Explorer 5.0 v
cc ban cao hon, Safari 1.2, Mozilla Firefox, Opera 8 v cc ban cao hon, v Netscape 7. D hiu duoc su
khc nhau giua cc giao tip khch/chu truyn thng v giao tip khch/chu dua trn Ajax, ti s su dung
mt v du. Theo truyn thng, d trnh duyt khch gui ni dung dn my chu d xu l hoc luu tru trong
mt co so du liu, ban thuong su dung mt hnh dng POST d gui ni dung tu cc truong du vo thu
thp duoc o pha khch toi my chu. My chu xu l ni dung ny bng cch su dung PHP (hoc bt ky
ngn ngu kich ban lnh no m ban lua chon), doc hoc luu du liu bng cch su dung mt co so du liu,
v tra lai cc kt qua duoc nhng bn trong m HTML. Sau d HTML s duoc trnh duyt xu l v mt
trang moi duoc biu hin ra cho nguoi su dung cui cng xem. Hnh 1 m ta r kich ban ny.

Hnh 1. Quy trnh truyn thng d d trnh d liu v nhn kt qua
Page 1 of 11 Xy dung cc trang web dua trn Ajax bng PHP


Khi su dung Ajax, cung cng quy trnh ny nhung cn t thoi gian hon o mt truoc. tuong l lm cho
nguoi su dung cam thy nhu l ho khng bao gio phai doi mt trang cp nht. Thuc t l bng cch su
dung Ajax, ban c th pht trin ton b ung dung web bng cch su dung chi mt trang HTML don le,
mc d ti ht suc khuyn ban dung lm nhu vy. Theo cch truyn thng, nu ban mun gui mt biu
mu cho my chu, ban thit lp mt hnh dng (action) cua biu mu d v chi dinh r kiu hnh dng l
POST. Voi Ajax, ban khng thuc su d trnh mt biu mu truc tip cho my chu. Thay vo d, ban goi
mt hm JavaScript, n kim tra lai v thu thp cc gi tri tu biu mu cua ban v sau d gui du liu dn
mt hm o pha my chu bng cch su dung XMLHttpRequest. Kt qua duoc gui tra lai tai mt dim cho
trnh khch, sau d trnh khch xu l kt qua v cp nht cc phn cua trang cn duoc cp nht. Trong
truong hop ny, trang d khng duoc lm moi lai ton b. Do d, cn t thoi gian hon d xu l m HTML.
Kt qua l hiu nng hoat dng tt hon. Hnh 2 minh hoa quy trnh ny hoi khc di nhu th no khi su
dung Ajax d tao ra mt cp nht cho trang web chu khng phai l lm moi ton b trang.

Hnh 2. Quy trnh Ajax d d trnh v nhn kt qua
Page 2 of 11 Xy dung cc trang web dua trn Ajax bng PHP


Hy quan st cc buoc cn thit d thuc hin giao tip voi my chu, mt thuc t tu m JavaScript cua ban.
Truoc tin, ban dinh nghia biu mu s trng nhu th no, nhu trong Lit k 1.

Lit k 1. Biu mu HTML

Biu mu ny sinh ra kt qua du ra nhu Hnh 3.

Hnh 3. Du ra cua biu mu HTML


Biu mu ny khng lm diu g tht su c ch, nhung hy vong n gip ban bt du thy nhung noi m ban
c th tch hop Ajax vo m cua mnh.
Hy ch rng su kin onClick duoc xc dinh trn nt nhn. Su kin ny duoc thit lp d goi mt hm
JavaScript c tn l ajaxFunction. Dy l noi moi diu tro nn th vi trong th gioi Ajax. Trong pham
vi phuong thuc ny, ban thuc hin mt vi buoc, chng duoc giai thch trong phn ny:
1. Tao mt c th cua di tuong XMLHttpRequest cn c.
2. Mo mt kt ni dn dich vu pha my chu m ban mun goi.
3. Bo cho Ajax bit s goi phuong thuc no khi m pha my chu thi hnh xong v tra lai kt qua.
4. Gui yu cu.
<body>
My I1sf Aax Page

<fom name="myIom">
Pess buffon fo v1eW seve f1me:
<1npuf fype="buffon" va1ue="updafe"
onC11ck="aaxIuncf1on{}" />
5eve 11me ls: <1npuf fype="fexf" name="f1me" />
</fom>

</body>

Page 3 of 11 Xy dung cc trang web dua trn Ajax bng PHP
5. Phan hi khng dng b.
Tao mt c th
Ban cn tao ra hm ajaxFunction v cung cp mt bin d luu giu di tuong XMLHttpRequest khi n
duoc tao ra. Nhu voi bt ky phuong thuc JavaScript no, ban dinh nghia phuong thuc d nhu trong Lit k
2.

Lit k 2. D|nh nghia cua ajaxFunction

Hu ht cc trnh duyt hin dai vn d h tro di tuong XMLHttpRequest. Tuy nhin, cc trnh duyt cu
hon nhu Internet Explorer 6 di hoi ban phai tao ra mt di tuong ActiveX d thuc hin vic goi khng
dng b dn my chu. Diu ny gy ra mt vn d v ban phai xc dinh m cua ban dang chay trong trnh
duyt no v tao ra dng di tuong d lm duoc vic. M JavaScript cung cp mt giai php bng su h
tro cua n di voi khi chuc nng thu/bt (try/catch). Ban chi cn thu tao ra cc di tuong theo thu tu
uu tin v d khi try/catch xu l phn cn lai, tuong tu nhu m dua ra trong Lit k 3.

Lit k 3. To di tung XMLHttpRequest thch hp

Nhu ban d thy, tt ca cc trnh duyt hin dai duoc vit d h tro vic tao nguyn thuy di tuong
XMLHttpRequest. C mt tranh lun v vic Microsoft c tht su h tro di tuong XMLHttpRequest
nguyn thuy khng hay chi don gian l bao gi mt trin khai thuc hin ActiveX bng cch su dung mt
mt ngoi.
M mt kt ni dn my ch
Bn trong chnh hm JavaScript y, sau khi tao ra di tuong XMLHttpRequest, ban tip tuc bng vic mo
mt kt ni dn kich ban lnh pha my chu bng cch su dung phuong thuc open cua di tuong
XMLHttpRequest. Phuong thuc ny tip nhn hai tham s bt buc v ba tham s ty chon, nhu m ta
trong Bang 1.

TBang 1. Cc tham s cua phuong thc open
funcf1on aaxIuncf1on{} {
va xm1hffp = nu11
.
.
.
}

funcf1on aaxIuncf1on{} {
va xm1hffp=nu11

fy
{
// I1efox, lnfenef Lxp1oe 7. Opea .0+, 5afa1.
xm1hffp = neW XMLhffpkequesf{}
}
cafch {e}
{
// lnfenef Lxp1oe 6.
fy
{
xm1hffp = neW Acf1veXObecf{"Msxm12.XMLh11P"}
}
cafch {e}
{
fy
{
xm1hffp = neW Acf1veXObecf{"M1cosoff.XMLh11P"}
}
cafch {e}
{
efun fa1se
}
}
}
}

Page 4 of 11 Xy dung cc trang web dua trn Ajax bng PHP

Di voi v du ny, chi cn thuc hin mt thao tc GET yu cu mt kich ban lnh trn my chu tra v ngy
gio (time) hin tai. Ban cung bo cho phuong thuc open bit rng ban mun thuc hin khng dng b thao
tc ny, nhu trong Lit k 4.

Lit k 4. Gi phuong thc open

Bo cho Ajax bit gi phuong thc no khi m pha my ch thi hnh xong
Khi ban goi my chu bng cch su dung Ajax, kt qua phan hi s goi lai thng qua hm callback. Ban
c th tao ra v dt tn mt hm hoc tao ra mt hm khng tn, nhu ti d thuc hin. Trong truong hop
no th ban cung cn bo cho di tuong XMLHttpRequest bit hm callback no duoc su dung bng
cch thit dt thuc tnh onReadyStateChange cua n, nhu trong Lit k 5.

Lit k 5. Thit d}t thuc tnh onReadyStateChange

Nhu ban d thy, phuong thuc ny kim tra readyState sau khi n duoc goi, tm kim mt gi tri kha di
l 4. C nm trang thi kha di, chng duoc m ta trong Bang 2.

Bang 2. Cc gi tr| kha di di vi readyState
Tham s M ta
method Chi r phuong thuc HTTP m ban mun su dung. Cc gi tri kha di gm GET, POST, PUT hoc HEAD.
url Chi r duong dn tuyt di hoc tuong di dn du liu XML hay dich vu web XML pha my chu m
ban mun goi ra. D ngn chn cc tn cng qua kich ban lnh xuyn trang (cross-site scripting attacks),
cc yu cu Ajax chi duoc thuc hin cho URL voi cng giao thuc, my chu, v cng nhu trang chua yu
cu Ajax. Mc d mt s trnh duyt c th cho php cc URL tuy , ban khng nn dua vo h tro ny
tu tt ca cc trnh duyt. Nu ban cn giao tip xuyn trang (cross-site communication), n phai duoc xu
l o pha my chu bng cch su dung cURL hoc mt s phuong tin khc.
async True nu ban mun gui yu cu dn my chu theo kiu khng dng b. Cung cn phai gn tham s ny
l true nu ban d bt (set) thuc tnh onreadystatechange, diu m ti s thao lun ngay sau dy.
Gn tri tham s ny l false s ngn chn hu ht cc trnh duyt tip nhn thm bt cu du vo no tu
nguoi su dung. Nu ung dung cua ban l linh hoat du d tip tuc nhn du liu du vo trong khi hoat
dng mt sau (back-end operation) hon tt, tt nht l thuc hin hnh dng cua ban khng dng b.
user Chi r mt tn nguoi su dung duoc su dung vo muc dch xc thuc nguoi su dung truoc khi thuc thi
kich ban lnh. Vic ny chi cn thit khi kich ban yu cu xc thuc nguoi su dung.
password Chi r mt mt khu duoc su dung vo muc dch xc thuc nguoi su dung truoc khi thuc thi kich ban
lnh. Vic ny chi cn thit khi kich ban yu cu xc thuc nguoi su dung.
funcf1on aaxIuncf1on{} {

.
.
.
xm1hffp.open{"GL1", "f1me.php", fue}

}

funcf1on aaxIuncf1on{} {

.
.
.
xm1hffp.oneadysfafechange=funcf1on{} {
1f{xm1hffp.eady5fafe==4}
{
// Gef fhe dafa fom fhe seves esponse.
documenf.myIom.f1me.va1ue=xm1hffp.esponse1exf
xm1hffp=nu11
}
}
}

Page 5 of 11 Xy dung cc trang web dua trn Ajax bng PHP

M ny v co ban ni rng, Nu trang thi ni rng thao tc ny d hon tt, th tip tuc. Khi trang thi l
d hon tt, buoc tip theo l cp nht phn cua trang cn phai cp nht bng phan hi tu my chu. Diu
ny duoc thuc hin bng cch ly gi tri d duoc gn cho thuc tnh responseText, gi tri ny duoc din
boi phan hi tu my chu. Cui cng, ban ngung di tuong XMLHttpRequest lai bng cch gn cho n gi
tri null.
Gi yu cu
Chi cn mt buoc nua m ajaxFunction phai thuc hin, v d l gui yu cu cho my chu. Diu ny
duoc thuc hin voi phuong thuc send cua di tuong XMLHttpRequest. Nu yu cu l khng dng b,
phuong thuc tra v ngay lp tuc sau khi gui yu cu. Nu n l dng b, phuong thuc ny chi tra v sau
khi nhn duoc phan hi, diu d c nghia l chuc nng Ajax bi kha lai dn khi phuong thuc d tra v.
Phuong thuc ny c mt tham s m ban c th gn gi tri null hoc mt s cc gi tri khc. Th du ban c
th truyn cho n mt di tuong DOMDocument, mt InputStream, hoc mt String. Gi tri duoc su
dung nhu l phn thn cua yu cu HTTP nu phuong thuc yu cu l POST. Hm ajaxFunction hon
chinh s ging nhu Lit k 6.

Lit k 6. Hm ajaxFunction hon chinh

Phn hi khng dng b
Do su pht trin Ajax c ban cht l khng dng b, ban phai cn thn voi su tuong tranh v hy quan tm
dn chui xu l cua ban. Diu ny dc bit quan trong khi ban thuc hin nhiu loi goi Ajax v nhn duoc
cc phan hi theo mt trnh tu khng bit truoc. Quy tc ngn tay ci l hy cho doi diu bt ngo.
C th c nhung ln m phan hi tu my chu cn quay tro lai my khch nhu l mt ti liu XML. Trong
nhung truong hop nhu th, ban c th su dung thuc tnh responseXML cua di tuong XMLHttpRequest
Gi tr| M ta
0 Khng duoc khoi tao
1 Dang nap
2 Nap xong
3 Tuong tc
4 Hon tt
funcf1on aaxIuncf1on{} {
va xm1hffp=nu11

fy {
// I1efox, lnfenef Lxp1oe 7. Opea .0+, 5afa1
xm1hffp = neW XMLhffpkequesf{}
} cafch {e} {
// lnfenef Lxp1oe 6.
fy {
xm1hffp = neW Acf1veXObecf{"Msxm12.XMLh11P"}
} cafch {e} {
fy {
xm1hffp = neW Acf1veXObecf{"M1cosoff.XMLh11P"}
} cafch {e} {
a1ef{"You boWse does nof suppof AJAX!"}
efun fa1se
}
}
}
xm1hffp.open{"GL1", "f1me.php", fue}
xm1hffp.oneadysfafechange=funcf1on{} {
1f{xm1hffp.eady5fafe==4} {
// Gef fhe dafa fom fhe seves esponse.
documenf.myIom.f1me.va1ue=xm1hffp.esponse1exf
xm1hffp=nu11
}
}
xm1hffp.send{""}
}

Page 6 of 11 Xy dung cc trang web dua trn Ajax bng PHP
d ly ra du liu. Lit k 7 th hin kich ban lnh PHP s nhu th no trong truong hop ny.

Lit k 7. M PHP tra v mt ti liu XML

Nhu ban d bit, m tao ra mt ti liu XML, biu hin bng dng '<?xml version="1.0"
encoding="ISO-8859-1"?>' truoc khi gui phn cn lai cua phan hi. M pha khch phai duoc vit
sao cho n truoc tin s rt ra ti liu XML tu thuc tnh responseXML phn tch du liu bng cch su
dung DOM (M hnh Di tuong Ti liu), v sau d hin thi du liu trn trang bng cch sua di cc
truong thch hop d c sn trn trang d. Lit k 8 th hin cc thao tc ny.

Lit k 8. M JavaScript xu l mt ti liu XML

M rng Ajax bng cc khung cng tc JavaScript
Ban hn d nhn thy rng chng c g dc bit cn thit tu m PHP pha my chu d thuc hin cc chuc
nng Ajax o mt truoc. Trn thuc t, ban c th thuc su vit kich ban lnh pha my chu bng bt ky ngn
ngu no m my chu web cua ban c th goi thuc hin v tra lai kt qua cua n cho trnh khch. Tuy
nhin, c mt s sng kin mo rng Ajax d lm cc vic khc. Th du, c mt s thu vin cung cp nhiu
diu khin (controls) mt truoc hp dn truc quan hon nhiu d bin uoc mo cua Web 2.0 thnh hin thuc.
Hu ht cc thu vin ny duoc vit bng m JavaScript v cung cp cc dc tnh v API lm giam bot s
luong m JavaScript ban cn vit o mt truoc. Cung ph bin trong hu ht cc thu vin ny l vic su
dung K php Di tuong JavaScript (JavaScript Object Notation - JSON); d l mt dinh dang trao di du
liu gon nhe duoc su dung trn ton b Internet hin nay. Sau dy l mt s thu vin m ban c th thy
b ch:
Prototype
Script.aculo.us
Dojo
jQuery
Prototype
Prototype cung cp m JavaScript dua theo lop (class-driven) d pht trin cc ung dung web dng. Ngoi
ra, khung cng tc Prototype cung cp mt di tuong Ajax ton cuc, lm cho d vit cc hm Ajax cua ban
hon, v thm ch l d xu l hon. Su dung khung cng tc ny d pht trin Ajax cua ban cn mang lai loi
<?php

$esu1f = gefkecod5ef{$GL1|quey]

echo <?xm1 ves1on="1.0" encod1ng="l5O-59-1"?> .
<ca>

Wh11e{$oW = mysq1fefchaay{$esu1f}} {

echo "<make>" . $oW|make] . "</make>"
echo "<mode1>" . $oW|mode1] . "</mode1>"
echo "<yea>" . $oW|yea] . "</yea>"
echo "<desc1pf1on>" . $oW|desc1pf1on] .
"</desc1pf1on>"
}
echo </ca>
?>

funcf1on sfafeChanged{} {
1f{xm1hffp.eady5fafe==4} {
xm1Doc = xm1hffp.esponseXML
documenf.gefL1emenf8yld{"make"}.1nneh1ML =
xm1Doc.gefL1emenfs8y1agName{"make"}|0].ch11dNodes|0].nodeva1ue
documenf.gefL1emenf8yld{"mode1"}.1nneh1ML =
xm1Doc.gefL1emenfs8y1agName{"mode1"}|0].ch11dNodes|0].nodeva1ue
documenf.gefL1emenf8yld{"yea"}.1nneh1ML =
xm1Doc.gefL1emenfs8y1agName{"yea"}|0].ch11dNodes|0].nodeva1ue
documenf.gefL1emenf8yld{"desc1pf1on"}.1nneh1ML =
xm1Doc.gefL1emenfs8y1agName{"desc1pf1on"}|0].ch11dNodes|0].nodeva1ue
}
}

Page 7 of 11 Xy dung cc trang web dua trn Ajax bng PHP
ch b sung l ban khng cn phai xu l cc vn d xuyn nhiu trnh duyt (cross-browser) nua. Voi mt
ln goi, ban c th cung cp URL dch, phuong thuc HTTP (POST hoc GET), phuong thuc goi lai phan
hi (response callback method), v nhiu thu khc.
Script.aculo.us
Mt khung cng tc JavaScript ph bin khc c mt s diu khin (controls) giao din nguoi su dung dep
mt l Script.aculo.us. Khung cng tc ny cung cp mt diu khin thuc hin cc chuc nng Ajax cho
ban. Thm ch c mt diu khin truong vn ban tu dng hon tt ging nhu kiu Google m ban c th su
dung d ly vn ban tu nguoi su dung cua ban. Cc chuc nng Ajax cho php ban d dng xc dinh duoc
muc tiu truy vn bn pha my chu. Phan hi kt qua duoc su dung d hin thi mt tp hop cc xu k tu
m my chu tra v cho nguoi su dung cui cng nhu l cc lua chon kha di.
Dojo
B cng cu Dojo l mt khung cng tc Javascript v Ajax m ngun mo, ni ting v tc d cua n v
kch thuoc chi 25KB. Trong vu di Ajax, Dojo cung cp cc API cua chnh n d gui v nhn cc cuc goi
khng dng b dn v tu mt my chu. Khng c g thay di o pha my chu. M PHP cua ban tip tuc
phan hi ging nhu n lun lun lm di voi bt ky loi goi Ajax no.
jQuery
jQuery thuc hin mt cng vic tuyt voi l don gian ho co ch d tm kim cc phn tu trong cc trang
cua ban v b sung cc chuc nng moi, dc tnh moi, v dinh dang ngay trong khi dang chay thi hnh (on
the fly at runtime). N cung gm ca mt s dc tnh Ajax dc bit cho php ban cung cp cc tuong tc
Ajax trn cc trang Web cua ban.
M rng PHP d h tr Ajax
By gio ban d hiu nhung diu co ban, ti s cho ban thy hin nay PHP dang duoc mo rng nhu th no
d h tro Ajax. Tu phi canh PHP, vic mo rng Ajax khng chi l vic vit lai m truy cp
XMLHttpRequest (XHR). By gio ban d hiu nhung diu co ban, ti s cho ban thy hin nay PHP dang
duoc mo rng nhu th no d h tro Ajax. Tu phi canh PHP, vic mo rng Ajax khng chi l vic vit lai
m truy cp. Cc dich vu mt truoc cn duoc tnh dn bao gm thi hnh dich vu mt sau, truy cp mt co
so du liu, v thuc hin cc dich vu mang mt sau tu mt truoc. Mt s khung cng tc m ti d thy trn
thi truong cho php cc nh pht trin vit m cua ho trong ngn ngu mt sau (back-end language), v
khung cng tc ny tao ra m JavaScript mt truoc. V co ban, ban bo cho n bit cc phuong thuc mt
sau no phai duoc goi, v khung cng tc ny vit ra cu trc ngoi mt truoc (front-end faades) bng m
JavaScript; m ny c th cp pht mt di tuong XHR, gui yu cu, nhn phan hi, v sau d chuyn n
toi mt hm ty theo lua chon cua ban hoc thm ch gn du ra truc tip toi mt phn tu HTML m ban
lua chon. tuong l d giam bot s luong m JavaScript m ban phai vit. Voi suy nghi y, tt ca cc
phn tu m ban mun cung cp cc hm cho chng c th duoc ghi d v buc ni voi cc phuong thuc
mt sau; cc phuong thuc mt sau ny phan ung lai khi xay ra mt su kin mt truoc d dinh. Sau dy l
cc khung cng tc dng duoc nghin cuu:
PHP AJAX
PHP-Ext
ExtPHP
PHP AJAX
PHP AJAX cho php ban mo rng mt lop PHP bng lop cua ring ban. Sau d ban chi cn goi ra mt
phuong thuc khoi tao khi tp tin PHP cua ban duoc goi ra, v n tao ra m XHR mt truoc cn thit cho
ban. Sau d, su kin mt truoc phai goi mt hm JavaScript voi tn ging nhu tn lop PHP cua ban. M
ny trng ging nhu Lit k 9.

Lit k 9. Mo rng PHP AJAX bng lp PHP cua ring bn
c1ass aaxapp exfends phpaax {
funcf1on 1npuf{} {
}
funcf1on 1oad1ng{} {
}
Page 8 of 11 Xy dung cc trang web dua trn Ajax bng PHP

Cc phuong thuc ghi d duoc goi ra d thuc hin cc nhim vu khc nhau trong vng doi cua Ajax. Th
du, nu mt hnh dng duoc thi hnh o mt truoc, phuong thuc main() cua lop o mt sau duoc goi ra d
xu l hnh dng ny. Bt cu du liu du vo no thu thp o mt truoc du duoc chuyn toi phuong thuc
input().
PHP-Ext
PHP-Ext cung cp mt thu vin duoc vit d h tro cho ca PHP 4 v PHP 5, cung cp nhiu diu khin
giao din nguoi su dung o mt truoc. Co so nm duoi cua cc diu khin ny thuc su duoc Ext JS cung
cp, nhung ci lm cho khung cng tc ny l duy nht l o ch ban khng phai tp trung vo vic cung
cp JavaScript d thao tc cc diu khin mt truoc. Thay vo d, ton b tuong tc voi cc diu khin
duoc thuc hin bng cch su dung cc dich vu mt truoc duoc vit bng PHP. M PHP duoc goi ra khi cn
thit, ty thuc vo cc su kin m ban d chi dinh r rng ban mun xu l su kin y. Khi xut hin mt
su kin d dng k, phuong thuc PHP ph hop duoc goi ra trong m cua ban. Voi cch ny, ban c th
din vo ni dung cua cc luoi chu nht bi tr giao din v cc diu khin khc gn nhu l truc tip tu
m PHP cua ban.
ExtPHP
Theo nh pht trin dung du du n, ban c th dng PHP-Ext d vit ra m JavaScript xm nhp v
khng xm nhp (intrusive and non-intrusive), dng nhu ban c th s lm voi Ext JS. Loi dim l o ch
thit k ny cho php b bin tp PHP cua ban pht hin duoc cc tn phuong thuc chua c, c li chnh ta
hoc su dung sai chu khng phai l buc ban g li m JavaScript trong trnh duyt Web. tuong dng
sau ExtPHP l d tao ra cc lop PHP m c th duoc goi tu cc kich ban lnh PHP. Khi ban khoi tao mt
di tuong, m JavaScript tuong ung duoc luu lai trong mt b dm trong. Nu ban goi ra mt phuong thuc
cua di tuong, m ny s duoc thm vo b dm trong (internal buffer). Khi ban d sn sng hon tt m
JavaScript, ban chi cn goi ra mt phuong thuc don le, jsrender(). Ban cung c th b sung truc tip
m JavaScript vo du ra cua ban bng cch goi ra cc hm ExtPHP cho php ban thm vo du ra.
Tm tt
Bi vit ny cung cp cho ban mt kin thuc nhp mn v vit m mt truoc dua trn Ajax v sau d chi
cho ban bit cch kt hop m mt truoc voi kich ban lnh PHP mt sau. N cung dn ban dn mt s
khung cng tc sn c moi nht cho php ban tao ra cc ung dung web dua trn Ajax nhanh hon nhiu so
voi ban tu vit ra ton b m. Bng cch kt hop mt hoc hai khung cng tc y voi Ajax v PHP, ban c
th vit ra cc ung dung web truc quan hp dn v phong ph. Thuc t ban c th tu hoi lm sao m ban
lai tung vit duoc cc ung dung web cua ban khng c cc cng ngh moi y.


Ti nguyn
Hc tp
JavaScript.com l mt ngun ti nguyn lon d tm hiu v m JavaScript v cc cng ngh sp toi
lin quan dn n.

Trang web PHP Ajax Frameworks cung cp mt danh muc cc khung cng tc d pht trin cc
ung dung PHP/Ajax m ban khng phai tu mnh m ho ton b cc JavaScript Ajax. Nhiu trong
s cc khung cng tc thuc hin cc cng vic nn bn duoi cho ban, cho php ban tp trung vo
cc mu cht chnh cua ung dung cua ban, chu khng phai l co so ha tng d c duoc cc giao tip
Ajax khch/chu.

"Ajax & PHP without using the XmlHttpRequest Object" (PHPit, 11.2005) c mt s tuong thuc
su khn ngoan, n m ta cch m ban c th vit m PHP cho php ban su dung cc nim Ajax
m khng phai phu thuc vo di tuong XMLHttpRequest. Tuy nhin, n bi han ch chi dng
funcf1on ma1n{} {
}
}

Page 9 of 11 Xy dung cc trang web dua trn Ajax bng PHP
phuong thuc GET, nn nu ban cn gui dn my chu hon 500 byte, ban c th phai tm cng cu khc
d lm vic d.

D tm moi thu v Ajax, Ajaxian nht dinh l noi cn phai dn. Dy l mt trang web phai xem.
Moi thu dnh dng dn Ajax du o trn trang Web ny. D n phai lm bng PHP hay mt ngn
ngu khc th ban vn s tm thy n o dy.

Mo rng cc k nng web cua ban bng cc bi vit v huong dn chuyn mn ho v cc cng
ngh web trong Web development zone cua developerWorks.

Dng hnh voi Technical events and webcasts cua developerWorks.


Ly san phm v cng ngh
Nu JavaScript d duoc nap bng mt API hoc Khung cng tc d duoc nng cp, n s l
Prototype. Khi JavaScript API kt thc, Prototype s ni tip. Khung cng tc ny d tro thnh tiu
chun duoc cc nh pht trin khung cng tc JavaScript khc su dung nhu l khung cng tc co so,
trn d xy dung cc khung cng tc moi. Trn thuc t, script.aculo.us duoc xy dung trn khung
cng tc ny.

Thu vin script.aculo.us cung cp mt s diu khin UI dep nht m ti tung thy. Ti d ginh
thng loi mt cch d dng tu nhiu khch hng hanh phc nho thu vin nho tin dung ny.

JSON l mt dinh dang trao di du liu hang nhe m con nguoi c th doc duoc v my tnh d
dng phn tch c php duoc. Khng chi dnh cho m JavaScript m thi, JSON d duoc thm vo
ngn ngu PHP o phin ban 5.2.0.

Ext JS l mt khung cng tc Javascript voi cc thnh phn Ajax v UI. N lm vic cng voi
Prototype, Yahoo UI, v jQuery. C sn ca giy php m ngun mo v giy php thuong mai cho
du n ny.

Dojo cung cp Ajax, cc su kin, dng gi, vic truy vn dua trn CSS, v nhiu thu nua trong mt
gi nho gon.

jQuery l mt thu vin JavaScript don gian ho cch ban di ngang qua cc ti liu HTML, xu l su
kin, v thuc hin hoat hnh. N cung c mt s tnh nng Ajax cho php ban d dng thm Ajax
vo HTML mt truoc cua ban d goi cc kich ban lnh pha my chu o mt sau.

PHP AJAX l mt khung cng tc tao ra ton b m JavaScript cn thit ngay trong khi chay thi
hnh sau khi tp tin PHP duoc goi ra. Ban vit mt lop PHP m mo rng mt lop PHP Ajax v vit
d cc phuong thuc d xu l cc loi goi mt truoc tai mt sau.

PHP-Ext PHP-Ext l mt thu vin widget m ngun mo dua trn Ext JS, cung cp cho cc nh pht
trin kha nng vit cc kich ban lnh PHP thay cho m JavaScript.

ExtPHP ExtPHP l mt thu vin m ban c th su dung d vit JavaScript xm nhp v khng xm
nhp, dng nhu cch ban c th lm voi Ext JS.


Thao lun
Xem qua developerWorks blogs v tham gia vo cng dng developerWorks.


i nt v tc gi
Ken Ramirez l nguoi sng lp Tp don Cng ngh Axsys Technology Group, tp don ny
cung cp dich vu chu chua Web (hosting) v pht trin trang web tuy chinh thng qua Axsys
Page 10 of 11 Xy dung cc trang web dua trn Ajax bng PHP
Java v tt ca cc nhn hiu v biu tuong dua trn Java l cc thuong hiu cua Sun Microsystems, Inc. tai
Hoa Ky, cc quc gia khc, hoc ca hai. Microsoft, Windows, Windows NT, v biu tuong Windows l cc
thuong hiu cua Tp don Microsoft tai Hoa Ky, cc quc gia khc, hoc ca hai. Cc tn cng ty, san phm,
hoc dich vu khc c th l tn nhn hiu hng ha hoc dich vu cua cc hng khc. Cc tn cng ty, san
phm, hoc dich vu khc c th l cc tn nhn hiu hng ha hoc dich vu cua cc hng khc. Tn cua cng
ty, san phm hay dich vu c th l nhn hiu dng k hoc nhn hiu dich vu cua nguoi khc.







Hosting. Ken cung lm vic voi cc chu doanh nghip nho, nhung nguoi dang tm kim cc
giai php trang web khng dt tin qua trang web http://www.BuildMySiteTonight.com cua
ng. Cng ty ng chuyn v PHP, MySql, Linux, XHTML/CSS, Adobe Flash, cc giai php
thuong mai din tu, v cc giai php quan l ni dung.
Page 11 of 11 Xy dung cc trang web dua trn Ajax bng PHP