Ajax

AJAX
NI DUNG
Ajax l g?
u im ca cng ngh Ajax
Cc ng dng Ajax
Cc cng ngh trong Ajax
Cch s dng Ajax
Hn ch
Tng lai
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
AJAX L G?
AJAX vit tt cho Asynchronous JavaScript And XML

AJAX l tp hp ca nhiu cng ngh vi th mnh ca
ring mnh to thnh mt sc mnh mi.
AJAX L G?
AJAX, vit tt cho "Asynchronous JavaScript and XML.
AJAX l tp hp ca nhiu cng ngh vi th mnh ca
ring mnh to thnh mt sc mnh mi. AJAX bao gm:
Th hin web theo tiu chun XHTML v CSS, cc chun
ca W3C, c Firefox (Mozilla), Safari (Apple), Opera,
Netscape 8.0 (nhn Firefox) h tr rt tt.
Nng cao tnh nng ng v phn hi bng DOM
(Document Object Model) - mt chun ca W3C
Trao i v x l d liu bng XML v XSLT - mt chun
ca W3C
Truy cp d liu theo kiu bt ng b (asynchronous)
bng XMLHttpRequest
V tt c cc cng ngh trn c lin kt li vi nhau 5
bng JavaScript.EBML.
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
WEB TRUYN THNG VS. AJAX
M HNH WEB TRUYN THNG
M HNH WEB TRUYN THNG

Client
gi request n server thng qua
POST/GET method
Ch
i response t server
Server
s tr v 1 trang mi cho trnh duyt
mi ln ngi dng submit d liu n server

Trnh
duyt reload li ton b trang web
Trang web chm v km thn thin vi ngi

dng
AJAX
10
AJAX
Tng tc t nhin
Khng cn click
chut
Di chuyn chut cng l mt s kin tng tc
G b c ch click, wait, and refresh

Ch c nhng
thng tin c yu cu update mi c

gi v v hin th li Gim ti server v nhanh
Mn hnh giao tip khng b ngt, gip ngi dng tip
tc tng tc c trn mn hnh
Data-driven
Giao din vn c diu khin bn pha Client trong
khi server x l yu cu
11
AJAX
S
d ng ph ng th c giao ti p b t
ng b :
Lm
cho cc ng dng web nh hn, nhanh hn v
thn thin vi ngi dng hn

Ngi
dng tip tc thc hin cc chc nng khc
trong khi client gi yu cu ln server.

Ajax
hot ng c lp trnh duyt v h
iu hnh
12
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
13
CC NG DNG CA AJAX
Kim tra trng lp

Tn ng nhp phi khng b trng l p vi b t k ai trong
CSDL
Thng thng, nhp ht thng tin v g i ln my ch ki m
tra, cn Ajax kim tra ngay sau khi ngi dng v a m i ch n
xong tn
Tnh nng "Auto save"

Bt chc cc phn mm son tho t ng lu nhng g
ngi dng g sau mt khon thi gian nh t nh
Vi Gmail, bn c th s dng tnh nng ny b ng cch t i v
trnh b sung
Dch trc tuyn

Ajax to ra tnh nng cho php ng i dng ch c n ch n
mt t trn trang web ca bn v hin th t tng ng ca
cc ngn ng khc
14
CC NG DNG CA AJAX
Cc trang bn hng trc tuyn

Cp
nht theo thi gian thc danh sch nhng g ngi

mua chn v gi c m khng cn phi ti li trang web
Refreshing data
H thng nh gi cc trang web nhc s

Ngi
dng nhn mt nt nh gi v ngay lp tc n

s c cp nht vo h thng
15
V D: GOOGLE EARTH
16
V D: GOOGLE EARTH
C th co gin, ko bn mt cch t nhin
D liu c load mt cch t nhin vng xung
quang bn hin ti.
Thc t
D
liu ca bn c yu cu v nhn response

ngm bn di
Cc phn khc gi nguyn
Khng lm mt mn hnh giao tip
17
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
18
CNG NGH TRONG AJAX
Javascript
JavaScript l mt ngn ng lp trnh a nng
Hm JavaScript c gi khi c mt s kin xy ra
Gn kt cc thnh phn khc ca AJAX.
DOM
Cc API truy cp v thao tc trn cc ti liu c cu trc
S dng trong ti liu XML v HTML
CSS
Cho php thay i cc th hin ca cc th HTML, s
thay i ny nh vo cc hm JavaScript thc hin.
XMLHttpRequest
L mt i tng JavaScript dng kt ni bt ng
b vi server. L i tng trng tm ca AJAX
19
JAVASCRIPT
JavaScript
l ngn ng di dng Script co th gn vi cc

file HTML b sung tnh tng tc ca Web. No khng
uc bin dich m c trnh duyt din dich. JavaScipt l
ngn ng da trn i tng nhng no khng phi l ngn
ng hng i tng do khng h tr cc lp hay tnh tha
k.
Nhung JavaScript vo HTML:

<html>
<body>
<script language=JavaScript>
//JavaSript code
</Script>
</body>
</html>
20
JAVASCRIPT
Cc
gii hn ca JavaSript
JavaScript
khng th giao tip vi my ch: 2 cng vic ch

yu ca my ch m JS khng th thc hin c l vic tp
hp thng tin t ngi dng v giao tip vi cc my khc, ta
cung khng th gi mail vi JS v mun gi mail th phi giao
tip vi my ch v tt nhin JS th... bo tay
JavaScript khng th to cc hnh nh hoa: 1 trong cc gii
hn ca JS l no ko th to cc hnh nh hoa ca ring no
m chi lm vic vi cc hnh nh co sn theo nhiu cch.
JavaScript khng an ton, y l 1 trong nhng im yu
cc hacker tn dng.
21
JAVASCRIPT
<html>
<head>
<title>V d JavaScript</title>
<script language=JavaScript>
alert(Hello! Welcome to JavaScript);
</script>
</head>
<body>
</body>
</html>
22
DOM
Trnh duyt h tr m hnh i tng ti liu

Document
Object Model (DOM)

N ging nh mt i tng ti liu JavaScript
L mt giao din lp trnh ng dng (API) cho

php thc hin cc hm Javascript thay i trn
DOM
Thng thng DOM c dng mt cy cu trc d
liu v c dng truy xut cc ti liu HTML
v XML. M hnh DOM hot ng c lp vi h
iu hnh v da theo k thut lp trnh hng i
tng m t ti liu.
23
V D DOM
window.onload=function()
{
var hello=document.getElementById('hello');
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty,"Ajax in Action!");
var children=empty.childNodes;
for (var i=0;i<children.length;i++)
children[i].className='programmed';
}
24
CSS
Cascading Style Sheets cung cp mt s nht qun
trn cm quan look and feel cho ng dng v kh
nng thao tc mnh m vi DOM. i tng
XMLHttpRequest (hay mt c ch tng ng no
o) c dng lin lc mt cch bt ng b vi
server, m bo vic gi yu cu ngi dng v ti
np d liu trong khi ngi dng vn lm vic.
Vi cc thnh phn inh dng trc quan nh mu
sc, l, hnh nn, tnh trong sut, kch c, stylesheet
co th xc inh cch m cc phn t c b tr
quan h vi cc phn t khc v tng tc vi ngi
dng, cho php cc hiu ng kh mnh m.
25
CC U IM CA CSS
CSS giup tit kim c rt nhiu thi gian v cng

sc cho vic thit k web. Style trong phin bn
HTML 4.0 qui inh cch thc th hin cc th. Style
thng c lu trong cc file nm ngoi trang web.
Chung giup thay i cch thc inh dng v cch b
tr cc trang web chi bng cch thay i ring file
CSS.
CSS cho php iu khin cch inh dng v cch b
tr ca cng luc nhiu trang web vi chi duy nht mt
ln thay i ti mt vi tr.
Co th inh ngha nhiu style vo mt th HTML
.CSS cho php a cc thng tin inh ngha th thng
qua nhiu con ng khc nhau. Style co th c qui
inh trong chi mt th HTML, c qui inh trong
mt trang web hoc trong mt file CSS bn ngoi.
26
CC U IM CA CSS
Th t p dng cc inh dng:

Co th s dng nhiu cch khc nhau lm CSS.
iu g s xy ra nu p dng nhiu cch inh dng
cho mt th HTML? Theo mt cch chung nht ra co
th noi cc style s c "xp tng" (cascade). Vic xp
tng ny tun theo th t u tin gim dn nh sau:
Inline Style (Style c qui inh trong mt th HTML c th)
Internal Style (Style c qui inh trong phn <HEAD>

ca mt trang HTML)
External Style (style c qui inh trong file CSS ngoi)
Browser Default (thit lp mc inh ca trnh duyt)
27
XMLHTTPREQUEST METHODS
open(HTTP method, URL, syn/asyn)

Phng thc ny thit lp mt phin g i t i server
send(content)
Phng thc ny thc hin gi request ti server.
abort()
Hy request hin thi.
getAllResponseHeaders()
Tr v tt c cc response header cho HTTP request d i
dng cp key/value.
getResponseHeader(header)
Tr v gi tr kiu string ca header xc nh.
setRequestHeader(label,value)
Thit lp header xc nh cho gi tr cung cp. open() ph i
c gi trc khi c gng thit lp bt k mt header no.
28
XMLHTTPREQUEST PROPERTIES
onreadystatechange
B x l s kin cho
mt s kin pht sinh mi khi c

s thay i trng thi
readyState Trng thi ca request

0=
uninitialized
1 = loading
2 = loaded
3 = interactive (some data has been returned)
4 = complete
status
M trng thi
HTTP t server (chng hn 200 nu

khng c li, 404 cho li Not Found, ).
29
XMLHTTPREQUEST PROPERTIES
responseText
Response
tr v t server di dng string.
responseXML
tr v t server di dng XML. i tng
ny c th c phn tch v kho st nh mt i
tng ti liu DOM.
Response
statusText
ip ca m trng thi HTTP (chng hn OK
hay Not Found, ).
Thng
30
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
31
M HNH HOT NG CA AJAX
32
CC BC THC HIN
Mt s kin c gi thc hin Client
2. XMLHttpRequest object c to ra
3. XMLHttpRequest object c nh dng
4. XMLHttpRequest object gi yu cu bt
ng b
5. Server gi tr v kt qu cha bn trong
ti liu XML
6. XMLHttpRequest object gi hm
callback() v x l kt qu
7. HTML DOM c cp nht
1.
33
CLIENT
JavaScript c gi thc hin kt qu
cho s kin trn
V d: Hm validateUserId() c gi trong
s kin onkeyup ca form userid
Hm
<input
type="text size="20 id="userid

name="id onkeyup="validateUserId();">
34
XMLHTTPREQUEST OBJECT
var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest(); }
else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
35
XMLHTTPREQUEST OBJECT C
NG K VI MT HM CALLBACK
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP"); }
}
initRequest();
req.onreadystatechange = processRequest; // callback function
req.send(null);
}
36
GI YU CU BT NG B
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");}
}
initRequest();
req.onreadystatechange = processRequest;
req.send(null); }
URL is set to validate?id=greg
37
SERVER TR KT QU XML
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException,
ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) &&!
accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>"); }
else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>"); }
38
GI HM CALLBACK() V X L
KT QU
XMLHttpRequest object c ng k gi hm
processRequest() khi c thay i thuc tnh
readyState ca XMLHttpRequest object
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
39
CP NHT HTML DOM

JavaScript ly cc tham chiu ti cc element trong
trang web vi DOM API
Gi n element c tn :
document.getElementById("userIdMessage"), hm ny
tr v ID ca "userIdMessage"
JavaScript c dng hiu chnh cc thuc tnh
element; hiu chnh cc property ca element; hoc
thm, xa, hiu chnh element con.
40
CP NHT HTML DOM
<script type="text/javascript">
function setMessageUsingDOM(message) {
var userMessageElement =
document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody =
document.createTextNode(messageText)
41
CP NHT HTML DOM
// if the messageBody element has been created simple

replace it otherwise
// append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody); }
</script>
<body>
<div id="userIdMessage"></div>
</body>
42
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
43
CC HN CH CA AJAX
Phc tp
S lin kt gia server
v client x l khng bng

vic x l hon ton trn server
Phi c k nng v javascript
ng dng AJAX kh debug, test v qun l

JavaScript kh test
JavaScript hng n th yu
Thiu mu
Design Partern cng nh guideline
Toolkits/Frameworks cha hon thin

a s
ang bn Beta
44
CC HN CH CA AJAX
Cha c chun XMLHttpRequest
Khng h tr XMLHttpRequest cc trnh duyt

c
Dng Iframe thay th
Ph thuc vo JavaScript v kh qun l
S nhanh chng c ng nht
Mt vi trnh duyt nhn dng sai
Code JavaScript d hack
Vic hack cc trang web thng qua cc on script ang

l xu hng ca cc hacker th k 21.
45
NI DUNG
Ajax l g?
Cc ng dng Ajax
Cch s dng Ajax
Hn ch
Tng lai
46
TNG LAI
AJAX
AJAX-enabled
JSF Component libraries

Chun ha XMLHttpRequest
Tnh tng thch trnh duyt tt hn
Pht trin cc Framework mnh hn
47
Cm n s quan tm theo di ca thy

v cc bn
48

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

Ajax

Uploaded by

Copyright:

Available Formats

AJAX

AJAX vit tt cho Asynchronous JavaScript And XML

WEB TRUYN THNG VS. AJAX

M HNH WEB TRUYN THNG

M HNH WEB TRUYN THNG

gi request n server thng qua

s tr v 1 trang mi cho trnh duyt

mi ln ngi dng submit d liu n server

duyt reload li ton b trang web

Trang web chm v km thn thin vi ngi

G b c ch click, wait, and refresh

thng tin c yu cu update mi c

cho cc ng dng web nh hn, nhanh hn v

thn thin vi ngi dng hn

dng tip tc thc hin cc chc nng khc

trong khi client gi yu cu ln server.

hot ng c lp trnh duyt v h

Kim tra trng lp

Tnh nng "Auto save"

Dch trc tuyn

Cc trang bn hng trc tuyn

nht theo thi gian thc danh sch nhng g ngi

H thng nh gi cc trang web nhc s

dng nhn mt nt nh gi v ngay lp tc n

liu ca bn c yu cu v nhn response

CNG NGH TRONG AJAX

l ngn ng di dng Script co th gn vi cc

Nhung JavaScript vo HTML:

khng th giao tip vi my ch: 2 cng vic ch

Trnh duyt h tr m hnh i tng ti liu

Object Model (DOM)

L mt giao din lp trnh ng dng (API) cho

CSS giup tit kim c rt nhiu thi gian v cng

Th t p dng cc inh dng:

Inline Style (Style c qui inh trong mt th HTML c th)

Internal Style (Style c qui inh trong phn <HEAD>

open(HTTP method, URL, syn/asyn)

mt s kin pht sinh mi khi c

readyState Trng thi ca request

HTTP t server (chng hn 200 nu

tr v t server di dng string.

M HNH HOT NG CA AJAX

type="text size="20 id="userid

var url = "validate?id=" + escape(target.value);

req.open("GET", url, true);

CP NHT HTML DOM

CP NHT HTML DOM

CP NHT HTML DOM

// if the messageBody element has been created simple

// append the new element

v client x l khng bng

ng dng AJAX kh debug, test v qun l

Design Partern cng nh guideline

Toolkits/Frameworks cha hon thin

Cha c chun XMLHttpRequest

Khng h tr XMLHttpRequest cc trnh duyt

Dng Iframe thay th

Ph thuc vo JavaScript v kh qun l

S nhanh chng c ng nht

Mt vi trnh duyt nhn dng sai

Code JavaScript d hack

Vic hack cc trang web thng qua cc on script ang

JSF Component libraries

Cm n s quan tm theo di ca thy