Beruflich Dokumente
Kultur Dokumente
MC LC
MC LC CC S ...............................................................................................5
THUT NG V CC CH VIT TT....................................................................7
LI M U ...............................................................................................................8
CHNG I ...................................................................................................................9
CROSS-DOMAIN AJAX V .......................................................................................9
NG DNG XY DNG WEB MASHUP .........................................................9
1.1.
1.1.1
XMLHttpRequest.............................................................................................................. 9
1.1.2
1.1.3
Th <script> ................................................................................................................... 11
1.1.4
AJAX............................................................................................................................... 11
1.2
1.3
1.3.1
1.3.2
1.3.3
1.3.4
CHNG II...............................................................................................................20
CROSS-DOMAIN AJAX v .....................................................................................20
C C GII PHP THC HIN TRONG AJAX...................................................20
2.1 Cross domain proxy .......................................................................................................- 20 2.2 Cross domain JSON .......................................................................................................- 21 2.2.1 JSONRequest.post................................................................................................................. 22
2.2.2 JSONRequest.get................................................................................................................... 23
2.2.3 JSONRequest.cancel.............................................................................................................23
2.2.4 Bo mt..................................................................................................................................24
3
2.3 Cross domain s dng Flash ...........................................................................................- 25 2.4 Subspace..........................................................................................................................- 26 2.4.1 Subdomain............................................................................................................................. 28
2.4.2 n Web Service ................................................................................................................... 28
2.4.3 a Web Service ..................................................................................................................... 29
2.5 Gii php trong th h tip theo ......................................................................................- 31 2.5.1 FlashXMLHttpRequest .........................................................................................................31
2.5.2 ContextAgnosticXMLHttpRequest .......................................................................................31
KT LUN ................................................................................................................42
TI LIU THAM KHO......................................................................................... - 43 -
MC LC CC S
H1.1: XmlHttpRequest vi Ajax .......................................................................................... 9
H1.2: Mashup ni dung t nhiu ngun............................................................................ 12
H1.3: D liu tng tc hin th vi Ajax......................................................................... 12
H1.4: Khc nhau gia ba website ..................................................................................... 13
H1.5: Mashup lm vic ..................................................................................................... 13
H1.6: ng dng cho mashup ............................................................................................ 14
H1.7: ng nhp Google Maps API key........................................................................... 15
H1.8: ng nhp cho ti khon Amazon Associates......................................................... 16
H1.9: ng nhp cho ti khon AWS................................................................................ 16
H1.10: Google Search API .............................................................................................. 17
H1.11: ng nhp cho ti khon Flickr API .................................................................... 18
H1.12: Flickr photos search.............................................................................................. 18
H1.13: ng nhp cho ti khon Flickr API .................................................................... 19
H2.1: Cross-Domain Proxy............................................................................................... 21
H2.2: Hn ch ca cross domain XMLHttpRequest ......................................................... 21
H2.3: Ca cross domain JSON ......................................................................................... 22
H2.4: Hot ng ca JSON............................................................................................... 24
H2.5: Li 2044 ................................................................................................................. 25
H2.6: Gi ra d liu t domain unstrusted 3rd-party n. Bc u tin (tri) chuyn
communication object t top frame ti mediator frame. Bc th hai (right) ch xy ra
sau khi mediator v unstrusted frame thay i document.domain thnh hu t
mashup.com ....................................................................................................................... 29
H2.7: Kt ni a web service. Nu trnh duyt c mt hn ch frame access policy, mt
cu trc khung top-mediator-unstrusted nn c s dng, nhng nu trnh duyt c s
chp nhn frame access policy, cu trc khung top-unstrusted-access cn ..................... 30
H3.1: Mashup v cc ng dng ........................................................................................ 33
H3.2: Google Maps API.................................................................................................... 34
5
THUT NG V CC CH VIT TT
AJAX
API
DOM
HTML
XHTML
JSON
URL
XML
RSS
REST
CSS
XSLT
SOAP
LI M U
Vi nm tr li y, ngy cng nhiu cng ty pht hnh nhng chng
trnh cho php kt hp d liu v dch v trn web ca cc doanh nghip vi
nhau, ng thi cng pht trin hi ha gia bo mt v cc yu cu ca khch
hng. Chng c trn ln (mashup) mt cch thng minh v sng to.
Nhng c mt vn v bo mt c a ra khi bn chuyn d liu
gia cc domain. Vi cc hn ch cross-domain, c xy dng trn hu ht
cc trnh duyt, l mt s kh khn cho mashup. Vic tm hiu s dng web
proxy hoc JSON, ... nng cao cc hiu qu mashup.
Lun vn Cross-domain ajax cho cc ng dng web mashup nhm
mc ch tm hiu v cch thc v phng php thc hin cc li gi cross
domain trong ajax. V trang b kin thc v th vin ajax cross domain, Google
Maps API lp trnh ng dng th nghim cho mashup.
Kha lun c chia lm 3 chng. Chng I l phn gii thiu crossdomain ajax cng mt s vn lin quan, v cc ng dng xy dng web
mashup. Chng II s gii thiu chi tit v cross-domain v cross-domain ajax,
sau em s tm tt nhng gii php ang c thc hin i vi crossdomain trong ajax. Chng III l chng dnh cho vic nghin cu v hot
ng v lp trnh Google Maps (API), l mt c s cho vic xy dng mt
ng dng th nghim cross-domain cho mashup. V cui cng, l phn tng
kt bi kha lun cng v phn ti liu tham kho.
1.1.1 XMLHttpRequest
i tng XMLHttpRequest l trung tm ca nhiu ng dng Ajax. N
cng l i tng xc nh mt API cung cp chc nng cho script pha client
s chuyn i d liu gia client v server. Mc d khng l mt tnh nng cn
thit, n l mt dch v Outlook web-mail cho php mi ngi c th
download email, xem lch, ...
XmlHttpRequest chnh l b quyt ca Ajax
1.1.3 Th <script>
Same-origin khng p dng cho script (mc d n p dng trn cc file
JavaScript), script c th c ti t cc domain khc v thc hin vi c
quyn ca trang cha chng.
Nhng script t xa ny c th c thm vo trang mt cch t ng
theo di nhng ai truy cp vo trang web ca bn, v bn phi chy chng
c hiu lc. Do , n m bo ch cc file JavaScript hp l mi c th truy
cp qua domain, v tt c cc file khc s gy li.
1.1.4 AJAX
Hu nh chng ta u bit ti hay thm ch ang s dng nhiu
Gmail, Google Map, .... hay cc tin ch tin dng ca Flickr. Th hn chng ta
nn bit rng nhng tnh nng v cch thc tng tc vi ngi dng nhanh
chng, tin li nh vy m cc trang web ny cung cp chnh l do AJAX.
AJAX khng phi l mt ngn ng mi, n l s kt hp ca mt lot
cc cng ngh khc nhau:
- XHTML + CSS vi vai tr hin th thng tin.
- M hnh tng tc v hin th ng DOM.
- Trao i v truy cp/tc ng ln thng tin s dng XML v XSLT.
- Nhn thng tin khng ng b vi i tng XMLHttpRequest.
- JavaScript vi vai tr kt hp 4 cng ngh trn li vi nhau.
Vi AJAX, mt file JavaScript c th lin kt trc tip vi server m
khng cn ti li trang web. Cng ngh AJAX to cho ng dng Internet
nh gn hn, nhanh hn v tng tc ngi dng tt hn.
15
16
17
19
22
2.2.4 Bo mt
- JSONRequest c mt vi tnh nng cho php n c min chnh sch Same
Origin.
JSONRequest khng gi hoc nhn cookie hoc password trong HTTP
headers. iu ny trnh trng hp li chng thc.
JSONRequest ch lm vic vi ti liu JSON. Mt request s b li nu
server khng phn hi ti POST vi ti liu JSON.
Phn hi s b t chi tr phi chng cha mt loi ni dung
JSONRequest. iu ny lm cho n khng th s dng JSONRequest
ly d liu t server khng an ton.
JSONRequest c rt t d liu li.
JSONRequest tch ly tr ngu nhin trc khi hnh ng trn cc
request mi khi cc request trc b li. iu ny lm v tc dng tn
cng phn tch thi gian v tn cng t chi dch v. JSONRequest ch
lm mt vic: n trao i d liu gia cc script ti trang web vi JSON
server ti web.
- JSONRequest cho php kt ni, nhng vi mt s hn ch:
Content-type theo c hai hng application/jsonrequest.
D liu thn POST s trong nh dng JSON.
S phn hi d liu s trong nh dng JSON.
K t m ha theo hai hng l UTF-8.
2.2.5 Hot ng ca JSON
H2.5: Li 2044
File crossdomai.xml l mt file XML n gin a cho Flash Player
quyn truy cp d liu t domain khc, n c t ti root ca webserver:
25
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domainpolicy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
2.4 Subspace
Subspace - mt c ch truyn thng a min (cross-domain) cho php
truyn thng mt cch hiu qu qua cc domain m khng mt tnh bo mt
c th cung cp s truyn thng tin cy nh ban u cho web mashup.
S dng JavaScript, nhng tnh nng bo mt khc nhau c p dng
trong nhng data-passing phare khc nhau, trong cc trnh duyt khc nhau:
Cross-subdomain communication.
Cross-domain code Authorization.
Cross-domain frame access.
- Truyn thng cross-subdomain
i vi JavaScript, mt site c nh danh nh l b ba: protocol,
hostname, port, v d:
http://a.example.com
v http://b.example.com
=> site khc
http://www.example.com/a v http://www.example.com/b => cng site
26
Hn ch (Opera)
Kh nng cu hnh, Yes l mc nh (IE6)
Cu hnh nhng b hn ch, No l mc nh (IE7)
2.4.1 Subdomain
Mt vi site mun loi b www ra khi subspace ca mnh, v d
www.mashup.com thnh mashup.com. Khi chy site ti www.mashup.com v
ti mashup.com , c th chng ta coi nh cng mt tn v tht s, chng cng
ch ti mt ni. Nhng gi trong mt Ajax, n xt n domain. Do , nu
bn to mt li gi Ajax ti cng mt server, khng nn t m domain nh
mt thnh phn m nh mt ng dn.
Hn ch ca Subspace: frame c th khi ng mt s tn cng denialof-service trn trnh duyt. V d, mt web service khng ng c th nh
hng trnh duyt xa mashup site, hoc hin th mt chui v tn hp bo
ng, ngn ngi s dng khng s dng c site.
Mt kh nng c th khc l ngun d liu hoc gadget khng tin cy c
th xut hin mt ca s mi yu cu ngi s dng cho nhn quyn ca h.
V , n l quan trng subdomain c t tn v ngi s dng c kh
nng xc nh r rng web service kim sot n
2.4.2 n Web Service
- Ci t Phrase
to mt knh subspace gia hai site, www.mashup.com v
webservice.mashup.com, thc hin vic giao thc ci t ci a ra trang c hai
domain cng truy cp ti i tng subspace javascript.
Giao thc ci t di y (miu t t hnh 2.6) l c hin ch mt ln
khi trang u tin c ti, v khng cn thit khi ng li khi cn d liu
yu cu nhiu hn.
Mediator frame l mt subdomain ca frame chnh v n giao tip d
dng (document.domain); Mt frame khc c to di mediator frame v
gi d liu c gi t unstrusted website. Frame ny giao tip vi mediator
frame nhng khng phi l frame chnh; Mediator frame c th giao tip vi c
hai, unstrusted frame v top frame-frame chnh.
28
29
31
32
33
H3.3: map_api_basic.html
Trong thc hin, chng ta c mt s iu cn lu :
Th script thc hin vic chn Maps API.
Phn t div cha Map.
34
35
36
H3.4: map_api_event.html
- Event Listensers
to thng bo ca s kin khi bn nhn chut, chng ta s dng
Gevent.addListener(). Hm s dng mt i tng, mt s kin lng
nghe ( y l click chut) v mt hm ti khi s kin xy ra.
GEvent.addListener(map,"click", function(overlay,latlng) {
if (latlng) {
var myHtml = "The GLatLng value is: " +
map.fromLatLngToDivPixel(latlng) + "<br>" +
" at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
37
38
H3.5: map_api_overlay.html
- Markers
39
});
- Icons
Mt s lng cc image khc nhau c th to nn mt icon trong Maps
API.
Mt Icons n gin nht da trn kiu G_DEFAULT_ICON. Bn to
mt icon t kiu ny cho php bn thay i nhanh chng icon mc nh ch vi
mt vi thao tc.
- Polylines
GPolyline bao to cc ng trn map. Mt GPolyline bao gm mt
chui cc im v to thnh chui cc on c th lin kt im theo th t,
Ta v c ng trn map:
40
H3.6: map_api_polyline.html
3.2.5 Google Maps API Services
- Geocoding
Geocoding l qu trnh chuyn i a ch vo mt ta a l.
Google Maps API bao gm Geocoding services m c th c truy cp trc
tip qua HTTP Request hoc bng cch s dng mt i tng
GClientGeocoder.
i tng GClientGeocoder
- Geocoding Caches
Chng ta s c kt qu (khi bn chn Tokyo, Japan trn dialog box):
H3.7: map_api_geocoding.html
41
KT LUN
Mashup thc s to nn lp ng dng mi hiu qu v hu ch trong
mi trng ng dng web.
Lun vn gip hiu c tng quan cross-domain v cc gii php
cho cross-domain trong ajax. ng thi, bi lun cng nu c tnh quan
trng v cn thit trong vic tm hng gii quyt i vi cross-domain, phc
v cho mashup mt lp ng dng hu ch trong th gii web. Cng vi vic
nghin cu, kha lun p dng c l thuyt vo xy dng ln mt ng
dng cho mashup vi bn trc tuyn tuy n gin nhng hng ti mc
ch ca ti.
Cha c phng php tht s hiu qu gi cross-domain s dng
ajax, v vy hng pht trin tip theo cho vic nghin cu ca lun vn s
mong mun pht hin ra nhng phng php hiu qu hn cho cross-domain.
Tip l pht trin ng dng mashup xy dng mt website c trng cho
ring mnh.
42
43
44