Tai Lieu Huong Dan AJAX

www.w3schools.
com Ngi dch: Hunh Dip Tn

AJAX l vit tt ca Asynchronous JavaScript And XML.
AJAX l mt kiu lp trnh tr nn ph bin vo nm 2005 (vi Google Suggest).
AJAX khng phi l mt ngn ng lp trnh mi m l mt cch thc mi s dng
nhng chun c.
Vi AJAX bn c th to ra nhng ng dng web tt, nhanh v thn thin vi
ngi dng hn.
AJAX da trn nhng yu cu JavaScript v HTML.
Bt u hc ngay AJAX!
www.w3schools.com Ngi dch: Hunh Dip Tn
Gii thiu AJAX
AJAX vit tt ca Asynchronous JavaScript And XML.
Nhng yu cu kin thc ti thiu
Trc khi tip tc, bn nn c nhng kin thc c bn v:
HTML, XHTML
JavaScript
AJAX = Asynchronous JavaScript and XML
AJAX khng l mt ngn ng lp trnh mi, nhng l mt k thut to ra nhng ng
dng web tt, nhanh v giao tip thn thin hn.
Vi AJAX, JavaScript, bn c th giao tip trc tip vi my ch bng cch s dng i
tng JavaScript l XMLHttpRequest. Vi i tng ny, JavaScript c th trao i d
liu vi my ch web m khng cn np li trang.
AJAX s dng k thut chuyn d liu bt i xng (asynchronous) gia trnh duyt v
my ch web, cho php cc trang web yu cu thng tin t my ch thay v c trang.
Cng ngh AJAX lm cho nhng ng dng Internet tr nn nh, nhanh v thn thin vi
ngi dng hn.
AJAX l mt cng ngh pha trnh duyt, c lp vi phn mm my ch web.
AJAX da trn cc chun v web
AJAX da trn cc chun v web sau y:
JavaScript
XML
HTML
CSS
Cc chun v web c s dng trong AJAX c nh ngha rt tt, v c tt c
trnh duyt ph bin h tr. Cc ng dng AJAX u c lp vi trnh duyt v nn.
AJAX lm cho nhng ng dng Internet tt hn
Nhng ng dng web c nhiu li ch hn nhng ng dng my bn; chng c th n
c vi mt s lng ln ngi dng. Vic ci t, h tr v pht trin chng d dng
hn.
Tuy nhin, nhng ng dng Internet khng phi lc no cng phong ph v thn thin vi
ngi dng nh nhng ng dng truyn thng chy trn my bn.
Vi AJAX, nhng ng dng web c th phong ph v thn thin vi ngi dng hn.
Ngay by gi bn c th bt u s dng AJAX
Khng c g mi hc.
AJAX da trn nhng chun c. Nhng chun ny c cc nh pht trin s dng
nhiu nm qua.
Nhng yu cu HTTP (HTTP Requests)
AJAX s dng nhng yu cu HTTP
Trong vit m truyn thng, nu bn mun ly bt k thng tin no t c s d liu, ly tp
tin trn my ch, hoc gi thng tin ngi dng n my ch, bn s phi to biu mu
HTML v GET hoc POST d liu n my ch. Ngi dng s phi nhp chut vo nt
"Submit" gi/nhn thng tin, ch my ch hi p, sau mt trang mi s c np
vi kt qu thu c.
V my ch tr v trang mi mi khi ngi dng ng gi d liu nhp, nhng ng dng
web truyn thng c th chy mt cch chm chp v tr nn thiu thn thin vi ngi
dng.
Vi AJAX, JavaScript ca bn giao tip trc tip vi my ch, thng qua i tng
JavaScript XMLHttpRequest.
Vi mt yu cu HTTP, trang web c th to ra mt yu cu v nhn phn hi t my ch
web m khng cn np li trang. Ngi dng vn gi nguyn trang c, v h s khng bn
tm n cc m kch bn ngm yu cu cc trang hay ngm gi d liu n my ch.
i tng XMLHttpRequest
Bng cch s dng i tng XMLHttpRequest, nh pht trin web c th cp nht trang
vi d liu t my ch sau khi trang c np.
AJAX c Google lm cho tr nn ph bin vo nm 2005 (vi Google Suggest).
Google Suggest s dng i tng XMLHttpRequest to ra mt giao din rt linh hot:
Khi bn bt u g ch trong hp tm kim ca Google, mt JavaScript gi nhng ch
n my ch v my ch tr v mt danh sch ca nhng gi .
i tng XMLHttpRequest c h tr trong Internet Explorer 5.0+, Safari 1.2, Mozilla
1.0 / Firefox, Opera 8+, v Netscape 7.
Mt v d AJAX
ng dng AJAX u tin ca bn
hiu AJAX lm vic th no, chng ta s to mt ng dng AJAX nh.
Trc tin, chng ta s to mt biu mu HTML chun vi hai trng vn bn: username
v time. Trng username s c in bi ngi dng v trng time s c in bng
cch s dng AJAX.
Tp tin HTML s c t tn l "testAjax.htm", v n nh th ny (ch rng biu mu
HTML bn di khng c nt gi d liu!):
<html>
<body>

<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>

</body>
</html>
Nhng phn k tip s gii thch trng tm ca AJAX.
Vic h tr trnh duyt ca AJAX
AJAX - H tr trnh duyt
Trng tm ca AJAX l i tng XMLHttpRequest.
Nhng trnh duyt khc nhau s dng nhng cch thc khc nhau to i tng
XMLHttpRequest.
Internet Explorer s dng ActiveXObject, trong khi nhng trnh duyt khc s dng i
tng JavaScript dng sn gi l XMLHttpRequest.
to i tng ny v thch ng vi cc trnh duyt khc nhau, chng ta s s dng
lnh "try v catch". Bn c th tm hiu thm v lnh try v catch trong cc ti liu v
JavaScript.
Hy cp nht tp tin "testAjax.htm" ca bn vi JavaScript to i tng
XMLHttpRequest:
<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>

Name: <input type="text" name="username" />
</form>

</body>
</html>
Gii thch v d: Trc tin to bin xmlHttp gi i tng XMLHttpRequest.
Sau th to i tng vi XMLHttp = new XMLHttpRequest(). y l cho Firefox,
Opera, v Safari browsers.
Nu n b li, th xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") dnh cho Internet
Explorer 6.0+, nu n vn b li.
Th tip xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") dnh cho Internet
Explorer 5.5+.
Nu c ba cch trn u khng lm vic, ngha ngi dng ang c mt trnh duyt qu c,
v h s nhn c mt thng bo v vic trnh duyt ca h khng h tr AJAX.
Ch : on m tng thch trnh duyt trn di v kh phc tp. Tuy nhin, y l on
m bn c th s dng mi khi cn to mt i tng XMLHttpRequest, khi y bn ch cn
chp v dn vo bt k ni no bn cn n. on m trn tng thch vi tt c trnh duyt
ph bin hin nay nh Internet Explorer, Opera, Firefox, v Safari.
Phn k tip cho bn thy cch s dng i tng the XMLHttpRequest giao tip vi
my ch.
AJAX - i tng XMLHttpRequest
AJAX - Tm hiu thm v i tng XMLHttpRequest
Trc khi gi d liu n my ch, chng ta phi hiu r ba thuc tnh quan trng ca i
tng XMLHttpRequest.
Thuc tnh onreadystatechange
Sau khi mt yu cu gi n my ch, chng ta cn mt hm tip nhn d liu c
my ch tr v.
Thuc tnh onreadystatechange lu gi hm ny, hm s x l d liu tr v t my ch.
on m sau y nh ngha mt hm rng v t thuc tnh onreadystatechange cng lc:
xmlHttp.onreadystatechange = function()
{
// Chng ta s vit mt vi dng m ti y
}
Thuc tnh readyState
Thuc tnh readyState lu gi trng thi phn hi ca my ch. Mi ln readyState thay
i, hm onreadystatechange s c thi hnh.
y l nhng gi tr hp l cho thuc tnh readyState:
Trng thi M t
0 Yu cu khng c khi ng
1 Yu cu c ci t
2 Yu cu c gi
3 Yu cu ang c x l
4 Yu cu hon tt
Chng ta s thm mt lnh If vo hm onreadystatechange kim tra phn hi ca chng
ta hon tt hay cha (c ngha l chng ta c th nhn d liu ca chng ta):
{
if(xmlHttp.readyState == 4)
{
// Ly d liu t phn hi ca my ch
}
}
Thuc tnh responseText
D liu c gi tr v t my ch c th c tip nhn vi thuc tnh responseText.
Trong on m, chng ta s t gi tr ca trng vn bn "time" bng vi responseText:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}

Phn k tip trnh by cch yu cu my ch mt vi d liu!
AJAX - Yu cu my ch
AJAX - Gi yu cu n my ch
gi ngm mt yu cu n my ch, chng ta s dng phng thc open() v send().
Phng thc open() nhn ba tham s. Tham s u tin nh ngha cch thc no c s
dng khi gi yu cu (GET hoc POST). Tham s th hai ch ra ng dn ca tp tin m
kch bn pha my ch. Tham s th ba ch ra yu cu c thc hin bt i xng hay
khng. Phng thc send() gi ngm yu cu n my ch. Nu chng ta gi s rng tp
tin HTML v ASP cng th mc, on m nh sau:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
By gi chng ta phi quyt nh khi no hm AJAX c thi hnh. Chng ta s hm
ny chy "bn di mn hnh" khi ngi dng g vi ch trong trng vn bn username:
Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
</form>
Gi y tp tin cp nht sn sng cho AJAX "testAjax.htm" nh sau:
<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
}
catch (e)
{
try
{
}
catch (e)
{
try
{
}
catch (e)
{
return false;
}
}
}

{
if(xmlHttp.readyState == 4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>

Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
</form>

</body>
</html>
Phn k tip hon tt ng dng AJAX ca chng ta vi tp tin m kch bn "time.asp".
AJAX - M kch bn pha my ch
AJAX - M kch bn ASP pha my ch
Gi y chng ta s to m kch bn hin th thi gian hin hnh ca my ch.
Thuc tnh responseText ( gii thch trc y) s lu gi d liu c tr v t my
ch. y chng ta mun gi tr li thi gian hin hnh. on m trong "time.asp" nh
sau:
<%
response.expires = -1
response.write(time)
%>
Ch : Thuc tnh Expires t thi lng (theo pht) m trang s c lu vng nh tm
trn trnh duyt trc khi n qu hn. Nu ngi dng tr li cng trang trc khi n qu
hn, phin bn c lu trong vng nh tm s c hin th. Response.Expires = -1 xc
nh trang s khng bao gi c lu tm.
Chy ng dng AJAX ca bn
Th ng dng AJAX ny bng cch g vi ch vo trong hp vn bn Name bn di, sau
nhp chut vo bn trong hp vn bn Time:

Name: Time:
Hp vn bn Time nhn thi gian ca my ch t tp tin "time.asp" m khng cn np li
trang!
V d AJAX Suggest
Chng ta va thy AJAX c s dng to ra cc ng dng tng tc mnh hn.
V d AJAX Suggest
Trong v d AJAX di y s minh ha cch mt trang web c th giao tip vi my ch
web trc tuyn ngay ngi dng nhp d liu vo trong biu mu HTML.
G mt tn vo trong hp di y
First Name:
Suggestions:
Gii thch v d - Biu mu HTML
Biu mu trn c m HTML nh sau:
<form>
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>
Nh bn thy n ch l mt biu mu HTML n gin vi mt trng nhp c gi l
"txt1".
Thuc tnh s kin ca trng ny nh ngha hm c by bi s kin onkeyup.
on bn di biu mu cha mt vng c gi l "txtHint". Vng ny c s dng nh
mt ni cha d liu c nhn v t my ch web.
Khi ngi dng nhp d liu, mt hm gi l "showHint()" c thi hnh. Vic thi hnh
ny c by bi s kin "onkeyup". Ni cch khc: Mi ln ngi dng di cc ngn tay
ra khi phm bn trong trng nhp, hm showHint c gi.
Gii thch v d - Hm showHint()
Hm showHint() l mt hm JavaScript rt n gin c t trong khu vc <head> ca
trang HTML.
Hm ny cha on m nh sau:
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url = "gethint.asp";
url = url + "?q=" + str;
url = url + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
Hm ny thi hnh mi khi mt ch c nhp vo trng nhp.
Nu c vi ch trong trng nhp (str.length > 0) hm ny thc hin nhng vic sau:
nh ngha url (tn tp tin) gi n my ch
Thm mt tham s (q) n url vi ni dung ca trng nhp
Thm mt s ngu nhin trnh my ch s dng tp tin m
To mt i tng XMLHTTP, v bo i tng thc hin hm gi l stateChanged khi
mt thay i c by.
M i tng XMLHTTP vi url cho.
Gi mt yu cu HTTP n my ch
Nu trng nhp rng, hm n gin l xa ni dung ca ni cha txtHint.
Gii thch v d - Hm GetXmlHttpObject()
V d trn gi hm GetXmlHttpObject().
Mc ch ca hm ny gii quyt vic to cc i tng XMLHTTP khc nhau cho cc
trnh duyt khc nhau.
Hm ny c kit k nh sau:
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
}
catch (e)
{
try
{
}
catch (e)
{
}
}
return xmlHttp;
}

Gii thch v d - Hm stateChanged()
Hm stateChanged() cha on m sau y:
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
Hm stateChanged() thc hin mi khi trng thi ca i tng XMLHTTP thay i.
Khi trng thi i thnh 4 ("hon tt"), ni dung ca ni cha txtHint c in vi vn
bn phn hi.
M ngun ca AJAX Suggest
M ngun ca v d AJAX Suggest
M ngun di y i theo v d AJAX trong trang trc.
Bn c th chp v dn n, v t th n.
Trang HTML AJAX
y l trang HTML. N cha mt biu mu HTML n gin v mt lin kt n mt
JavaScript.
<html>
<head>
<script src="/clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
M JavaScript c lit k bn di.
M AJAX JavaScript
y l m JavaScript, lu tr trong tp tin "clienthint.js":
var xmlHttp

function showHint(str)
{
if (str.length == 0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
return;
}
var url = "gethint.asp";
xmlHttp.send(null);
}

{
if (xmlHttp.readyState == 4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

{
var xmlHttp = null;
try
{
}
catch (e)
{
try
{
}
catch (e)
{
}
}
return xmlHttp;
}
Trang my ch AJAX - ASP v PHP
Khng c g nhiu v mt my ch AJAX. Nhng trang AJAX c th c lu tr bi bt
k my ch Internet no.
Trang my ch c gi bi JavaScript trong v d t chng trc l mt tp tin ASP n
gin gi l "gethint.asp".
Di y chng ta lit k hai v d ca m trang pha my ch, mt c vit trong ASP v
mt c vit trong PHP.
V d ASP v AJAX
on m trong trang "gethint.asp" c vit trong VBScript cho Internet Information
Server (IIS). N ch kim tra mt mng ca cc tn v tr v nhng tn tng ng n my
khch:
<%
dim a(30)
'in d liu cho mng vi nhng ci tn
a(1) = "Anna"
a(2) = "Brittany"
a(3) = "Cinderella"
a(4) = "Diana"
a(5) = "Eva"
a(6) = "Fiona"
a(7) = "Gunda"
a(8) = "Hege"
a(9) = "Inga"
a(10) = "Johanna"
a(11) = "Kitty"
a(12) = "Linda"
a(13) = "Nina"
a(14) = "Ophelia"
a(15) = "Petunia"
a(16) = "Amanda"
a(17) = "Raquel"
a(18) = "Cindy"
a(19) = "Doris"
a(20) = "Eve"
a(21) = "Evita"
a(22) = "Sunniva"
a(23) = "Tove"
a(24) = "Unni"
a(25) = "Violet"
a(26) = "Liza"
a(27) = "Elizabeth"
a(28) = "Ellen"
a(29) = "Wenche"
a(30) = "Vicky"

'ly tham s q t URL
q = ucase(request.querystring("q"))

'tra tt c gi t mng nu di ca q > 0
if len(q) > 0 then
hint = ""
for i=1 to 30
if q = ucase(mid(a(i),1,len(q))) then
if hint = "" then
hint = a(i)
else
hint = hint & " , " & a(i)
end if
end if
next
end if

'xut "no suggestion" nu khng tm thy gi no hoc xut nhng gi
tr ng
if hint = "" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
V d PHP v AJAX
on m sau y c vit trong PHP.
Ch : chy ton b v d trong PHP, nh i gi tr ca bin ng dn trong
"clienthint.js" t "gethint.asp" thnh "gethint.php".
V d PHP
<?php
header("Cache-Control: no-cache, must-revalidate");

// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// Fill up array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

//ly tham s q t URL
$q = $_GET["q"];

//tra tt c gi t mng nu di ca q > 0
if (strlen($q) > 0)
{
$hint = "";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q) == strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint == "")
{
$hint = $a[$i];
}
else
{
$hint = $hint . " , " . $a[$i];
}
}
}
}

// xut ra "no suggestion" nu khng tm thy gi hoc gi tr ng
if ($hint == "")
{
$response = "no suggestion";
}
else
{
$response = $hint;
}

//xut phn hi
echo $response;
?>
AJAX Database Example
AJAX c th c s dng cho giao tip vi c s d liu.
V d C s d liu AJAX Database
Trong v d AJAX bn di chng ta s minh ha cch mt trang web c th ly thng tin
t mt c s d liu bng cng ngh AJAX.
Chn mt tn trong hp bn di
Select a Customer:
Alfreds Futterkiste

Customer info will be listed here.
Gii thch v d AJAX
V d trn cha mt biu mu HTML n gin v mt lin kt n JavaScript:
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>
</html>
Nh bn thy n ch l mt biu mu HTML n gin vi mt hp danh sch x xung gi
l "customers".
on bn di biu mu cha mt vng gi l "txtHint". Vng ny c dng lm ni
cha thng tin nhn v t my ch web.
Khi ngi dng chn d liu, hm "showCustomer()" c thi hnh. Vic thi hnh ca
hm ny c by bi s kin "onchange". Ni cch khc: Mi khi ngi dng thay i gi
tr trong hp x xung, hm showCustomer c gi.
M JavaScript AJAX
y l m JavaScript cha trong tp tin "selectcustomer.js":
var xmlHttp

function showCustomer(str)
{
if (xmlHttp==null)
{
return;
}
var url = "getcustomer.asp";
url = url+ "?q=" + str;
xmlHttp.send(null);
}

{
{
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}

{
var xmlHttp = null;
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
try
{
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Trang my ch AJAX
Trang my ch c gi bi JavaScript, l mt tp tin ASP n gin gi l
"getcustomer.asp".
Trang ny c vit trong VBScript cho Internet Information Server (IIS). N cng c
vit d dng trong PHP, hoc mt vi ngn ng khc.
M ny chy mt SQL n c s d liu v tr v kt qu nh mt bng biu HTML:
<%
sql = "SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql = sql & "'" & request.querystring("q") & "'"

set conn = Server.CreateObject("ADODB.Connection")
conn.Provider = "Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop

response.write("</table>")
%>
V d AJAX XML
AJAX c th c dng giao tip vi tp tin XML.
V d AJAX XML
Trong v d AJAX bn di chng ta s minh ha cch mt trang web c th ly thng tin
t mt tp tin XML bng cng ngh AJAX.
Chn mt CD trong hp bn di
Select a CD:
Dolly Parton

CD info will be listed here.
Gii thch v d
V d trn cha mt biu mu HTML n gin v mt lin kt n JavaScript:
<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
Bn thy n ch l mt biu mu HTML n gin v mt hp x xung gi l "cds".
on vn bn bn di biu mu cha mt vng gi l "txtHint". Vng ny c dng lu
tr thng tin tip nhn t my ch..
Khi ngi dng chn d liu, hm "showCD" c thi hnh. Vic thi hnh ca hm ny
c by bi s kin "onchange". Ni cch khc: Mi khi ngi dng thay i gi tr trong
hp x xung, hm showCD c gi.
M JavaScript AJAX
y l m JavaScript cha trong tp tin "selectcd.js":
var xmlHttp
function showCD(str)
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
return;
}
var url = "getcd.asp";
xmlHttp.send(null);
}

{
{
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}

{
var xmlHttp = null;
try
{
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
}
}
return xmlHttp;
}
Trang my ch AJAX
Trang my ch c gi bi JavaScript, l mt tp tin ASP n gin gi l "getcd.asp".
M ny chy mt truy vn n tp XML v tr v kt qu dng HTML:
<%
q=request.querystring("q")

set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = "false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes = xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%>
V d v hi p XML AJAX
Trong khi responseText tr v phn hi HTTP nh mt chui, responseXML tr v phn
hi nh mt XML.
Thuc tnh ResponseXML tr v mt i tng ti liu XML, n c th c nhn din v
tch bng cch dng cc phng thc v thuc tnh ca cu trc cy W3C DOM.
V d hi p AJAX ResponseXML
Trong v d AJAX sau y chng ta s minh ha cch mt trang c th ly thng tin t mt
c s d liu bng cng ngh AJAX. Nhng d liu c chn t c s d liu ln ny s
c chuyn i thnh mt ti liu XML, v sau chng ta s s dng DOM kt xut
nhng gi tr hin th.
Chn tn trong hp di y
Select a Customer:

Gii thch v d AJAX
V d trn cha mt biu mu HTML, cc phn t <span> lu gi cc d liu tr v, v
mt lin kt n JavaScript:
<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action="">
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>
</body>
</html>
V d trn cha mt biu mu HTML v mt hp x xung gi l "customers".
Khi ngi dng chn mt khch hnh trong hp x xung, hm "showCustomer()" c
thi hnh. Vic thi hnh ca hm ny c by bi s kin "onchange". Ni cch khc: Mi
khi ngi dng thay i gi tr trong hp x xung, hm showCustomer() c gi.
M AJAX JavaScript
y l m JavaScript lu tr trong tp tin "selectcustomer_xml.js":
var xmlHttp
function showCustomer(str)
{
if (xmlHttp==null)
{
return;
}
var url = "getcustomer_xml.asp";
xmlHttp.send(null);
}

{
if (xmlHttp.readyState==4)
{
var xmlDoc = xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}

{
var xmlHttp=null;
try
{
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
}
}
return xmlHttp;
}
Cc hm showCustomer() v GetXmlHttpObject() trn ging nh cc phn trc. Hm
stateChanged() cng c cp trc y, tuy nhin; ln ny chng ta tr v kt qu l
ti liu XML (vi responseXML) v s dng DOM kt xut cc gi tr hin th.
Trang my ch AJAX
Trang my ch c gi bi JavaScript, l mt tp tin ASP n gin gi l
"getcustomer_xml.asp".
M ny chy mt truy vn SQL n c s d liu v tr v kt qu l mt ti liu XML:
<%
response.contenttype = "text/xml"
sql = "SELECT * FROM CUSTOMERS "
sql = sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"

on error resume next
set conn = Server.CreateObject("ADODB.Connection")
conn.Provider = "Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
if err <> 0 then
response.write(err.description)
set rs = nothing
set conn = nothing
else
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<company>")
response.write("<compname>" &rs.fields("companyname")& "</compname>")
response.write("<contname>" &rs.fields("contactname")& "</contname>")
response.write("<address>" &rs.fields("address")& "</address>")
response.write("<city>" &rs.fields("city")& "</city>")
response.write("<country>" &rs.fields("country")& "</country>")
response.write("</company>")
end if
on error goto 0
%>
dng th hai trong m ASP trn: response.contenttype="text/xml". Thuc tnh
ContentType t kiu ni dung HTTP cho i tng hi p. Gi tr mc nh cho thuc
tnh ny l "text/html". Ln ny chng ta mun kiu ni dung l XML.
Sau khi chn d liu t c s d liu, chng ta xy dng mt ti liu XML vi d liu nhn
c.

Tai Lieu Huong Dan AJAX

Uploaded by

Document Information

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

Tai Lieu Huong Dan AJAX

Uploaded by

Copyright:

Available Formats

www.w3schools.

com Ngi dch: Hunh Dip Tn

You might also like