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

‐ 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! ‐ 2 ‐  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ẻ ................................................................................................................... ‐ 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 ‐  ‐ 4 ‐  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 - ‐ 5 ‐  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 ‐  ‐ 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 ‐  ‐ 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 ‐ 8 ‐  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. ‐ 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 Ứ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 ‐ 10 ‐  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. 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ẻ 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 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.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 Đố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 ‐ 12 ‐  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. 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 d