Cross - Domain ajax cho các ứng dụng web mashup

ĐẠ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ẻ ....................................................................................................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 3rd-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:   3 Hình 1. XmlHttpRequest với Ajax Ứng dụng Ajax sử dụng mẫu đối tượng XMLHttpRequest có thể chỉ tạo request tới cùng domain chúng định vị. Điều đó bởi vì chính sách bảo mật cross-domain của JavaScript sandbox và nó có thể tránh khỏi tổn thương cross-site. Đối tượng XMLHttpRequest không cho phép gọi các mã từ một domain trong một web server khác. Hiện tại, mashup bao gồm việc gọi web service từ API được tạo sẵn bởi các công ty như Google, Flickr, Yahoo, ... Nó có nghĩa rằng một lời gọi luôn luôn phải tạo cross-domain, nếu không bạn không thể thực hiện chúng. 1.1.2. Chính sách Same-Origin Trình duyệt sử dụng cookie như một phương pháp để xác thực người sử dụng duy nhất, và để thực hiện giao diện phù hợp với người sử dụng đó. Để cookie có thể được sử dụng với mục đích như vậy, trình duyệt phải giữ cho cookie bí mật với các site khác. Do đó, cookie chỉ được gửi trong cùng một site đã thiết lập chúng, và chính sách như vậy được biết đến gọi là ‘Chính sách Same-Origin’. Nó cũng có nghĩa rằng – “chỉ site chứa một vài thông tin trong trình duyệt mới có thể đọc hoặc chỉnh sửa thông tin đó”. Điều này có nghĩa là phần lớn không thể tải script từ một domain sang domain khác. Ví dụ những hành động sau bị cấm: - Sử dụng một XMLHttpRequest() đến một domain khác (thành phần cốt lõi của Ajax). - Truy cập hoặc sửa đổi DOM của một hoặc một có một thuộc tính src với domain khác. - Truy cập hoặc sửa đổi window (hoặc tab) tại location khác.   4 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. 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 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. Gadget Aggregator Gadget aggregator như Microsoft Windows Live, Google Personalized Homepage, thực hiện gộp các nội dung tương tác người dùng chọn từ các nguồn khác nhau thành một trang đơn chính; và các Gadget bao gồm cả HTML và JavaScript, nó được thiết kế để có thể chèn vảo trong một trang gadget aggregator. Các công cụ này nằm trong một trang để cung cấp thông tin cần thiết tới người sử dụng, và nó ở phía client-side của một vài web service. 1.2. Giới thiệu về Mashup Trình duyệt web hiện nay đã được thiết kế để dễ dàng hơn và an toàn hơn trong lấy dữ liệu từ nhiều nguồn vào trong một trang. Mashup là website hoặc ứng dụng web mà phối hợp từ nhiều hơn một nguồn vào trong một trang hợp nhất. Cũng như bạn hiểu mashup trong âm nhạc là một bản audio hay video được biên soạn từ những bản ghi khác, thường là từ các phong cách nhạc khác nhau. Ví dụ: Digg.com   5 Đối với phát triển web, mashup là một ứng dụng web phối hợp dữ liệu từ một hoặc nhiều nguồn vào một bộ công cụ. Server tạo các request tới mỗi nguồn nội dung, chuyển giao thông tin nó nhận được, và phối hợp kết quả trong một trang để gửi tới trình duyệt. Hình 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. Hình 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   6 Amazon (ví dụ: giá những cuốn sách), so sánh chúng với trên trang 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. 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 của chúng ta sẽ gồm các giai đoạn :   7 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 bạn phải có một developer/application ID, một tài khoản người dùng hoặc dịch dịch vụ của họ, hoặc cả hai. Một vài 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 I