‐ 1 ‐
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!
‐ 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
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 ‐
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 3
rd
-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 ‐
‐ 7 ‐
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
‐ 9 ‐
CHƯƠNG I. CROSS-DOMAIN AJAX VÀ
ỨNG DỤNG ĐỂ XÂY DỰNG WEB MASHUP
1.1 Giới thiệu chung về Cross-Domain Ajax
Hãy lấy một ví dụ: sẽ rất tuyệt nếu bạn có thể lấy dữ liệu từ trang từ điển
của mình để dùng ở mọi trang web khác. Điều đó đòi hỏi các trang đó cần
mashup dữ liệu của bạn, và khi đó phải thực hiện cross-domain ajax. Với rất
nhiều ứng dụng hiện nay sử dụng công nghệ ajax, nó tạo khả năng
để gọi các
dịch vụ web từ trong javascript của bạn.
Để thực hiện cross-domain, có một vài phương pháp phổ biến thông qua
JavaScript: Proxy, JSON, Flash.
1.1.1 XMLHttpRequest
Đối tượng XMLHttpRequest là trung tâm của nhiều ứng dụng Ajax. Nó
cũng là đối tượng xác định một API cung cấp chức năng cho script phía client
sự chuyển đổi dữ liệu giữa client và server. Mặc dù không là một tính năng cần
thiết, nó đã là một dịch vụ Outlook web-mail cho phép mọi người có thể
download email, xem lịch, ...
XmlHttpRequest chính là bí quyết của Ajax
H1.1: XmlHttpRequest với Ajax
- Truy cập hoặc sửa đổi window (hoặc tab) tại location khác.
Hạn chế của same-origin policy đối với JavaScript: sự điểu chỉnh truy
cập đối với inline frame (IFRAME) và đối tượng XMLHttpRequest.
- IFRAME: có thể sử dụng để download văn bản HTML phong phú bên
ngoài nguồn, nhưng nếu nội dung sang domain khác, trình duyệt sẽ
không cho phép JavaScript trong trang chứa đọc ho
ặc sửa đổi văn bản
bên trong frame và ngược lại.
- XMLHttpRequest: có thể sử dụng để download văn bản XML bất kỳ,
nhưng nó không thể tải file từ domain khác.
Như vậy trạng thái của cross-domain script không là ưu điểm cho phát
triển web. Mặc dù chính sách same-origin ngăn chặn những lỗi có thể xảy ra,
nhưng nó cũng lại là hạn chế để nâng cấp (thậm chí là giảm) cho các thế hệ tiếp
theo của
ứng dụng web để phát triển. ‐ 11 ‐
1.1.3 Thẻ <script>
Same-origin không áp dụng cho script (mặc dù nó áp dụng trên các file
JavaScript), script có thể được tải từ các domain khác và thực hiện với đặc
quyền của trang chứa chúng.
Những script từ xa này có thể được thêm vào trang một cách tự động để
theo dõi những ai truy cập vào trang web của bạn, và bạn phải chạy chúng để
có hiệu lực. Do đó, nó đảm bảo chỉ các file JavaScript hợp lệ mới có thể truy
cập qua domain, và tất cả các file khác sẽ gây lỗi.
1.1.4 AJAX
Hầu như chúng ta đều đã biết tới hay thậm chí đang sử dụng nhiều
trong một trang để gửi tới trình duyệt. H1.2: Mashup nội dung từ nhiều nguồn.
Một ứng dụng Ajax + XML cho phép một trang web lấy dữ liệu từ
server và tự cập nhật sử dụng mã JavaScript như ở hình 1.2 dưới đây. H1.3: Dữ liệu tương tác hiển thị với Ajax
Với phương pháp này, người dùng có thể tương tác với nhiều giao diện
người dùng mà không cần tải lại toàn bộ trang. Server gửi một trang ban đầu
tới trình duyệt, nó gọi ngược lại tới server cho nội dung cần cập nhật.
Trong vài năm trở lại đây, việc mở các API từ một số nguồn như
Google, Yahoo, Last.fm, Flickr, YouTube và Amazon đã cho phép các nhà
phát triển web th
ực hiện trong các ứng dụng của họ, với một lời gọi tới các API
cần thiết, các tính năng như thêm ảnh, bản đồ, videos, ... và danh sách nhạc.
Để hiểu hơn về mashup, chúng ta hãy giả sử có 3 người trực tuyến tại:
Google, Amazon và eBay. Mashup của bạn sẽ cho phép mọi người tìm kiếm
dữ liệu của Amazon (ví dụ: giá những cuốn sách), so sánh chúng với trên trang
‐ 13 ‐
eBay, và cuối cùng, xác định người bán. Như vậy, bạn đã tới và xem xét 3
website khác nhau.
H1.4: Khác nhau giữa ba website
1.3.1 Sử dụng Google Maps API
Google Maps API là một ứng dụng sử dụng bản đồ trực tuyến và là một
trong những công nghệ mashup đặc trưng. Một số APIs bản đồ khác là
Yahoo!Maps Web services (http://developer.yahoo.com/maps/
). Với Google
Maps API, chúng sẽ nhận một vị trí và vẽ lên bản đồ. Một điểm đánh dấu có
thể được sử dụng để xác định vị trí, và bạn có thể thêm các đoạn văn bản tới
điểm đánh dấu đó.
‐ 15 ‐
Với Google Maps API, bạn có thể tìm các địa điểm (như khách sạn,
trạm đổ xăng, ...). Và ngày nay, cuộc cách mạng ngành bản đồ diễn ra mạnh
với khả năng hiển thị ảnh chụp vệ tinh chi tiết đến từng ngôi nhà.
Để đăng nhập cho một Google Maps API key, đầu tiên bạn hãy truy cập
vào website http://code.google.com/apis/maps/
và tới đường link ‘Sign up for
a Google Maps API key’.
H1.7: Đăng nhập Google Maps API key.
Nếu bạn sử dụng Google Maps API trong một vài mashups được định vị
tại các server khác nhau, bạn có thể cần đến những key khác nhau. Đó cũng
chính là key cho phép bạn sử dụng API. Key này sẽ là duy nhất cho bạn, cho
ứng dụng của bạn hoặc thậm chí cho URL từ mashup của bạn được đưa ra dù
nó hầu hết các key đều miễn phí.
Dữ liệu được s
ử dụng trong Google Maps thường được chuyển đổi đến
địa chỉ của điểm tung độ/hoành độ hoặc tại thành phố, ...
Với việc sử dụng Google Search API, nó cho phép bạn đặt chế độ tìm
kiếm trên trang web của bạn và trong mashup giống như trong Goolg Map API
vậy. Và sự thật rằng, hiện nay rất nhiều các công ty như Google, Yahoo!, ...
cung cấp một loạt các API cho việc tìm kiếm, lập bản đồ, ... và các mục đich
khác.
H1.10: Google Search API
Bạn có thể cho phép người dùng tìm kiếm video, tin tức, sách, ... Như
vậy là bạn cần giao diện của Amazon và giao diện của Google Search.
1.3.3 Sử dụng Flickr API
Flickr API là một sự bổ sung tới APIs. Flickr là một dịch vụ chia sẻ ảnh
(photo-sharing). Nó cho phép bạn tải ảnh của bạn lên và xem những ảnh đã
được tải lên khác. Thông tin về mỗi bức ảnh có thể được sử dụng để bổ sung và
tìm kiếm. Quan trọng nhất, ảnh có thể có các tag – các từ mà người chủ bức
ảnh cảm thấy có thể sử dụng để nhận dạng b
ức ảnh. Bạn có thể tìm kiếm Flickr
cho phù hợp với những tag xác định.
Bước đầu tiên bạn cũng truy cập để có được một API key. Sau đó, bạn
có thể khai thác APIs thể sử dụng API Explorer – cung cấp danh sách tất cả các
biến và cho phép bạn nhập dữ liệu tới các biến đó.
Copyright: Tài liệu đại học ©