Está en la página 1de 31

NHM ATD:

1. Nguyn Tun Anh 1051020002


2. Nguyn Trung Thnh
1051020032
3. Tng c Thnh 1051020034
4. Hong Dng - 1051020063
Gii thiu v AJAX
Lch s
Thut ng AJAX xut hin u tin vo ngy
18/2/2005 trong mt bi bo c tn AJAX : A New
Approach to Web Applications

ca tc gi Jesse
James Garrett, cng ty AdapativePath. ng nh ngha
v tm gn li t cm t Asynchronous JavaScript +
CSS + DOM + XMLHttpRequest. Ngay sau thut
ng AJAX c ph bin cc k nhanh chng trong
cng ng pht trin Web v cho n nay n l mt
trong nhng t kha c tm kim nhiu nht trn
Internet.

nh ngha
AJAX khng phi l mt cng ngh. N l tp hp ca nhiu cng
ngh vi th mnh ca ring mnh to thnh mt sc mnh mi.
AJAX bao gm:
Trnh by trang web da trn XHTML v CSS, cc chun ca
W3C, c Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0
(nhn Firefox) h tr rt tt
Biu din ng v tng tc s dng Document Object Model,
chun ca W3C
Trao i v x l d liu dng XML v XSLT, chun ca W3C
Thu hi d liu bt i xng dng XMLHttpRequest
Dng JavaScript lin kt mi th li vi nhau. JavaScript
y l ECMAScript, chun ca ECMA, khng phi l JScript ca
Microsoft.

Gii thiu v AJAX
C ch hot ng ca AJAX
Hnh 1: C ch hot ng ca AJAX
i vi web truyn thng: Qui trnh c
m t l nhp-ch v ti li (click-wait-and-
refresh)
C ch hot ng ca AJAX
Hnh 2: M hnh web truyn thng
i vi web s dng Ajax: Ni dung tng
ng vi tng hnh ng ca ngi dng
s gn nh ngay lp tc c hin th vo
v tr cn thit (p ng gn nh tc thi)
trong khi trang Web khng cn phi refresh
li ton b ni dng
C ch hot ng ca AJAX
Hnh 3: M hinh web s dng ajax
u im ca AJAX
Truy cp bt ng b
a dng trong tng tc
C th to cc ng dng phc tp
Gim ti cho server
Tc response nhanh hn
Ngi dng tip tc lm cc thao tc khi i
L cng ngh ca Brower, c lp vi Web Server

Nhc im ca ajax
Ngi dng khng th lu li a ch web vo Bookmark xem li v
sau.
Cc trang web c to ng khng c ghi vo b lu lch s lt
web ca trnh duyt
Do hu ht cc web crawler khng thc thi m JavaScript, cc ng
dng web s cung cp mt phng thc thay th truy cp ni dung
thng thng c truy cp bng Ajax, cho php cc my tm kim lp
ch mc chng.
Bt k ngi dng no c trnh duyt khng h tr Ajax hay
JavaScript, hoc n gin l b v hiu ha JavaScript, s ng nhin
khng th s dng Ajax.
Ch same origin policy (ch gc n iu) c th khng cho
php s dng Ajax thng qua cc tn min,[6] mc d W3C c mt
n s tho cho php iu ny.
Vic thiu cc chun c bn ca Ajax ng ngha vi vic khng c
nhiu s chn la thc tin tt nht kim tra cc ng dng Ajax.
M ra mt cch thc khc cho vic tn cng ca cc on m c m
nhng nh pht trin web c th khng kim th ht c.

Mt s ng dng Ajax ph bin
Apple Safari t 1.2 tr ln
Konqueror
Microsoft Internet Explorer t 4.0 tr ln
Mozilla/Mozilla Firefox t 1.0 tr ln
Netscape t 7.1 tr ln
Opera t 8.0 tr ln
GreenBrowser 4.3
Google Chrome tt c cc phin bn.

Cc website s dng ajax:
Flickr https://www.flickr.com
Google Maps https://www.google.com/maps
Windows Live https://login.live.com
...
Mt s website Vit Nam
Diadanh.net http://diadanh.net
Phpbasic.com http://www.phpbasic.com
...

Trnh duyt h tr AJAX
Thnh phn ca AJAX
Th hin Web theo tiu chun XHTML v CSS.
Nng cao tnh nng ng v tng tc bng DOM.
Trao i v x l d liu bng XML v XSLT.
Truy cp d liu theo kiu bt ng b (Asynchronous)
bng XMLHttpRequest.
Tt c cc k thut trn c lin kt li vi nhau bng
JavaScript.
Cascading Style Sheet CSS
nh ngha
Mt phn khng th thiu trong thit k Web, n c dng rt
nhiu trong cc ng dng Web truyn thng cng nh trong Ajax. Mt
stylesheet a ra cch kim sot cc loi nh dng trc quan, n c
th c p dng cho cc thnh phn ring l trn cc trang.
u im
CSS gip tit kim c rt nhiu thi gian v cng sc cho vic
thit k web.
CSS cho php iu khin cch nh dng v cch b tr ca cng lc
nhiu trang web vi ch duy nht mt ln thay i ti mt v tr.
C th nh ngha nhiu style vo mt th HTML
p dng cc nh dng theo th t
Document Object Model
DOM (W3C DOM)
nh ngha
L 1 dng chun ca W3C a ra nhm truy xut v
thao tc d liu ca ti liu c cu trc (vd nh: HTML,
XML), v m hnh ny th hin ti liu(document) di
dng cu trc cy phn cp.

DOM cn c phn lm 3 nhnh nh na:
- Core DOM: dng chun thao tc v truy xut ti liu c
cu trc.
- HTML DOM: dng chun thao tc v truy xut ti liu
HTML.
- XML DOM: dng chun thao tc v truy xut ti liu
XML.

XML (eXtensible Markup Language)
nh ngha
L ngn ng nh du vi mc ch chung do W3C
ngh, to ra cc ngn ng nh du khc, c kh nng
m t nhiu loi d liu khc nhau vi mc ch n gin
ha vic chia s d liu gia cc h thng khc nhau.
Cc ngn ng da trn XML
v d:
RDF, RSS, MathML, XHTML, SVG, GML v cXML
XSLT (eXtensible Style
Language Transforming)
nh ngha
XSLT l mt phn ca XSL (eXtensible Style Language). XSL l
mt ngn ng nn tng XML v ra i vi mc ch chuyn i
mt ti liu XML thnh mt ti liu XML khc hay chuyn mt ti
liu XML thnh nhng i tng c th th hin c. Internet
Explorer c tch hp XSL transformer gip t ng chuyn i
ti liu XML thnh ti liu HTML. s dng XSLT, chng ta phi
xy dng ti liu XSL cha nhng template. Trong nhng
template chng ta s kt hp nhng phn t HTML s c xut
ra.

XMLHttpRequest
nh ngha
i tng XMLHttpRequest l tri tim ca lp trnh Ajax
ngha l XMLHttpRequest chnh l i tng c dng
gi request v nhn response.
The XMLHttpRequest object is used to exchange data
with a server behind the scenes.

Cch thc khi to 1 XMLHttpRequest object

xmlhttp=new XMLHttpRequest();

var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new
ActiveXObject(Microsoft.XMLHTTP);
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

XMLHttpRequest
Mt th hin ca
XMLHttpRequest
c to ra
Mt request c
to v gi n
server
Response c
tr v cho trnh
duyt
Gi hm
khi kt qu x l c
tr v
XMLHttpRequest
Mt event
client-side gy
ra mt s kin
Server
x l cc
yu cu
Phn tch cc c tnh
Mt s phng thc in hnh
abort()
getAllResponseHeaders()
getResponseHeader(header)
open(method, url)
send(content)
setRequestHeader(header, value)
Onreadystatechange
readyState
responseText
responseXML
Status
statusText
jQuery $.get() Method
GET khi request khng thay i gi tr, tc l nhiu
request s tr v cng kt qu
S dng GET cho nhng hnh ng an ton
GET request c th lu tr
GET request c th vn cn trong lch trnh duyt
GET request c th phn loi v chia s
GET request c th b hack


$.get(URL,callback);
jQuery $.get() Method
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
demo_test.asp
<%
response.write("This is some text
from an external ASP file.")
%>
jQuery $.post() Method
POST c dng khi mun thay i trng thi
trn server.
S dng POST khi giao dch vi cc yu cu
di - nu bn ang gi mt lng ln d
liu, hoc d liu nhy cm trn HTTPS, bn
s s dng POST. Mt s trnh duyt nh
Internet Explorer t mt gii hn v chui
URL iu ny c th ph v cc hot
ng ca mt s hnh thc nu bn s dng
GET.
$.post(URL,data,callback);


jQuery $.post() Method
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city &
".")
%>
Cc bc c bn gi request dng
i tng XMLHttpRequest l
1. Dng mt tham chiu ti mt th hin ca
XMLHttpRequest, c th bng cch to mi
hay truy cp vo mt bin c th hin ca
XMLHttpRequest.
2. Khai bo cho i tng XMLHttpRequest v
hm s x l cc trng thi ca
XMLHttpRequest.
3. Gn cc thuc tnh ca request.
4. Gi request ti server.
JavaScript l mt ngn ng lp trnh a nng,
n tng i ging C. JavaScript c bit
di dng mt ngn ng c kiu t do, thng
dch, ngn ng kch bn a nng.
Java Script
Demo ng dng
bn chn mt tnh hoc thnh ph bt k s hin ra
qunhuyn tng ng ca thnh ph v d chn
tphcm qunhuyn 1 2 4 3
cho php ngi dng chn mt trang tin
bt k sau khi click vo select-option
chn mnh s khai thc rss trang
hin th tin
Demo ng dng
c lin tc t mt file XML cho trc
Demo ng dng
Load ni dung website
Demo ng dng
Login tng tc vi database
Demo ng dng