You are on page 1of 44

1

LI CM N
Trong thi gian nghin cu v lm kha lun, em xin chn thnh cm n
thy gio hng dn Nguyn Hi Chu gip em hon thnh tt ti
kha lun tt nghip. Bn cnh , em xin chn thnh cm n cc thy c gio
trong khoa Cng Ngh Thng Tin - trng i Hc Cng Ngh - HQGHN
ging dy v trang b cho em nhng kin thc c bn trong hc tp nghin
cu kho lun cng nh trong cng vic sau ny.
Nhng li ng vin, khch l t gia nh, s chia s, hc hi t bn b
cng gp phn rt nhiu cho kha lun tt nghip ca em t kt qu tt
hn.
Do trnh hn ch nn trong qu trnh lm n kh trnh khi nhng
thiu st, em rt mong s ch bo thm ca thy c gip em hon thnh v t
kt qu tt hn.
Em xin chn thnh cm n!













2

TM TT KHA LUN TT NGHIP



Ngy nay, mashup ngy cng tr nn thnh hnh theo tro lu Web 2.0.
Mashup cho php mi ngi th hin kh nng sng to bt tn bng cch ni
hai hay nhiu ng dng web li vi nhau. V nu c chnh sch kim sot thch
hp, mashup c th to nn mt lp ng dng mi hiu qu v hu ch trong
rt nhiu mi trng. mashup d liu t cc ngun khc nhau , chng ta
phi thc hin cross-domain AJAX. Nhng cross-domain c, khng phi
l vic d v yu cu bo mt d liu v yu cu trang web t c nhng tnh
nng y phi c hi ha.
Hin c mt s phng php cho vic cross-domain. V kha lun
Cross-domain ajax cho cc ng dng mashup trnh by nhng nghin cu
tng th v mashup v cross-domain ajax, nhng cch thc thc hin cross-
domain trong ajax. Tip l vic nghin cu v hot ng v lp trnh Google
Maps API c c s xy dng mt ng dng th nghim vi cross-domain
cho mashup.













3

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. Gii thiu chung v Cross-Domain Ajax.....................................................................- 9 -
1.1.1 XMLHttpRequest.............................................................................................................. 9
1.1.2 Chnh sch Same-Origin ............................................................................................... 10
1.1.3 Th <script> ................................................................................................................... 11
1.1.4 AJAX............................................................................................................................... 11
1.2 Gii thiu v Mashup.................................................................................................- 11 -
1.3 Mt s ng dng xy dng Web Mahup...............................................................- 14 -
1.3.1 S dng Google Maps API ............................................................................................ 14
1.3.2 S dng Amazon Web Services v Google Search APIs ..............................................15
1.3.3 S dng Flickr API........................................................................................................ 17
1.3.4 S dng ebay API .......................................................................................................... 19
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

4

2.2.5 Hot ng ca JSON............................................................................................................ 24


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
CHNG III ............................................................................................................. 33
XY DNG NG DNG TH NGHIM............................................................. 33
CROSS-DOMAIN AJAX.......................................................................................... 33
3.1 Gii thiu v Google Maps ............................................................................................- 33 -
3.2 Gii thiu v Google Maps API......................................................................................- 33 -
3.2.1 Maps API Basics .................................................................................................................. 34
3.2.2 Maps API Events................................................................................................................... 36
3.2.3 Maps API Controls................................................................................................................ 38
3.2.4 Map Overlays......................................................................................................................... 39
3.2.5 Google Maps API Services.................................................................................................... 41
KT LUN................................................................................................................ 42
TI LIU THAM KHO......................................................................................... - 43 -





5

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 3
rd
-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

6

H3.3: map_api_basic.html ............................................................................................... 34


H3.4: map_api_event.html ................................................................................................ 37
H3.5: map_api_overlay.html............................................................................................. 39
H3.6: map_api_polyline.html............................................................................................ 41
H3.7: map_api_geocoding.html ........................................................................................ 41

THUT NG V CC CH VIT TT
AJAX Asynchronous JavaScript and XML JavaScript v XML khng ng
b.
API Application Programming Interface Giao din chng trnh ng dng.
DOM Document Object Model M hnh i tng vn bn.
HTML Hypertext Markup Languages Ngn ng nh du siu vn bn.
XHTML Extensible HyperText Markup Language Ngn ng nh du siu vn
bn m rng.
JSON JavaScript Object Noattion nh dng hon v d liu nhah.
URL Uniform Resource Locator Tham chiu ti nguyn trn internet.
XML Extensible Markup Language Ngn ng nh du m rng.
RSS Really Simply Syndication Tiu chun nh ng ti liu.
REST Representational state transfer
CSS Cascading Style Sheets Tp tin nh kiu theo tng.
XSLT Extensible Stylesheet Language Transformations Ngn ng nh dng
chuyn i m rng.
SOAP Simple Object Access Protocol








8

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 cross-
domain 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 cross-
domain 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.








9

CHNG I. CROSS-DOMAIN AJAX V


NG DNG XY DNG WEB MASHUP

1.1 Gii thiu chung v Cross-Domain Ajax
Hy ly mt v d: s rt tuyt nu bn c th ly d liu t trang t in
ca mnh dng mi trang web khc. iu i hi cc trang cn
mashup d liu ca bn, v khi phi thc hin cross-domain ajax. Vi rt
nhiu ng dng hin nay s dng cng ngh ajax, n to kh nng gi cc
dch v web t trong javascript ca bn.
thc hin cross-domain, c mt vi phng php ph bin thng qua
JavaScript: Proxy, JSON, Flash.

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

H1.1: XmlHttpRequest vi Ajax

ng dng Ajax s dng mu i tng XMLHttpRequest c th ch to
request ti cng domain chng nh v. iu bi v chnh sch bo mt

10

cross-domain ca JavaScript sandbox v n c th trnh khi tn thng cross-


site.
i tng XMLHttpRequest khng cho php gi cc m t mt domain
trong mt web server khc. Hin ti, mashup bao gm vic gi web service t
API c to sn bi cc cng ty nh Google, Flickr, Yahoo, ... N c ngha
rng mt li gi lun lun phi to cross-domain, nu khng bn khng th
thc hin chng.

1.1.2 Chnh sch Same-Origin
Trnh duyt s dng cookie nh mt phng php xc thc ngi s
dng duy nht, v thc hin giao din ph hp vi ngi s dng .
cookie c th c s dng vi mc ch nh vy, trnh duyt phi gi cho
cookie b mt vi cc site khc. Do , cookie ch c gi trong cng mt site
thit lp chng, v chnh sch nh vy c bit n gi l Chnh sch
Same-Origin. N cng c ngha rng ch site cha mt vi thng tin trong
trnh duyt mi c th c hoc chnh sa thng tin . iu ny c ngha l
phn ln khng th ti script t mt domain sang domain khc. V d nhng
hnh ng sau b cm:
- S dng mt XMLHttpRequest() n mt domain khc (thnh phn
ct li ca Ajax).
- Truy cp hoc sa i DOM ca mt <frame> hoc mt <iframe> c
mt thuc tnh src vi domain khc.
- Truy cp hoc sa i window (hoc tab) ti location khc.
Hn ch ca same-origin policy i vi JavaScript: s iu chnh truy
cp i vi inline frame (IFRAME) v i tng XMLHttpRequest.
- IFRAME: c th s dng download vn bn HTML phong ph bn
ngoi ngun, nhng nu ni dung sang domain khc, trnh duyt s
khng cho php JavaScript trong trang cha c hoc sa i vn bn
bn trong frame v ngc li.
- XMLHttpRequest: c th s dng download vn bn XML bt k,
nhng n khng th ti file t domain khc.
Nh vy trng thi ca cross-domain script khng l u im cho pht
trin web. Mc d chnh sch same-origin ngn chn nhng li c th xy ra,
nhng n cng li l hn ch nng cp (thm ch l gim) cho cc th h tip
theo ca ng dng web pht trin.


11

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.

1.2 Gii thiu v Mashup
Trnh duyt web hin nay c thit k d dng hn v an ton
hn trong ly d liu t nhiu ngun vo trong mt trang. Mashup l website
hoc ng dng web m phi hp t nhiu hn mt ngun vo trong mt trang
hp nht. Cng nh bn hiu mashup trong m nhc l mt bn audio hay
video c bin son t nhng bn ghi khc, thng l t cc phong cch nhc
khc nhau.
V d: Digg.com
i vi pht trin web, mashup l mt ng dng web phi hp d liu
t mt hoc nhiu ngun vo mt b cng c. Server to cc request ti mi

12

ngun ni dung, chuyn giao thng tin n nhn c, v phi hp kt qu


trong mt trang gi ti trnh duyt.


H1.2: Mashup ni dung t nhiu ngun.

Mt ng dng Ajax + XML cho php mt trang web ly d liu t
server v t cp nht s dng m JavaScript nh hnh 1.2 di y.


H1.3: D liu tng tc hin th vi Ajax

Vi phng php ny, ngi dng c th tng tc vi nhiu giao din
ngi dng m khng cn ti li ton b trang. Server gi mt trang ban u
ti trnh duyt, n gi ngc li ti server cho ni dung cn cp nht.
Trong vi nm tr li y, vic m cc API t mt s ngun nh
Google, Yahoo, Last.fm, Flickr, YouTube v Amazon cho php cc nh
pht trin web thc hin trong cc ng dng ca h, vi mt li gi ti cc API
cn thit, cc tnh nng nh thm nh, bn , videos, ... v danh sch nhc.
hiu hn v mashup, chng ta hy gi s c 3 ngi trc tuyn ti:
Google, Amazon v eBay. Mashup ca bn s cho php mi ngi tm kim
d liu ca Amazon (v d: gi nhng cun sch), so snh chng vi trn trang

13

eBay, v cui cng, xc nh ngi bn. Nh vy, bn ti v xem xt 3


website khc nhau.

H1.4: Khc nhau gia ba website

Cch chng lm vic

H1.5: Mashup lm vic

Mashup l mt th loi th v ca ng dng web. S kt hp ca cc m
hnh d liu, dch v, ... l s cung cp cui cng cho s s h tng cn thit
bt u pht trin ng dng c th thc y v hp nht s lng ln thng tin
c sn trn web.

14


1.3 Mt s ng dng xy dng Web Mahup
Di y, chng ta s tham kho mt s ng dng xy dng Web
Mashup. Thng cc ng dng web dng mashup kt hp bn vi nhiu
loi d liu t nhiu trn web.

H1.6: ng dng cho mashup

C mt nhn xt rng chng u s dng API. V hu ht cc nh cung
cp dch v API yu cu bn phi c mt developer/application ID, mt ti
khon ngi dng hoc dch dch v ca h, hoc c hai. Mt vi dch v cung
cp cho bn mt ID cho mt s ng dng khi bn vit chng trnh trong khi
nhng ci khc yu cu bn t to mt ID cho mnh vi mi ng dng bn to
ra.
Trong khi qu trnh ng k ny nghe c v phc tp, nhng tht s n
ch tn mt vi pht hon thnh.
Bn hy tham kho xem mt vi ng dng sau.

1.3.1 S dng Google Maps API
Google Maps API l mt ng dng s dng bn trc tuyn v l mt
trong nhng cng ngh mashup c trng. Mt s APIs bn khc l
Yahoo!Maps Web services (http://developer.yahoo.com/maps/ ). Vi Google
Maps API, chng s nhn mt v tr v v ln bn . Mt im nh du c
th c s dng xc nh v tr, v bn c th thm cc on vn bn ti
im nh du .

15

Vi Google Maps API, bn c th tm cc a im (nh khch sn,


trm xng, ...). V ngy nay, cuc cch mng ngnh bn din ra mnh
vi kh nng hin th nh chp v tinh chi tit n tng ngi nh.
ng nhp cho mt Google Maps API key, u tin bn hy truy cp
vo website http://code.google.com/apis/maps/ v ti ng link Sign up for
a Google Maps API key.

H1.7: ng nhp Google Maps API key.

Nu bn s dng Google Maps API trong mt vi mashups c nh v
ti cc server khc nhau, bn c th cn n nhng key khc nhau. cng
chnh l key cho php bn s dng API. Key ny s l duy nht cho bn, cho
ng dng ca bn hoc thm ch cho URL t mashup ca bn c a ra d
n hu ht cc key u min ph.
D liu c s dng trong Google Maps thng c chuyn i n
a ch ca im tung /honh hoc ti thnh ph, ...

1.3.2 S dng Amazon Web Services v Google Search APIs
Bn c th s dng API tm kim trong c s d liu ca Amazon v
thc hin mt th mua sm trong hai cch khc nhau. Vi Amazon, trng tm
l trn d liu bn truy cp khng cn trc tip cc li gi SQL.
Vi Amazon, bn cn truy cp ti Web Services API ca API ni m
d liu Amazon c lu tr. Bn cng c th cn thc hin th mua sm v
kh nng tm kim (v t li nhun) bn hng thng qua trang web ca bn.
D n gin, nhng n yu cu bn to 3 ti khon ring bit: mt ti khon

16

Amazon, mt ti khon Amazon Associate v mt ti khon Amazon Web


Services (AWS).
c mt ti khon Amazon, bn tht s khng phi lm g c, v n
n gin ch gm a ch e-mail v mt khu, cng vi nhng thng tin khc
bn cung cp.
ng k cho mt ti khon Amazon Associate, ta tm n ng link
Associates Program.

H1.8: ng nhp cho ti khon Amazon Associates
ng k cho mt ti khon AWS, truy cp vo website
http://www.amazon.com/ v tm n link Amazon Web Services.

H1.9: ng nhp cho ti khon AWS


17

Vi vic s dng Google Search API, n cho php bn t ch tm


kim trn trang web ca bn v trong mashup ging nh trong Goolg Map API
vy. V s tht rng, hin nay rt nhiu cc cng ty nh Google, Yahoo!, ...
cung cp mt lot cc API cho vic tm kim, lp bn , ... v cc mc ich
khc.

H1.10: Google Search API
Bn c th cho php ngi dng tm kim video, tin tc, sch, ... Nh
vy l bn cn giao din ca Amazon v giao din ca Google Search.

1.3.3 S dng Flickr API
Flickr API l mt s b sung ti APIs. Flickr l mt dch v chia s nh
(photo-sharing). N cho php bn ti nh ca bn ln v xem nhng nh
c ti ln khc. Thng tin v mi bc nh c th c s dng b sung v
tm kim. Quan trng nht, nh c th c cc tag cc t m ngi ch bc
nh cm thy c th s dng nhn dng bc nh. Bn c th tm kim Flickr
cho ph hp vi nhng tag xc nh.
Bc u tin bn cng truy cp c c mt API key. Sau , bn
c th khai thc APIs th s dng API Explorer cung cp danh sch tt c cc
bin v cho php bn nhp d liu ti cc bin .

18


H1.11: ng nhp cho ti khon Flickr API

Ln u tin s dng Flickr, bn cng cn phi c c mt Yahoo! ID
t c quyn truy cp. Trong Mashup phn mm v thnh phn ca Web
2.0 c cu trc li, lin kt li v t c mt s thay i mu m, th
Flickr by gi l mt thnh phn ca Yahoo!
Nhng thng tin pha tri ca trang web rt hu ch, nhng n l tham
chiu ca API pha bn phi rt quan trng. API routines c nhm li theo
cc loi. Nh vy, xy dng mt mashup, bn cn di chuyn xung ti cc
phn hnh nh v nhn ti flickr.photos.search cho php bn tm kim danh
sch nh.

H1.12: Flickr photos search

19



1.3.4 S dng ebay API
eBay API l mt ng dng phc tp nht. N c m third-party
pht trin trong mt thi gian di v quy trnh (u gi) cng l phc tp hn
quy trnh mua v bn thng thng cho mt mc gi c nh.
Ti eBay API, bn s tm kim mt mc no s dng c giao din
SOAP v giao din REST. V kt qu s c hin th trn mt bn Google
da vo v tr ca ngi bn.
bt u truy cp ti eBay APIs, bn i ti eBay Developer Center ti
http://developer.ebay.com/ , bn ng k nh mt chuyn vin pht trin qua
trang web, v sau ng nhp.

H1.13: ng nhp cho ti khon Flickr API

Mashup trong eBay cho php bn tm kim cc mc s dng cc t
kha. Khi tm thy thy kt qu, n tr v mt vn bn XML. Vn bn ny
cha cc tiu mi mc v gi ca chng cng nh v tr ngi bn. Cc mc
ny sau c nh x vo mt bn ca Google vi s nh du c cung
cp thng tin v ng lin kt ti trang eBay.
D liu ly t eBay v cng s dng bn Google API.





20

CHNG II. CROSS-DOMAIN AJAX V


CC GII PHP THC HIN TRONG AJAX

Trong khi mashup bt trnh duyt trong h thng a ngi dng cng
vi tn min khng tin cy ln nhau nh gia nhng ngi s dng, th cc
trnh duyt ngy nay a ra cho cc nh pht trin web khng l thuyt
tch hp ni dung t nhiu domain: hoc l c lp cc website khng c s
lin lc hoc l lin lc khng c s kim sot vi s khng c lp.
V khi Ajax xut hin trong th gii ng dng web, nhng nh pht
trin mun gii quyt mt vn trn khi m c Firefox v IE(Internet
Explorer) u khng cho php, chnh l vic gi mt request n mt
domain khc vi domain hin hnh. Vn chnh l vn Cross-domain
Ajax.
V, cho n hin nay, c mt vi phng php ph bin thc hin gi
cross domain trong Ajax thng qua JavaScript: Proxy, JSON, Flash.

2.1 Cross domain proxy
y l phng php ph bin nht, thay v to li gi Ajax ti mt
domain khc, bn to li gi ti proxy ca bn, proxy s chuyn cuc gi ti
domain bn ngoi (v d: Yahoo! Web Services) v li chuyn d liu tr li
cho ng dng client. Bi v s kt ni c to ti server ca bn, v d liu
cng c tr li t server ca bn, do khng c s lo ngi v bo mt.

H2.1: Cross-domain Proxy

To d liu xut hin trong client d liu same-origin, do trnh
duyt cho php d liu c th c tr li mt IFRAME, hoc thng thng
hn, mt XMLHttpRequest.

21

u im: bn c nhiu s kim sot ton b qu trnh, bn c th phn


tch d liu ca server t xa. Nu c xy ra li, bn c th x l n. V cui
cng bn c th ghi li tt c cc cuc gi t xa, theo di cuc gi thnh cng,
hay li.
Hn ch : tng tr ca kt ni qua proxy server ca mashup. Chi ph
bng thng cho mashup author cng tng, c bit nu kch thc ca m
mashup l nh so vi s lng ca d liu cross-domain c y quyn (do
thc hin t pha server-side).

2.2 Cross domain JSON
XMLHttpRequest c mt phng thc bo mt khng h tr cho
th h tip theo ca ng dng web. JSONRequest c xut nh mt
browser service cho php d liu trao i hai chiu vi d liu JSON server.
N trao i d liu gia cc script trn cc site vi JSON server trong trang
web. N c hi vng rng trnh duyt s c xy dng nhng tnh nng
trong sn phm ca h lm cho nhng u im trong ng dng web pht
trin.
Trong th h tip theo ca ng dng web s c nhiu d liu hn. Chng
ta mun i ti mt server, hay bt k server no v trao i d liu, th
XMLHttpRequest khng t c. l mt hn ch trong m hnh bo
mt.
XMLHttpRequest b rng buc bi chnh sch Same Origin. Rng buc
trung gian ny ch cho kt ni ti server m cung cp trang c s.

H2.2: Hn ch ca cross domain XMLHttpRequest

22


Chnh sch Same Origin lm v hiu ha nhng cuc tn cng t bn
ngoi, nhng n cng chng li mng ln hn vic s dng hp php. N nn
c kh nng cho mt script trong trang truy cp n cc server khc khng lm
hi n bo mt ca ngi s dng hoc t chc .
JSON l mt dng trao i d liu da trn tp JavaScript an ton.
JSON c th i din cho cu trc d liu n gin hoc phc tp. JSON khng
i din cho hm hoc biu thc. N l mt d liu rt cht ch, n c quy tc
c php ring, do vy bn c th d dng nhn bit c phi l ti liu JSON
khng.


H2.3: Ca cross domain JSON

JSONRequest l mt i tng JavaScript ton cc, n cung cp ba
method: post, get, cancel.

2.2.1 JSONRequest.post
JSONRequest.post l mt HTTP post ca chui i tng hoc mng
JavaScript, nhn nhng phn hi, v phn tch chng thnh gi tr JavaScript.
Nu phn tch thnh cng, n s tr li gi tr ca script request. Khi to
request, khng c chng thc hay cookie c gi (nu gi km cookie,
request s b li).

23

JSONRequest service ch c th s dng gi v nhn gi tr JSON-


encoded.
JSONRequest cha bn tham s:
- url (string) : URL POST ti.
- send (object) : i tng JavaScript hoc mng gi nh d liu
POST.
- done (function(requestNumber, value, exception)) : Hm c gi khi
request c hon thnh. Nu request thnh cng, hm s nhn s
request requestNumber v gi tr value tr v. Nu n khng thnh
cng, n s nhn s request v mt i tng ngoi l exception.
- timeout (number) : s mili giy i cho phn hi.

2.2.2 JSONRequest.get
JSONRequest.get l mt HTTP get request, ly phn hi, v phn tch
chng thnh mt gi tr JavaScipt. Nu phn tch thnh cng, n s tr li gi tr
script request. Khi request, khng c chng thc v cookie c gi.
V nh trn, n cng ch c s dng vi gi tr JSON-encoded.
JSONRequest.get cn ba tham s:
- url (string) : URL GET v.
- done (function(requestNumber, value, exeption)): Hm c gi khi
request hon thnh. Nu request thnh cng, hm s nhn s request
requestNumber v gi tr value tr v. Nu n khng thnh cng,
n s nhn s requestNumber v mt i tng ngoi l exeption.
- timeout (number): s mili giy i cho s phn hi.

2.2.3 JSONRequest.cancel
Mt request c th b xa bi JSONRequest.cancel vi s request. N
khng tr li g c. Khng c g m bo rng yu cu s khng c gi ti
server khi lnh xa request c to:


- Nu request vn trong hng i, n s b xa t hng i.
- Nu request trong tin trnh, mt s th s c to loi b n.
- Nu request khng c tm thy, th lnh trn s c b qua.Khi
thng bo c xa thnh cng, hm callback done ca request s
c gi vi mt thng ip ngoi l ca cancelled.
JSONRequest.cancel(requestNumber);

24

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.4: Hot ng ca JSON

25


Bc1: Browser yu cu trang HTML t HTTP server domain:
www.domain-1.com
Bc2: Trang HTML c ly v bc1 cha JavasCript c nhim v
trc tip browser yu cu file JavaScript mt HTTP server th hai trn
domain: www.domain-2.com
Bc3: JavaScript ly v t bc2 c thc thi browser, n thay i
cc thnh phn ca trang web v c lin kt ti cc JavaScript khc.
Bc4: JavaScript mi ny s gi v yu cu c cung cp dch v.
Sau khi yu cu c thc hin, server s gi tr li hm JavaScript callback
method vi JSON object v cc tham s ca n. Callback method lm cho mi
quan h gia JSON client v dch v tr nn linh hot hn.
Bc5: Callback method c thc thi v ni dung trang web c cp
nht.

2.3 Cross domain s dng Flash
Phng php ny t ph bin hn phng php proxy, n khai khc kh
nng truyn thng cross-domain m flash c th a ra. Ging nh JavaScript,
Flash ch cho php request ti cng domain, nhng n cng cho php request
ti domain third party m cho php n s dng file crossdomain.xml.
Nu bn lm vic rt nhiu vi cc file Flash, th mt s phin bn c
ca Flash yu cu chnh sch truyn thng gia cc domain. V d, nu bn
c mt file ang ti ni dung t domain khc, bn s gp phi li.

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:

26










Nh bn ch trn, du hoa th (*) c ngha rng tt c.
Hoc to mt s gii hn









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
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-
policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-
policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.mysite.com" to-
ports="25" />
</cross-domain-policy>

27

S dng JavaScript, bn c th phn tch d liu gia cc domain c


cng mt hu t. Nu hai domain mun chia s giao tip mt hu t thng nht,
chng ta s dng thuc tnh JavaScript document.domain cung cp s truy
cp y ti mi domain. V d:
a.example.com v b.example.com c th c thay i bin
document.domain thnh example.com, cho php chng chuyn d liu v m
JavaScript khi chy.
Hn ch: hu t c thay i khng qu di thnh top level domain
name (VD: .com) ngn s truyn thng qua domain bt k.

- S chp nhn m cross-domain
Chnh sch same-origin ngn chn cc m khi vic chuyn gia cc
domain. Mt hm c nh ngha trong mt domain s khng c gi bi
m trong domain khc, do khng c s m h v domain thc hin hot
ng khi s dng bo mt same-origin kim tra.
Closure: hm c nh ngha trong thn hm khc, tham chiu ti bin
trong vng khi n c to, ch khng phi khi n c gi.
Bng vic ci t bin document.domain, mt trang web c th chuyn
tip mt closure ti mt frame trong nhng domain khc. C hai la chn:
Authorization ng: closure k tha cc c quyn bo mt ca trang
m gi n. Phng php tip cn ny tng ng cho ng link kim sot
ca ngn xp gi. (Opera v Sapari). VD: khi www.site1.com gi ti liu t
www.site2.com, trnh duyt thi hnh tnh nng site1 v kim sot n.
Authorization tnh: closure k tha quyn bo mt ca trang ni m
closure c to. S tip cn ny c th c thc hin bi ng link truy cp
ca hm thay th link kim sot. (IE v Firefox). VD: khi www.site1.com gi
ti liu t www.site2.com, trnh duyt s gi tnh nng site2 c thi hnh
trn ton b ti liu.
Authorization ng c th c m phng trong mt trnh duyt
authorization tnh bi vic gi eval da trn d liu chui nhn t nhng site
khc nhng ngc li th khng ng: authorization ng khng th d dng
m phng trong trnh duyt authorization tnh.

- Truy cp frame cross-domain
C mt vi chnh sch browser :
Quyn (Firefox v Safari)

28

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 denial-
of-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.

29


H2.6: Gi ra d liu t domain unstrusted 3
rd
-party n. Bc u tin
(tri) chuyn communication object t top frame ti mediator frame. Bc th
hai (phi) ch xy ra sau khi mediator v unstrusted frame thay i
document.domain thnh hu t mashup.com

Thc hin ln lt cc bc:
To mediator frame: www.mashup.com
To unstrusted frame: webservice.mashup.com
Chuyn i tng truyn trng JavaScript.

- Thay i d liu
Ti y, chng ta s phn tch cc trnh duyt vi cc phng php h
tr i vi closure:
IE v Firefox h tr phng php authorization tnh: do vy closure
cung cp mt c ch lin lc d dng gia top frame v unstrusted frame.
Opera v Safari cung cp authorization ng i vi closure: nn n
khng h tr h thng gi ngc. H thng s c chy vi c quyn bo
mt ca trang gi n, ch khng phi ca trang to n.


2.4.3 a Web Service


30


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

- Hn ch frame truy cp
Chng ta to mt cu trc khung lp mi cho mi web service hoc mi
gadget cn chn. Khi , s trong hnh 2.6 c th trc tip c lp vo mt
a unstrusted web services.

- S cho php frame truy cp
gi nhng frame khi s giao thoa vi mi ci khc, s dng domain
dng mt ln mi i vi mi web service ci m mashup cn tng tc.
VD: nu mashup cn chn hai web service, n c th s dng
webservice1.mashup.com v webservice2.mashup.com
Cng gm cc bc sau:
To mediator frame: mashup.com
To unstrusted frame: webservice1.mashup.com (nhng khng n
trong mediator frame, chng ta n trong top frame. Do , mediator
frame v unstrusted frame l anh em)
To access frame: thm access frame trong unstrusted frame, v sau
thay i domain ca n ti mashup.com.
Chuyn tip i tng truyn thng JavaScipt: Access frame a i
tng ny vo trong container n chia s vi unstrusted frame.
Hy: unstrusted frame vt b access frame, ci m khng cn cn
thit. Unstrusted frame c Subspace object n cn lin lc vi top
frame.

31

Lp li i vi tt c cc gadget: vic x l c lp li cho tt c cc


unstrusted web service hoc gadget cn c chn; mediator frame
khng cn cn thit v c th b xa b.
Ti unstrusted content: tt c gadget c knh lin kt Subspace ti top
frame, nhng khng ci no c th truy cp c ti ci khc. T ,
ci t phrase c hon thnh, top frame c th x l an ton cc
lnh ti unstrusted content, nh cross-domain <script> tag, trong
mi frame.


2.5 Gii php trong th h tip theo
2.5.1 FlashXMLHttpRequest
Phng php ny thay th vic s dng file crossdomain.xml, chng ta
s dng mt FlashXMLHttpRequest proxy. N s dng mt file SWF nh
to request GET v POST thay cho bn.
Phng php ny tt hn s dng crossdomain.xml v y l cc i
tng, thm na, phin bn SWF h tr hu ht cc trnh duyt (v sm hn so
vi Flash).
Hn ch: (khi c s dng cng phin bn vi Flash) nh kh nng gi
v nhn m trng thi hoc HTTP header, hoc x l HTTP Puts v Deletes.

2.5.2 ContextAgnosticXMLHttpRequest
C th s dng thay th XMLHttpRequest trong li gi cross domain.
ContextAgnosticXMLHttpRequest c kh nng chuyn chi tit bo mt ti ng
dng cho php gi dch v c th trong domain khc.
Mt s trng hp c bn: Mt domain c cung cp bi
somehost.myFirstDomain.com c th ly d liu XML qua HTTP t
somehost.mySecondDomain.com v m rng, mt document c cung cp bi
host1.mydomain.com c th ly d liu XML qua HTTP t host2.domain.com.
Request s l:
- Cho php mt document thc hin mt HTTP request ti mt host
ngoi.
- Khng gi bt k cookie no trong request .
- Loi b set-cookie: ch th trong HTTP response t host ngun.

32

- B qua bt k chng thc HTTP c bn no, v ch gi cho nhng ci


c thit lp r rng.
- Lun lun gi mt HTTP tham chiu chnh xc: request header c gi
tr l URI ca ti liu thc hin request.
































33

CHNG III. XY DNG NG DNG TH


NGHIM CROSS-DOMAIN AJAX

Tng t cc mashup cho ng dng nghip v cng da trn cc th
vin API ph bin c sn, nh th vin ca Google Maps, to nn nhng
ng dng web n gin dng JavaScript kt hp nhiu ngun d liu.
Chng ny s a ra nhng nghin cu ch yu v Google Maps API,
nh l mt kin thc tm hiu cho vic xy dng ng dng th nghim.

H3.1: Mashup v cc ng dng

3.1 Gii thiu v Google Maps
Google Maps l mt dch v ca Google, cung cp cc ng dng v
cng ngh hon min ph v dch v bn trn web, bao gm Google Maps
website (website v Google Maps), Google Ride Finder(cho php ngi li xe
xc nh c v tr v hng, cch thc i n ch), cc bn nhng trn
cc website thng qua Google Map API

3.2 Gii thiu v Google Maps API
Google Maps API cho php bn nhng Google Maps trong trang web
ca bn vi m JavaScript. API cung cp mt s tin ch thao tc bn v
thm ni dung ti bn thng qua mt lot cc dch v, cho php bn to ng
dng bn trn website ca bn.


34


H3.2: Google Maps API

3.2.1 Maps API Basics
Phn t c bn bt u hiu v Google Maps API application l phn
t map.
V d n gin sau hin th mt trang web cha bn 1000x500 vi
trung tm l H Ni, Vit Nam :

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.

35

Hm JavaScript to i tng map.


Chng ta khi ng i tng map t s kin onLoad ca th
body.
hiu su hn, chng ta c nhng bc sau:

- Thc hin vic load Google Maps API




Trang web ca bn phi cha mt script tr ti URL
http://maps.google.com/maps?file=api&v=2&key=yourkey , n cha nhng
biu tng v nh ngha cn thit cho s dng Google Maps API.

- Phn t Map DOM



Chng ta to ra mt phn t div v tham chiu ti phn t ny trong
DOM ca trnh duyt (document object model).

- i tng c bn Gmap2


y chng ta to mt i tng map s dng ton t , c trng
mt bn l lp Gmap2. i tng ca class nh ngha mt bn trn mt
trang web.
Khi bn to mt i tng map mi, bn xc nh mt nt DOM mi
trong trang (thng s dng phn t div) nh mt container cho bn . Sau
chng ta tham chiu ti phn t th div ny thng qua
document.getElementById().

- Khi ng map



<script
src="http://maps.google.com/maps?file=api&v=2&key=yourkey
"
type="text/javascript">
</script>
<div id="my_map " style="width: 1000px; height:
500px"></div>
var map = new GMap2(document.getElementById("my_map "));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();

36

Mt khi chng ta to mt map qua hm to Gmap2, chng ta phi


khi ng n. Vic ny c hon thnh vi vic s dng hm setCenter().
Hm setCenter() yu cu mt GlatLng ch ra ta v mt tham s ch ra
phng i, ch rng hm ny phi c gi trc tt c cc hm trn map,
bao gm thit lp v cc thuc tnh khc ca map.
Chng ta gi hm setUIToDefault() thit lp giao din bn , bao
gm vic chuyn ng quay v phng to - thu nh, la chn loi bn , ...

- Thc hin loading map


m bo bn c t trn trang sau khi trang c load, chng
ta ch thc hin hm khi m phn t <body> ca trang HTML nhn c mt
s kin onload.
Hm Gunload() l mt hm chc nng thit k ngn r r b nh.

- V v Kinh
i tng GLatLng cung cp mt c ch cho php bn tham chiu ti
cc v tr ca bn . Bn xy dng i tng GlatLng, thng qua tham s {v
, kinh } nh c s dng trong bn .

3.2.2 Maps API Events
Trong trnh duyt, s tng tc ca ngi s dng chut v bn phm
to nn cc s kin c lan truyn trong DOM. Khi nhng s kin c kch
hot, mt event listeners s nhn s kin v thc hin chng trnh tng
ng.
Google Maps API thm vo nhng m hnh s kin ny bi nh ngha s kin
ty thch cho i tng Maps API.
S kin c thm vo:
<body onload="initialize()" onunload="GUnload()">

37


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.











Trong v d trn, chc chn s kin click xy ra trn bn bng
vic kim tra bin latlng. Sau chng ta m mt ca s thng tin cho vic
click .



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);
}
});

38

3.2.3 Maps API Controls


v d trn chng ta thm mt s phn t cho php tng tc ca ngi s
dng qua bn . Chng c bit n nh controls, v l lp con ca lp
Gcontrol.
Bn c th s dng mt s controls c bn m Maps API xy dng:
GLargeMapControl : b iu chnh (c ln) cho s quay/phng to-
nh, n hin th trn cng bn tri ca map.
GSmallMapControl : b iu chnh s (c nh) quay/phng to-nh,
hin th trn cng bn tri ca map.
GsmallZoomControl : mt b iu chnh ch phng to-nh, n s
hin th tng mc phng trn map.
GscaleControl : mt thang o map.
GmapTypeControl : mt button cho php ngi s dng o chiu
gia cc loi map (ging nh Bn v V tinh)
GOverviewMapControl : mt bn c rt gn gc tri di
cng ca mn hnh.

- MapType Controls
Mc nh, Google Maps API cung cp 3 loi map:
G_NORMAL_MAP : hin th mt map bnh thng, nh mt bn
2D ca Google Maps.
G_SATELLITE_MAP : hin th mt bn nh.
G_HYBRID_MAP : hin th mt s pha trn cc nh v cc tnh
nng ni bt ( ng, tn thnh ph).
Bn c th thay i map ang s dng bng Gmap2.removeMapType()
hoc thm chng vi Gmap2.addMapType().

- Thm Controls ti Map
Bn thm controls ti map bng hm addControl(). Nh v d c a
ra trn chng ta cng c th thc hin nhiu ln vic thm ny:





map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

39


3.2.4 Map Overlays
Overlay l mt i tng trn bn gn vi v /tung khi h di
chuyn hoc ko, phng to-thu nh map. Overlays phn nh cc i tng bn
thm vo bn thit k cc im, cc ng v cc vng.
Maps API c mt s loi overlays:
im trn map c hin th s dng markers i tng ca lp
GMarker, v thng hin th mt biu tng ty thch.
ng trn map c hin th s dng polylines (tp cc im)
i tng ca lp Gpolyline.
Vng trn map hin th nh polygons (vng vi hnh dng bt k)
hoc ground overlays (vng l hnh ch nht).
Map s c hin th s dng tile overlay. Bn c th sa i n
bng cch s dng GTileLayerOverlay hoc to mi s dng
GMapType.
Mi overlay thc hin mt giao din Goverlay. Overlay c thm vo
bn s dng Gmap2.addOverlay() v c th xa b s dng
GMap2.removeOverlay().
Bn s nhn thy:

H3.5: map_api_overlay.html

- Markers

40

Markers xc nh im trn map. Chng ta s dng


G_DEFAULT_ICON xc nh icon ty , GMarker cn GLatLng v mt
i tng ty chn GMarkerOptions nh cc bin.

- Marker c th di chuyn
v d trn, chng ta thc hin cho marker c th nhn c click v
c th c ko n mt v tr mi. Nhng s kin c th xy ra trn marker:
click, dragstart, drag, dragend. V nhng s kin ny c tc dng, chng ta
phi khi ng chng.










- 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:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter); });
GEvent.addListener(marker, "dragstart" , function() {
map.closeInfoWindow(); });
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Bn va di chuyn..." + letter);
});

41


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

42


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.




















43

TI LIU THAM KHO



[1] Collin Jackson v Helen J.Wang (2007) -
Subspace: Secure Cross-Domain Communication for Web Mashups.
[2] Jesse Feiler - How to do Everything with Web Mashups 2.0.
[3] Jon Howell, Collin Jackson, Helen J.Wang v Xiaofeng Fan -
MashupOS: Operating System Abstractions for Client Mashups.
[4] Head, Indigenous Studies Portal University of Saskatchewan Library
(2007) - Whats a Mashup & Why Would I Want One?.
[5] AJAX v vn cross-domain -
http://www.javavietnam.org/javavn/mvnforum/viewthread_thread,15138
[6] API - http://www.programmableweb.com/apis
[7] Cross-domain-ajax - http://code.google.com/p/cross-domain-ajax/
[8] Cross Domain AJAX: A quick summary -
http://snook.ca/archives/javascript/cross_domain_aj/
[9] Cross-domain AJAX - http://www.nhchau.com/blog/2008/06/01/2366-
cross-domain-ajax.htm
[10] Calling Cross Domain Web Services in AJAX - http://www.simple-
talk.com/dotnet/asp.net/calling-cross-domain-web-services-in-ajax/
[11] Gii quyt vn cross-domain ca AJAX - http://cntt.tv/nodes/show/217
[12] Introduction to Cross-Domain Ajax -
http://jimbojw.com/wiki/index.php?title=Introduction_to_Cross-Domain_Ajax
[13] JSONRequest - http://www.json.org/JSONRequest.html
[14] Make Mashups Talk Across Domains(2006)
http://www.devx.com/webdev/Article/30860
[15] Mashup cho ng dng nghip v -
http://www.viettotal.com/VietNews/CongngheWeb/tabid/88/CategoryID/1/New
s/57/Default.aspx
[16] Shaping the future of secure Ajax mashups (2007)
http://www.ibm.com/developerworks/library/x-securemashups/
[17] http://www.ebay.com/
[18] http://www.flickr.com/
[19] http://www.amazon.com/
[20] http://code.google.com/


44

You might also like