         ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Thị Hương CROSS-DOMAIN AJAX CHO CÁC ỨNG DỤNG WEB MASHUP KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin  ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Thị Hương CROSS-DOMAIN AJAX CHO CÁC ỨNG DỤNG WEB MASHUP KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin Cán bộ hướng dẫn: TS. Nguyễn Hải Châu HÀ NỘI - 2009  LỜI CẢM ƠN Trong thời gian nghiên cứu và làm khóa luận, tôi xin chân thành cảm ơn đặc biệt đến thầy giáo hướng dẫn Nguyễn Hải Châu, người đã giúp tôi lựa chọn đề tài, hướng dẫn tìm tài liệu và đưa ra những nhận xét quan trọng giúp tôi hoàn thành tốt đề tài khóa luận tốt nghiệp. Bên cạnh đó, tôi 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 tôi 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 là đã góp phần rất nhiều cho khóa luận tốt nghiệp của tôi đạt kết quả tốt hơn. Do trình độ hạn chế nên trong quá trình làm khóa luận khó tránh khỏi những thiếu sót, tôi rất mong sự chỉ bảo thêm của thầy cô giúp tôi hoàn thành và đạt kết quả tốt hơn. Tôi xin chân thành cảm ơn ! Hà Nội, ngày 24 tháng 5 năm 2009 Nguyễn Thị Hương  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ừ nhiều 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.  MỤC LỤC DANH MỤC CÁC SƠ ĐỒ THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT LỜI MỞ ĐẦU CHƯƠNG I. CROSS-DOMAIN AJAX VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEB MASHUP 1 1.1. Giới thiệu chung về Cross-Domain Ajax 2 1.1.1 AJAX 2 1.1.2. XMLHttpRequest 2 1.1.1. Chính sách Same-Origin 3 1.1.3. Thẻ <script> 4 1.1.4. Gadget Aggregator 4 1.2. Giới thiệu về Mashup 4 1.3. Một số ứng dụng để xây dựng Web Mahup 7 1.3.1. Sử dụng Google Maps API 8 1.3.2. Sử dụng Amazon Web Services và Google Search APIs 9 1.3.3. Sử dụng Flickr API 11 1.3.4. Sử dụng ebay API 12 CHƯƠ NG II. CROSS-DOMAIN AJAX VÀ 14 CÁC GIẢI PHÁP THỰC HIỆN TRONG AJAX 14 2.1. Cross domain proxy 14 2.2. Cross domain JSON 15 2.2.1. JSONRequest.post 16 2.2.2 JSONRequest.get 17 2.2.3. JSONRequest.cancel 17 2.2.4. Bảo mật 17 2.2.5. Hoạt động của JSON 18 2.3. Cross domain sử dụng Flash 19 2.4. Subspace 20 2.4.1. Subdomain 22  2.4.2. Đơn Web Service 22 2.4.3. Đa Web Service 23 2.5. Giải pháp trong thế hệ tiếp theo 24 2.5.1. FlashXMLHttpRequest 24 2.5.2. ContextAgnosticXMLHttpRequest 24 CHƯƠNG III. XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM CROSS-DOMAIN AJAX 26 3.1. Giới thiệu về Google Maps 26 3.2. Giới thiệu về Google Maps API 26 3.2.1. Maps API Basics 27 3.2.2. Maps API Events 29 3.2.3. Maps API Controls 30 3.2.4. Map Overlays 31 3.2.5. Google Maps API Services 33 KẾT LUẬN 34 TÀI LIỆU THAM KHẢO   DANH MỤC CÁC SƠ ĐỒ Hình 1. XmlHttpRequest với Ajax 3 Hình 2. Mashup nội dung từ nhiều nguồn. 5 Hình 3. Dữ liệu tương tác hiển thị với Ajax 5 Hình 4. Khác nhau giữa ba website – Amazon, Google, eBay 6 Hình 5. Mashup làm việc 6 Hình 6. Tạo một mashup 7 Hình 7. Ứng dụng cho mashup 7 Hình 8. Đăng nhập Google Maps API key 8 Hình 9. Đăng nhập cho tài khoản Amazon Associates 9 Hình 10. Đăng nhập cho tài khoản AWS 10 Hình 11. Google Search API 10 Hình 12. Đăng nhập cho tài khoản Flickr API 11 Hình 13. Flickr photos search 12 Hình 14. Đăng nhập cho tài khoản Flickr API 12 Hình 15. Cross-domain Proxy 14 Hình 16. Hạn chế của cross domain XMLHttpRequest 15 Hình 17. Của cross domain JSON 16 Hình 18. Hoạt động của JSON 18 Hình 19. Lỗi 2044 19 Hình 20. Gọi ra d ữ liệu từ domain đơn unstrusted 3 rd -party. 22 Hình 21. Kết nối đa web service 23 Hình 22. Mashup và các ứng dụng 26 Hình 23. Google Maps API 27 Hình 24. map_api_basic.html 27 Hình 25. map_api_event.html 29 Hình 26. map_api_overlay.html 32 Hình 27. map_api_polyline.html 33 Hình 28. map_api_geocoding.html 33  THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT  AJAX Asynchronous JavaScript and XML API Application Programming Interface CSS Cascading Style Sheets DOM Document Object Model JSON JavaScript Object Noattion HTML Hypertext Markup Languages REST Representational state transfer RSS Really Simply Syndication SOAP Simple Object Access Protocol XHTML Extensible HyperText Markup Language XML Extensible Markup Language XSLT Extensible Stylesheet Language Transformations URL Uniform Resource Locator  1 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. Đề tài ‘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 đó sẽ là phần 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 và phần tài liệu tham khảo.       2 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. AJAX Hầu như chúng ta đều đã biết tới hay thậm chí đang sử dụng nhiều Gmail, Google Map, hay các tiện ích tiện dụng của Flickr. Thì hẳn chúng ta nên biết rằng những tính năng và cách thức tương tác với người dùng nhanh chóng, tiện lợi như vậy mà các trang web này cung cấp chính là do AJAX. AJAX không phải là một ngôn ngữ mới, nó là sự kết hợp của một loạt các công nghệ khác nhau: - XHTML + CSS với vai trò hiển thị thông tin. - Mô hình tương tác và hiể n thị động DOM. - Trao đổi và truy cập/tác động lên thông tin sử dụng XML và XSLT. - Nhận thông tin không đồng bộ với đối tượng XMLHttpRequest. - JavaScript với vai trò kết hợp 4 công nghệ trên lại với nhau. Với AJAX, một file JavaScript có thể liên kết trực tiếp với server mà không cần tải lại trang web. Công nghệ AJAX đã tạo cho ứng dụng Internet nhỏ gọn hơn, nhanh hơn và tương tác người dùng tốt hơn. 1.1.2. 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: [...]... mashup, quá trình của chúng ta sẽ gồm các giai đoạn :   6 Hình 6 Tạo một mashup Tiếp theo chúng ta sẽ tham khảo một số ứng dụng để xây dựng Web Mashup 1.3 Một số ứng dụng để xây dựng Web Mahup Thường các ứng dụng web dùng mashup kết hợp bản đồ với nhiều loại dữ liệu từ nhiều trên web Hình 7 Ứng dụng cho mashup Có một nhận xét rằng chúng đều sử dụng API Và hầu hết các nhà cung cấp dịch vụ API yêu cầu... DỰNG ỨNG DỤNG THỬ NGHIỆM CROSS-DOMAIN AJAX Tương tự các mashup cho ứng dụng nghiệp vụ cũng dựa trên các thư viện API phổ biến có sẵn, như thư viện của Google Maps, để tạo nên những ứng dụng web đơn giản dùng JavaScript kết hợp nhiều nguồn dữ liệu Chương này sẽ đưa ra những nghiên cứu chủ yếu về Google Maps API, như là một kiến thức tìm hiểu cho việc xây dựng ứng dụng thử nghiệm Hình 22 Mashup và các ứng. .. unstrusted web services - Sự cho phép frame truy cập Để giữ những frame khỏi sự giao thoa với mỗi cái khác, sử dụng domain dùng một lần mới đối với mỗi web service cái mà mashup cần tương tác VD: nếu mashup cần chèn hai web service, nó có thể sử dụng   23 webservice1 .mashup. com và webservice2 .mashup. com Cũng gồm các bước sau: • Tạo mediator frame: mashup. com • Tạo unstrusted frame: webservice1 .mashup. com... tới và xem xét 3 website khác nhau Hình 4 Khác nhau giữa ba website – Amazon, Google, eBay Cách chúng làm việc Hình 5 Mashup làm việc Mashup là một thể loại thú vị của ứng dụng web Sự kết hợp của các mô hình dữ liệu, dịch vụ, là sự cung cấp cuối cùng cho sơ sở hạ tầng cần thiết để bắt đầu phát triển ứng dụng có thể thúc đẩy và hợp nhất số lượng lớn thông tin có sẵn trên web Tạo một mashup, quá trình... theo của ứng dụng web JSONRequest được đề xuất như một browser service cho phép dữ liệu trao đổi hai chiều với dữ liệu JSON server Nó trao đổi dữ liệu giữa các script trên các site với JSON server trong trang web Nó được hi vọng rằng trình duyệt sẽ được xây dựng những tính năng trong sản phẩm của họ để làm cho những ưu điểm trong ứng dụng web phát triển Trong thế hệ tiếp theo của ứng dụng web sẽ có... dịch vụ cung cấp cho bạn một ID cho một số ứng dụng khi bạn viết chương trình trong khi những cái khác yêu cầu bạn tự tạo một ID cho mình với mỗi ứng dụng bạn tạo ra   7 Trong khi quá trình đăng ký này nghe có vẻ phức tạp, nhưng thật sự nó chỉ tốn một vài phút để hoàn thành Bạn hãy tham khảo xem một vài ứng dụng sau 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... (thậm chí là giảm) cho các thế hệ tiếp theo của ứng dụng web để phát triển 1.1.3 Thẻ Same-origin không áp dụng cho các thẻ 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... khi mashup bật trình duyệt trong hệ thống đa người dùng cùng với tên miền không tin cậy lẫn nhau như giữa những người sử dụng, thì các trình duyệt ngày nay đã đưa ra cho các nhà phát triển web không đủ lý thuyết để tích hợp nội dung từ nhiều domain: hoặc là cô lập các website không có sự liên lạc hoặc là liên lạc không có sự kiểm soát với sự không cô lập Và khi Ajax xuất hiện trong thế giới ứng dụng web, ... 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... thử nghiệm Hình 22 Mashup và các ứng dụng 3.1 Giới thiệu về Google Maps Google Maps là một dịch vụ của Google, cung cấp các ứng dụng và công nghệ hoàn miễn phí về dịch vụ bản đồ trên web, bao gồm Google Maps website (website về Google Maps), Google Ride Finder (cho phép người lái xe xác định được vị trí và hướng, cách thức để đi đến đích), các bản đồ nhúng trên các website thông qua Google Map API … 3.2 . xây dựng Web Mahup Thường các ứng dụng web dùng mashup kết hợp bản đồ với nhiều loại dữ liệu từ nhiều trên web. Hình 7. Ứng dụng cho mashup Có một nhận xét rằng chúng đều sử dụng API 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. . ‘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,