Luận Văn Cross-domain ajax cho các ứng dụng mashup

LỜI CẢM ƠN
Trong thời gian nghiên cứu và làm khóa luận, em xin chân thành cảm ơn
thầy giáo hướng dẫn Nguyễn Hải Châu đã giúp đỡ em hoàn thành tốt đề tài
khóa luận tốt nghiệp. Bên cạnh đó, em xin chân thành cảm ơn các thày cô giáo
trong khoa Công Nghệ Thông Tin - trường Đại Học Công Nghệ - ĐHQGHN
đã giảng dạy và trang bị cho em những kiến thức cơ bản trong học tập nghiên
cứu khoá luận cũng như trong công việc sau này.
Những lời động viên, khích lệ từ gia đình, sự chia sẻ, học hỏi từ bạn bè
cũng đã góp phần rất nhiều cho khóa luận tốt nghiệp của em đạt kết quả tốt
hơn.
Do trình độ hạn chế nên trong quá trình làm đồ án khó tránh khỏi những
thiếu sót, em rất mong sự chỉ bảo thêm của thày cô giúp em hoàn thành và đạt
kết quả tốt hơn.
Em xin chân thành cảm ơn!



TÓM TẮT KHÓA LUẬN TỐT NGHIỆP

Ngày nay, mashup ngày càng trở nên thịnh hành theo trào lưu Web 2.0.
Mashup cho phép mọi người thể hiện khả năng sáng tạo bất tận bằng cách ‘nối’
hai hay nhiều ứng dụng web lại với nhau. Và nếu có chính sách kiểm soát thích
hợp, mashup có thể tạo nên một lớp ứng dụng mới hiệu quả và hữu ích trong
rất nhiều môi trường. Để mashup dữ liệu từ các nguồn khác nhau đó, chúng ta
phải thực hiện cross-domain AJAX. Nhưng để cross-domain được, không phải
là việc dễ vì yêu cầu bảo mật dữ liệu và yêu cầu trang web đạt được những tính
năng đầy đủ phải được hài hòa.
Hiện có một số phương pháp cho việc cross-domain. Và khóa luận
‘Cross-domain ajax cho các ứng dụng mashup’ trình bày những nghiên cứu
tổng thể về mashup và cross-domain ajax, những cách thức để thực hiện cross-
domain trong ajax. Tiếp đó là việc nghiên cứu về hoạt động và lập trình Google
Maps API để có cơ sở xây dựng một ứng dụng thử nghiệm với cross-domain
cho mashup.


‐ 3 ‐
MỤC LỤC
MỤC LỤC CÁC SƠ ĐỒ . ‐ 5 ‐
THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT ‐ 7 ‐
LỜI MỞ ĐẦU . ‐ 8 ‐
CHƯƠNG I . ‐ 9 ‐
CROSS-DOMAIN AJAX VÀ. ‐ 9 ‐
ỨNG DỤNG ĐỂ XÂY DỰNG WEB MASHUP . ‐ 9 ‐
1.1. Giới thiệu chung về Cross-Domain Ajax .- 9 -
1.1.1 XMLHttpRequest ‐ 9 ‐
1.1.2 Chính sách Same-Origin . ‐ 10 ‐
1.1.3 Thẻ <script> . ‐ 11 ‐
1.1.4 AJAX . ‐ 11 ‐
1.2 Giới thiệu về Mashup .- 11 -
1.3 Một số ứng dụng để xây dựng Web Mahup .- 14 -
1.3.1 Sử dụng Google Maps API ‐ 14 ‐
1.3.2 Sử dụng Amazon Web Services và Google Search APIs ‐ 15 ‐
1.3.3 Sử dụng Flickr API ‐ 17 ‐
1.3.4 Sử dụng ebay API ‐ 19 ‐
CHƯƠNG II . ‐ 20 ‐
CROSS-DOMAIN AJAX và . ‐ 20 ‐
C ÁC GIẢI PHÁP THỰC HIỆN 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 Bảo mật ‐ 24 ‐
2.2.5 Hoạt động của JSON ‐ 24 ‐
2.3 Cross domain sử dụng 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 Giải pháp trong thế hệ tiếp theo - 31 -
2.5.1 FlashXMLHttpRequest . ‐ 31 ‐
2.5.2 ContextAgnosticXMLHttpRequest . ‐ 31 ‐
CHƯƠNG III . ‐ 33 ‐
XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM . ‐ 33 ‐
CROSS-DOMAIN AJAX ‐ 33 ‐
3.1 Giới thiệu về Google Maps - 33 -
3.2 Giới thiệu 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 ‐
KẾT LUẬN ‐ 42 ‐
TÀI LIỆU THAM KHẢO . - 43 -



MỤC LỤC CÁC SƠ ĐỒ
H1.1: XmlHttpRequest với Ajax ‐ 9 ‐
H1.2: Mashup nội dung từ nhiều nguồn ‐ 12 ‐
H1.3: Dữ liệu tương tác hiển thị với Ajax . ‐ 12 ‐
H1.4: Khác nhau giữa ba website . ‐ 13 ‐
H1.5: Mashup làm việc . ‐ 13 ‐
H1.6: Ứng dụng cho mashup ‐ 14 ‐
H1.7: Đăng nhập Google Maps API key . ‐ 15 ‐
H1.8: Đăng nhập cho tài khoản Amazon Associates . ‐ 16 ‐
H1.9: Đăng nhập cho tài khoản AWS ‐ 16 ‐
H1.10: Google Search API ‐ 17 ‐
H1.11: Đăng nhập cho tài khoản Flickr API ‐ 18 ‐
H1.12: Flickr photos search ‐ 18 ‐
H1.13: Đăng nhập cho tài khoản Flickr API ‐ 19 ‐
H2.1: Cross-Domain Proxy . ‐ 21 ‐
H2.2: Hạn chế của cross domain XMLHttpRequest . ‐ 21 ‐
H2.3: Của cross domain JSON . ‐ 22 ‐
H2.4: Hoạt động của JSON . ‐ 24 ‐
H2.5: Lỗi 2044 . ‐ 25 ‐
H2.6: Gọi ra dữ liệu từ domain unstrusted 3rd
-party đơn. Bước đầu tiên (trái) chuyển
communication object từ top frame tới mediator frame. Bước thứ hai (right) chỉ xảy ra
sau khi mediator và unstrusted frame thay đổi document.domain thành hậu tố
mashup.com . ‐ 29 ‐
H2.7: Kết nối đa web service. Nếu trình duyệt có một hạn chế frame access policy, một
cấu trúc khung top-mediator-unstrusted nên được sử dụng, nhưng nếu trình duyệt có sự
chấp nhận frame access policy, cấu trúc khung top-unstrusted-access cần . ‐ 30 ‐
H3.1: Mashup và các ứng dụng ‐ 33 ‐
H3.2: Google Maps API ‐ 34 ‐

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 ‐


THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT
AJAX Asynchronous JavaScript and XML – JavaScript và XML không đồng
bộ.
API Application Programming Interface – Giao diện chương trình ứng dụng.
DOM Document Object Model – Mô hình đối tượng văn bản.
HTML Hypertext Markup Languages – Ngôn ngữ đánh dấu siêu văn bản.
XHTML Extensible HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn
bản mở rộng.
JSON JavaScript Object Noattion – Định dạng hoán vị dữ liệu nhah.
URL Uniform Resource Locator – Tham chiếu tài nguyên trên internet.
XML Extensible Markup Language – Ngôn ngữ đánh dấu mở rộng.
RSS Really Simply Syndication – Tiêu chuẩn định đạng tài liệu.
REST Representational state transfer
CSS Cascading Style Sheets – Tập tin định kiểu theo tầng.
XSLT Extensible Stylesheet Language Transformations – Ngôn ngữ định dạng
chuyển đổi mở rộng.
SOAP Simple Object Access Protocol


LỜI MỞ ĐẦU
Vài năm trở lại đây, ngày càng nhiều công ty phát hành những chương
trình cho phép kết hợp dữ liệu và dịch vụ trên web của các doanh nghiệp với
nhau, đồng thời cũng phát triển hài hòa giữa bảo mật và các yêu cầu của khách
hàng. Chúng được trộn lẫn (mashup) một cách thông minh và sáng tạo.
Nhưng có một vấn đề về bảo mật được đưa ra khi bạn chuyển dữ liệu
giữa các domain. Với các hạn chế cross-domain, được xây dựng trên hầu hết
các trình duyệt, là một sự khó khăn cho mashup. Việc tìm hiểu sử dụng web
proxy hoặc JSON, . để nâng cao các hiệu quả mashup.
Luận văn ‘Cross-domain ajax cho các ứng dụng web mashup’ nhằm
mục đích tìm hiểu về cách thức và phương pháp thực hiện các lời gọi cross
domain trong ajax. Và trang bị kiến thức về thư viện ajax cross domain, Google
Maps API để lập trình ứng dụng thử nghiệm cho mashup.
Khóa luận được chia làm 3 chương. Chương I là phần giới thiệu cross-
domain ajax cùng một số vấn đề liên quan, và các ứng dụng để xây dựng web
mashup. Chương II sẽ giới thiệu chi tiết về cross-domain và cross-domain ajax,
sau đó em sẽ tóm tắt những giải pháp đang được thực hiện đối với cross-
domain trong ajax. Chương III là chương dành cho việc nghiên cứu về hoạt
động và lập trình Google Maps (API), đó là một cơ sở cho việc xây dựng một
ứng dụng thử nghiệm cross-domain cho mashup. Và cuối cùng, là phần tổng
kết bài khóa luận cùng và phần tài liệu tham khảo.