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

‐ 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 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 Cách chúng làm việc H1.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. ‐ 14 ‐  1.3 Một số ứng dụng để xây dựng Web Mahup Dưới đây, chúng ta sẽ tham khảo một số ứng dụng để xây dựng Web Mashup. 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. H1.6: Ứ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 ID cho mình với mỗi ứng dụng bạn tạo ra. 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 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 ( ). 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 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ố, ... 1.3.2 Sử dụng Amazon Web Services và Google Search APIs Bạn có thể sử dụng API để tìm kiếm trong cơ sở dữ liệu của Amazon và thực hiện một thẻ mua sắm trong hai cách khác nhau. Với Amazon, trọng tâm là trên dữ liệu bạn truy cập không cần trực tiếp các lời gọi SQL. Với Amazon, bạn cần truy cập tới Web Services API của API – nơi mà dữ liệu Amazon được lưu trữ. Bạn cũng có thể cần thực hiện thẻ mua sắm và khả năng tìm kiếm (và đạt lợi nhuận) bán hàng thông qua trang web của bạn. Dù đơn giản, nhưng nó yêu cầu bạn tạo 3 tài khoản riêng biệt: một tài khoản ‐ 16 ‐  Amazon, một tài khoản Amazon Associate và một tài khoản Amazon Web Services (AWS). Để có một tài khoản Amazon, bạn thật sự không phải làm gì cả, vì nó đơn giản chỉ gồm địa chỉ e-mail và mật khẩu, cùng với những thông tin khác bạn cung cấp. Để đăng kí cho một tài khoản Amazon Associate, ta tìm đến đường link ‘Associates Program’. H1.8: Đăng nhập cho tài khoản Amazon Associates Để đăng kí cho một tài khoản AWS, truy cập vào website và tìm đến link ‘Amazon Web Services’. H1.9: Đăng nhập cho tài khoản AWS ‐ 17 ‐  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 đó. ‐ 18 ‐  H1.11: Đăng nhập cho tài khoản Flickr API Lần đầu tiên sử dụng Flickr, bạn cũng cần phải có được một Yahoo! ID để đạt được quyền truy cập. Trong Mashup phần mềm và thành phần của Web 2.0 được cấu trúc lại, liên kết lại và đạt được một sự thay đổi mẫu mã, thì Flickr bây giờ là một thành phần của Yahoo! Những thông tin ở phía trái của trang web rất hữu ích, nhưng nó là tham chiếu của API phía bên phải – rất quan trọng. API routines được nhóm lại theo các loại. Như vậy, để xây dựng một mashup, bạn cần di chuyển xuống tới các phần hình ảnh và nhấn tới flickr.photos.search để cho phép bạn tìm kiếm danh sách ảnh. H1.12: Flickr photos search ‐ 19 ‐  1.3.4 Sử dụng ebay API eBay API là một ứng dụng phức tạp nhất. Nó đã được mở để third-party phát triển trong một thời gian dài và quy trình (đấu giá) cũng là phức tạp hơn quy trình mua và bán thông thường cho một mức giá cố định. Tại eBay API, bạn sẽ tìm kiếm một mục nào đó sử dụng cả giao diện SOAP và giao diện REST. Và kết quả sẽ được hiển thị trên một bản đồ Google dựa vào vị trí của người bán. Để bắt đầu truy cập tới eBay APIs, bạn đi tới eBay Developer Center tại , bạn đăng kí như một chuyên viên phát triển qua trang web, và sau đó đăng nhập. H1.13: Đăng nhập cho tài khoản Flickr API Mashup trong eBay cho phép bạn tìm kiếm các mục sử dụng các từ khóa. Khi tìm thấy thấy kết quả, nó trả về một văn bản XML. Văn bản này chứa các tiêu đề mỗi mục và giá của chúng cũng như vị trí người bán. Các mục này sau đó được ánh xạ vào một bản đồ của Google với sự đánh dấu được cung cấp thông tin về đường liên kết tới trang eBay. Dữ liệu lấy từ eBay và cũng sử dụng bản đồ Google API. ‐ 20 ‐  CHƯƠNG II. CROSS-DOMAIN AJAX VÀ CÁC GIẢI PHÁP THỰC HIỆN TRONG AJAX Trong 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, những nhà phát triển đã muốn giải quyết một vấn đề trên khi mà cả Firefox và IE(Internet Explorer) đều không cho phép, đó chính là việc gửi một request đến một domain khác với domain hiện hành. Vấn đề đó chính là vấn đề Cross-domain Ajax. Và, cho đến hiện nay, có một vài phương pháp phổ biến để thực hiện gọi cross domain trong Ajax thông qua JavaScript: Proxy, JSON, Flash. 2.1 Cross domain proxy Đây là phương pháp phổ biến nhất, thay vì tạo lời gọi Ajax tới một domain khác, bạn tạo lời gọi tới proxy của bạn, proxy sẽ chuyển cuộc gọi tới domain bên ngoài (ví dụ: Yahoo! Web Services) và lại chuyển dữ liệu trở lại cho ứng dụng client. Bởi vì sự kết nối được tạo tới server của bạn, và dữ liệu cũng được trả lại từ server của bạn, do đó không có sự lo ngại về bảo mật. H2.1: Cross-domain Proxy Tạo dữ liệu xuất hiện trong client để dữ liệu ‘same-origin’, do đó trình duyệt cho phép dữ liệu có thể đọc trở lại một IFRAME, hoặc thông thường hơn, một XMLHttpRequest. ‐ 21 ‐  Ưu điểm: bạn có nhiều sự kiểm soát toàn bộ quá trình, bạn có thể phân tích dữ liệu của server từ xa. Nếu có xảy ra lỗi, bạn có thể xử lý nó. Và cuối cùng bạn có thể ghi lại tất cả các cuộc gọi từ xa, theo dõi cuộc gọi thành công, hay lỗi. Hạn chế : tăng độ trễ của kết nối qua proxy server của mashup. Chi phí băng thông cho mashup author cũng tăng, đặc biệt nếu kích thước của mã mashup là nhỏ so với số lượng của dữ liệu cross-domain được ủy quyền (do thực hiện từ phía server-side). 2.2 Cross domain JSON XMLHttpRequest có một phương thức bảo mật không đủ để hỗ trợ cho thế hệ tiếp 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ó nhiều dữ liệu hơn. Chúng ta muốn đi tới một server, hay bất kì server nào đó và trao đổi dữ liệu, thì XMLHttpRequest đã không đạt được. Đó là một hạn chế trong mô hình bảo mật. XMLHttpRequest bị ràng buộc bởi chính sách Same Origin. Ràng buộc trung gian này chỉ cho kết nối tới server mà đã cung cấp trang cơ sở. H2.2: Hạn chế của cross domain XMLHttpRequest ‐ 22 ‐  Chính sách Same Origin làm vô hiệu hóa những cuộc tấn công từ bên ngoài, nhưng nó cũng chống lại mảng lớn hơn việc sử dụng hợp pháp. Nó nên có khả năng cho một script trong trang truy cập đến các server khác không làm hại đến bảo mật của người sử dụng hoặc tổ chức đó. JSON là một dạng trao đổi dữ liệu dựa trên tập JavaScript an toàn. JSON có thể đại diện cho cấu trúc dữ liệu đơn giản hoặc phức tạp. JSON không đại diện cho hàm hoặc biểu thức. Nó là một dữ liệu rất chặt chẽ, nó có quy tắc cú pháp riêng, do vậy bạn có thể dễ dàng nhận biết đó có phải là tài liệu JSON không. H2.3: Của cross domain JSON JSONRequest là một đối tượng JavaScript toàn cục, nó cung cấp ba method: post, get, cancel. 2.2.1 JSONRequest.post JSONRequest.post là một HTTP post của chuỗi đối tượng hoặc mảng JavaScript, nhận những phản hồi, và phân tích chúng thành giá trị JavaScript. Nếu phân tích thành công, nó sẽ trả lại giá trị của script request. Khi tạo request, không có chứng thực hay cookie được gửi (nếu gửi kèm cookie, request sẽ bị lỗi). ‐ 23 ‐  JSONRequest service chỉ có thể sử dụng để gửi và nhận giá trị JSON- encoded. JSONRequest chứa bốn tham số: - url (string) : URL để POST tới. - send (object) : đối tượng JavaScript hoặc mảng để gửi như dữ liệu POST. - done (function(requestNumber, value, exception)) : Hàm được gọi khi request được hoàn thành. Nếu request thành công, hàm sẽ nhận số request ‘requestNumber’ và giá trị ‘value’ trả về. Nếu nó không thành công, nó sẽ nhận số request ‘’ và một đối tượng ngoại lệ ‘exception’. - timeout (number) : số mili giây để đợi cho phản hồi. 2.2.2 JSONRequest.get JSONRequest.get là một HTTP get request, lấy phản hồi, và phân tích chúng thành một giá trị JavaScipt. Nếu phân tích thành công, nó sẽ trả lại giá trị script đã request. Khi request, không có chứng thực và cookie được gửi. Và như trên, nó cũng chỉ được sử dụng với giá trị JSON-encoded. JSONRequest.get cần ba tham số: - url (string) : URL để GET về. - done (function(requestNumber, value, exeption)): Hàm được gọi khi request hoàn thành. Nếu request thành công, hàm sẽ nhận số request ‘requestNumber’ và giá trị ‘value’ trả về. Nếu nó không thành công, nó sẽ nhận số ‘requestNumber’ và một đối tượng ngoại lệ ‘exeption’. - timeout (number): số mili giây để đợi cho sự phản hồi. 2.2.3 JSONRequest.cancel Một request có thể bị xóa bởi JSONRequest.cancel với số request. Nó không trả lại gì cả. Không có gì đảm bảo rằng yêu cầu sẽ không được gửi tới server khi lệnh xóa request được tạo: - Nếu request vẫn trong hàng đợi, nó sẽ bị xóa từ hàng đợi. - Nếu request trong tiến trình, một sự thử sẽ được tạo để loại bỏ nó. - Nếu request không được tìm thấy, thì lệnh trên sẽ được bỏ qua.Khi thông báo được xóa thành công, hàm callback ‘done’ của request sẽ được gọi với một thông điệp ngoại lệ của “cancelled”. JSONRequest.cancel(requestNumber); ‐ 24 ‐  2.2.4 Bảo mật - JSONRequest có một vài tính năng cho phép nó được miễn chính sách Same Origin. • JSONRequest không gửi hoặc nhận cookie hoặc password trong HTTP headers. Điều này tránh trường hợp lỗi chứng thực. • JSONRequest chỉ làm việc với tài liệu JSON. Một request sẽ bị lỗi nếu server không phản hồi tới POST với tài liệu JSON. • Phản hồi sẽ bị từ chối trừ phi chúng chứa một loại nội dung JSONRequest. Điều này làm cho nó không thể sử dụng JSONRequest để lấy dữ liệu từ server không an toàn. • JSONRequest có rất ít dữ liệu lỗi. • JSONRequest tích lũy độ trễ ngẫu nhiên trước khi hành động trên các request mới khi các request trước đó bị lỗi. Điều này làm vô tác dụng tấn công phân tích thời gian và tấn công từ chối dịch vụ. JSONRequest chỉ làm một việc: nó trao đổi dữ liệu giữa các script tại trang web với JSON server tại web. - JSONRequest cho phép kết nối, nhưng với một số hạn chế: • Content-type theo cả hai hướng application/jsonrequest. • Dữ liệu thân POST sẽ trong định dạng JSON. • Sự phản hồi dữ liệu sẽ trong định dạng JSON. • Kí tự mã hóa theo hai hướng là UTF-8. 2.2.5 Hoạt động của JSON H2.4: Hoạt động của JSON ‐ 25 ‐  Bước1: Browser yêu cầu trang HTML từ HTTP server ở domain: www.domain-1.com Bước2: Trang HTML được lấy về ở bước1 chứa JavasCript có nhiệm vụ trực tiếp browser để yêu cầu file JavaScript ở một HTTP server thứ hai trên domain: www.domain-2.com Bước3: JavaScript lấy về từ bước2 được thực thi ở browser, nó thay đổi các thành phần của trang web và có liên kết tới các JavaScript khác. Bước4: JavaScript mới này sẽ gọi và yêu cầu được cung cấp dịch vụ. Sau khi yêu cầu được thực hiện, server sẽ gửi trả lại hàm JavaScript callback method với JSON object và các tham số của nó. Callback method làm cho mối quan hệ giữa JSON client và dịch vụ trở nên linh hoạt hơn. Bước5: Callback method được thực thi và nội dung trang web được cập nhật. 2.3 Cross domain sử dụng Flash Phương pháp này ít phổ biến hơn phương pháp proxy, nó khai khác khả năng truyền thông cross-domain mà flash có thể đưa ra. Giống như JavaScript, Flash chỉ cho phép request tới cùng domain, nhưng nó cũng cho phép request tới domain third party mà cho phép nó sử dụng file crossdomain.xml. Nếu bạn làm việc rất nhiều với các file Flash, thì một số phiên bản cũ của Flash yêu cầu chính sách để truyền thông giữa các domain. Ví dụ, nếu bạn có một file đang tải nội dung từ domain khác, bạn sẽ gặp phải lỗi. H2.5: Lỗi 2044 File crossdomai.xml là một file XML đơn giản đưa cho Flash Player quyền để truy cập dữ liệu từ domain khác, nó được đặt tại root của webserver: ‐ 26 ‐  Như bạn chú ý ở trên, dấu hoa thị (*) có nghĩa rằng tất cả. Hoặc để tạo một số giới hạn 2.4 Subspace Subspace - một cơ chế truyền thông đa miền (cross-domain) cho phép truyền thông một cách hiệu quả qua các domain mà không mất tính bảo mật – có thể cung cấp sự truyền thông tin cậy như ban đầu cho web mashup. Sử dụng JavaScript, những tính năng bảo mật khác nhau được áp dụng trong những data-passing phare khác nhau, trong các trình duyệt khác nhau: Cross-subdomain communication. Cross-domain code Authorization. Cross-domain frame access. - Truyền thông cross-subdomain Đối với JavaScript, một site được định danh như là bộ ba: protocol, hostname, port, ví dụ: và => site khác và => cùng site <!DOCTYPE cross-domain-policy SYSTEM " policy.dtd"> <!DOCTYPE cross-domain-policy SYSTEM " policy.dtd"> <allow-access-from domain="www.mysite.com" to- ports="25" /> ‐ 27 ‐  Sử dụng JavaScript, bạn có thể phân tách dữ liệu giữa các domain có cùng một hậu tố. Nếu hai domain muốn chia sẻ giao tiếp một hậu tố thống nhất, chúng ta sử dụng thuộc tính JavaScript document.domain để cung cấp sự truy cập đầy đủ tới mỗi domain. Ví dụ: a.example.com và b.example.com có thể được thay đổi biến document.domain thành example.com, cho phép chúng chuyển dữ liệu và mã JavaScript khi chạy. Hạn chế: hậu tố được thay đổi không quá dài để thành ‘top level domain name’ (VD: ‘.com’) ngăn sự truyền thông qua domain bất kì. - Sự chấp nhận mã cross-domain Chính sách same-origin ngăn chặn các mã khỏi việc chuyển giữa các domain. Một hàm được định nghĩa trong một domain sẽ không được gọi bởi mã trong domain khác, do đó không có sự mơ hồ về domain đã thực hiện hoạt động đó khi sử dụng bảo mật same-origin để kiểm tra. Closure: hàm được định nghĩa trong thân hàm khác, tham chiếu tới biến trong vùng khi nó được tạo, chứ không phải khi nó được gọi. Bằng việc cài đặt biến document.domain, một trang web có thể chuyển tiếp một closure tới một frame trong những domain khác. Có hai lựa chọn: Authorization động: closure kế thừa các đặc quyền bảo mật của trang mà đã gọi nó. Phương pháp tiếp cận này tương ứng cho đường link kiểm soát của ngăn xếp gọi. (Opera và Sapari). VD: khi www.site1.com gọi tài liệu từ www.site2.com, trình duyệt thi hành tính năng site1 và kiểm soát nó. Authorization tĩnh: closure kế thừa quyền bảo mật của trang nơi mà closure được tạo. Sự tiếp cận này có thể được thực hiện bởi đường link truy cập của hàm thay thế link kiểm soát. (IE và Firefox). VD: khi www.site1.com gọi tài liệu từ www.site2.com, trình duyệt sẽ gọi tính năng site2 đã được thi hành trên toàn bộ tài liệu. Authorization động có thể được mô phỏng trong một trình duyệt authorization tĩnh bởi việc gọi eval dựa trên dữ liệu chuỗi nhận từ những site khác nhưng ngược lại thì không đúng: authorization động không thể dễ dàng mô phỏng trong trình duyệt authorization tĩnh. - Truy cập frame cross-domain Có một vài chính sách browser : • Quyền (Firefox và Safari) ‐ 28 ‐  • Hạn chế (Opera) • Khả năng cấu hình, “Yes” là mặc định (IE6) • Cấu hình nhưng bị hạn chế, “No” là mặc định (IE7) 2.4.1 Subdomain Một vài site muốn loại bỏ ‘www’ ra khỏi subspace của mình, ví dụ www.mashup.com thành mashup.com. Khi chạy site tại www.mashup.com và tại mashup.com , có thể chúng ta coi như cùng một tên và thật sự, chúng cùng chỉ tới một nơi. Nhưng để gọi trong một Ajax, nó xét đến domain. Do đó, nếu bạn tạo một lời gọi Ajax tới cùng một server, không nên đặt mã domain như một thành phần mà như một đường dẫn. Hạn chế của Subspace: frame có thể khởi động một sự tấn công denial- of-service trên trình duyệt. Ví dụ, một web service không đúng có thể định hướng trình duyệt xa mashup site, hoặc hiển thị một chuỗi vô tận hộp báo động, ngăn người sử dụng không sử dụng được site. Một khả năng có thể khác là nguồn dữ liệu hoặc gadget không tin cậy có thể xuất hiện một cửa sổ mới yêu cầu người sử dụng cho nhãn quyền của họ. Vì đó, nó là quan trọng để subdomain được đặt tên và người sử dụng có khả năng xác định rõ ràng web service đã kiểm soát nó 2.4.2 Đơn Web Service - Cài đặt Phrase Để tạo một kênh subspace giữa hai site, www.mashup.com và webservice.mashup.com, thực hiện việc giao thức cài đặt cái đưa ra trang cả hai domain cùng truy cập tới đối tượng subspace javascript. Giao thức cài đặt dưới đây (miêu tả từ hình 2.6) là được hiện chỉ một lần khi trang đầu tiên được tải, và không cần thiết để khởi động lại khi cần dữ liệu yêu cầu nhiều hơn. Mediator frame là một subdomain của frame chính và nó giao tiếp dễ dàng (document.domain); Một frame khác được tạo dưới mediator frame và giữ dữ liệu được gửi từ unstrusted website. Frame này giao tiếp với mediator frame nhưng không phải là frame chính; Mediator frame có thể giao tiếp với cả hai, unstrusted frame và top frame-frame chính. ‐ 29 ‐  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 (phải) chỉ xảy ra sau khi mediator và unstrusted frame thay đổi document.domain thành hậu tố mashup.com Thực hiện lần lượt các bước: • Tạo mediator frame: www.mashup.com • Tạo unstrusted frame: webservice.mashup.com • Chuyển đối tượng truyền trông JavaScript. - Thay đổi dữ liệu Tại đây, chúng ta sẽ phân tích các trình duyệt với các phương pháp hỗ trợ đối với closure: IE và Firefox hỗ trợ phương pháp authorization tĩnh: do vậy closure cung cấp một cơ chế liên lạc dễ dàng giữa top frame và unstrusted frame. Opera và Safari cung cấp authorization động đối với closure: nên nó không hỗ trợ hệ thống gọi ngược. Hệ thống đó sẽ được chạy với đặc quyền bảo mật của trang đã gọi nó, chứ không phải của trang đã tạo nó. 2.4.3 Đa Web Service ‐ 30 ‐  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 - Hạn chế frame truy cập Chúng ta tạo một cấu trúc khung lặp mới cho mỗi web service hoặc mỗi gadget cần chèn. Khi đó, sơ đồ trong hình 2.6 có thể trực tiếp được lắp vào một đa 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 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 (nhưng không để nó trong mediator frame, chúng ta để nó trong top frame. Do đó, mediator frame và unstrusted frame là anh em) • Tạo access frame: thêm access frame trong unstrusted frame, và sau đó thay đổi domain của nó tới mashup.com. • Chuyển tiếp đối tượng truyền thông JavaScipt: Access frame đưa đối tượng này vào trong container nó chia sẻ với unstrusted frame. • Hủy: unstrusted frame vứt bỏ access frame, cái mà không còn cần thiết. Unstrusted frame có Subspace object nó cần liên lạc với top frame. ‐ 31 ‐  • Lặp lại đối với tất cả các gadget: việc xử lý được lặp lại cho tất cả các unstrusted web service hoặc gadget cần được chèn; mediator frame không còn cần thiết và có thể bị xóa bỏ. • Tải unstrusted content: tất cả gadget có kênh liên kết Subspace tới top frame, nhưng không cái nào có thể truy cập được tới cái khác. Từ đó, cài đặt phrase được hoàn thành, top frame có thể xử lý an toàn các lệnh để tải unstrusted content, như cross-domain tag, trong mỗi frame. 2.5 Giải pháp trong thế hệ tiếp theo 2.5.1 FlashXMLHttpRequest Phương pháp này thay thế việc sử dụng file crossdomain.xml, chúng ta sử dụng một FlashXMLHttpRequest proxy. Nó sử dụng một file SWF nhỏ để tạo request GET và POST thay cho bạn. Phương pháp này tốt hơn sử dụng crossdomain.xml vì đây là các đối tượng, thêm nữa, phiên bản SWF hỗ trợ hầu hết các trình duyệt (và sớm hơn so với Flash). Hạn chế: (khi được sử dụng cùng phiên bản với Flash) như khả năng gửi và nhận mã trạng thái hoặc HTTP header, hoặc xử lý HTTP Puts và Deletes. 2.5.2 ContextAgnosticXMLHttpRequest Có thể sử dụng để thay thế XMLHttpRequest trong lời gọi cross domain. ContextAgnosticXMLHttpRequest có khả năng chuyển chi tiết bảo mật tới ứng dụng cho phép gọi dịch vụ cụ thể trong domain khác. Một số trường hợp cơ bản: Một domain được cung cấp bởi somehost.myFirstDomain.com có thể lấy dữ liệu XML qua HTTP từ somehost.mySecondDomain.com và mở rộng, một document được cung cấp bởi host1.mydomain.com có thể lấy dữ liệu XML qua HTTP từ host2.domain.com. Request sẽ là: - Cho phép một document thực hiện một HTTP request tới một host ngoài. - Không gửi bất kì cookie nào trong request . - Loại bỏ set-cookie: chỉ thị trong HTTP response từ host nguồn. ‐ 32 ‐  - Bỏ qua bất kì chứng thực HTTP cơ bản nào, và chỉ gửi cho những cái được thiết lập rõ ràng. - Luôn luôn gửi một HTTP tham chiếu chính xác: request header có giá trị là URI của tài liệu thực hiện request. ‐ 33 ‐  CHƯƠNG III. XÂY 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. H3.1: 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 Giới thiệu về Google Maps API Google Maps API cho phép bạn nhúng Google Maps trong trang web của bạn với mã JavaScript. API cung cấp một số tiện ích để thao tác bản đồ và thêm nội dung tới bản đồ thông qua một loạt các dịch vụ, cho phép bạn tạo ứng dụng bản đồ trên website của bạn. ‐ 34 ‐  H3.2: Google Maps API 3.2.1 Maps API Basics Phần tử cơ bản để bắt đầu hiểu về Google Maps API application là phần tử ‘map’. Ví dụ đơn giản sau hiển thị một trang web chứa bản đồ 1000x500 với trung tâm là Hà Nội, Việt Nam : H3.3: map_api_basic.html Trong thực hiện, chúng ta có một số điều cần lưu ý: • Thẻ ‘script’ thực hiện việc chèn Maps API. • Phần tử ‘div’ để chứa Map. ‐ 35 ‐  • Hàm JavaScript để tạo đối tượng “map”. • Chúng ta khởi động đối tượng ‘map’ đó từ sự kiện ‘onLoad’ của thẻ ‘body’. Để hiểu sâu hơn, chúng ta có những bước sau: - Thực hiện việc load Google Maps API Trang web của bạn phải chứa một script trỏ tới URL “” , nó chứa những biểu tượng và định nghĩa cần thiết cho sử dụng Google Maps API. - Phần tử Map DOM Chúng ta tạo ra một phần tử ‘div’ và tham chiếu tới phần tử này trong DOM của trình duyệt (document object model). - Đối tượng cơ bản – Gmap2 Ở đây chúng ta tạo một đối tượng ‘map’ sử dụng toán tử ‘’, đặc trưng một bản đồ là lớp Gmap2. Đối tượng của class định nghĩa một bản đồ trên một trang web. Khi bạn tạo một đối tượng ‘map’ mới, bạn xác định một nốt DOM mới trong trang (thường sử dụng phần tử ‘div’) như một container cho bản đồ. Sau đó chúng ta tham chiếu tới phần tử thẻ ‘div’ này thông qua document.getElementById(). - Khởi động map <script src=" " type="text/javascript"> <div id="my_map " style="width: 1000px; height: 500px"> var map = new GMap2(document.getElementById("my_map ")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); ‐ 36 ‐  Một khi chúng ta đã tạo một map qua hàm tạo Gmap2, chúng ta phải khởi động nó. Việc này được hoàn thành với việc sử dụng hàm setCenter(). Hàm setCenter() yêu cầu một GlatLng chỉ ra tọa độ và một tham số chỉ ra độ phóng đại, chú ý rằng hàm này phải được gửi trước tất cả các hàm trên map, bao gồm thiết lập và các thuộc tính khác của map. Chúng ta gọi hàm setUIToDefault() để thiết lập giao diện bản đồ, bao gồm việc chuyển động quay và phóng to - thu nhỏ, lựa chọn loại bản đồ, ... - Thực hiện loading map Để đảm bảo bản đồ được đặt trên trang sau khi trang được load, chúng ta chỉ thực hiện hàm khi mà phần tử của trang HTML nhận được một sự kiện onload. Hàm Gunload() là một hàm chức năng thiết kế để ngăn rò rỉ bộ nhớ. - Vĩ độ và Kinh độ Đối tượng GLatLng cung cấp một cơ chế cho phép bạn tham chiếu tới các vị trí của bản đồ. Bạn xây dựng đối tượng GlatLng, thông qua tham số {vĩ độ, kinh độ} như được sử dụng trong bản đồ. 3.2.2 Maps API Events Trong trình duyệt, sự tương tác của người sử dụng chuột và bàn phím tạo nên các sự kiện được lan truyền trong DOM. Khi những sự kiện được kích hoạt, một ‘event listeners’ sẽ nhận sự kiện và thực hiện chương trình tương ứng. Google Maps API thêm vào những mô hình sự kiện này bởi định nghĩa sự kiện tùy thích cho đối tượng Maps API. Sự kiện được thêm vào: ‐ 37 ‐  H3.4: map_api_event.html - Event Listensers Để tạo thông báo của sự kiện khi bạn nhấn chuột, chúng ta sử dụng Gevent.addListener(). Hàm đó sử dụng một đối tượng, một sự kiện để lắng nghe (ở đây là ‘click’ chuột) và một hàm để tọi khi sự kiện xảy ra. Trong ví dụ trên, để chắc chắn sự kiện ‘click’ xảy ra trên bản đồ bằng việc kiểm tra biến ‘latlng’. Sau đó chúng ta mở một cửa sổ thông tin cho việc click đó. GEvent.addListener(map,"click", function(overlay,latlng) { if (latlng) { var myHtml = "The GLatLng value is: " + map.fromLatLngToDivPixel(latlng) + "" + " at zoom level " + map.getZoom(); map.openInfoWindow(latlng, myHtml); } }); ‐ 38 ‐  3.2.3 Maps API Controls Ở ví dụ trên chúng ta đã thêm một số phần tử cho phép tương tác của người sử dụng qua bản đồ. Chúng được biết đến như ‘controls’, và là lớp con của lớp ‘Gcontrol’. Bạn có thể sử dụng một số ‘controls’ cơ bản mà Maps API xây dựng: • GLargeMapControl : bộ điều chỉnh (cỡ lớn) cho sự quay/phóng to- nhỏ, nó hiển thị trên cùng bên trái của map. • GSmallMapControl : bộ điều chỉnh sự (cỡ nhỏ) quay/phóng to-nhỏ, hiển thị trên cùng bên trái của map. • GsmallZoomControl : một bộ điều chỉnh chỉ phóng to-nhỏ, nó sẽ hiển thị từng mức độ phóng trên map. • GscaleControl : một thang đo map. • GmapTypeControl : một button cho phép người sử dụng đảo chiều giữa các loại map (giống như Bản đồ và Vệ tinh) • GOverviewMapControl : một bản đồ được rút gọn ở góc trái dưới cùng của màn hình. - MapType Controls Mặc định, Google Maps API cung cấp 3 loại map: • G_NORMAL_MAP : hiển thị một map bình thường, như một bản đồ 2D của Google Maps. • G_SATELLITE_MAP : hiển thị một bản đồ ảnh. • G_HYBRID_MAP : hiển thị một sự pha trộn các ảnh và các tính năng nổi bật ( đường, tên thành phố). Bạn có thể thay đổi map đang sử dụng bằng Gmap2.removeMapType() hoặc thêm chúng với Gmap2.addMapType(). - Thêm Controls tới Map Bạn thêm controls tới map bằng hàm addControl(). Như ví dụ được đưa ra ở trên chúng ta cũng có thể thực hiện nhiều lần việc thêm này: map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); ‐ 39 ‐  3.2.4 Map Overlays Overlay là một đối tượng trên bản đồ gắn với vĩ độ/tung độ khi họ di chuyển hoặc kéo, phóng to-thu nhỏ map. Overlays phản ánh các đối tượng bạn thêm vào bản đồ để thiết kế các điểm, các đường và các vùng. Maps API có một số loại overlays: • Điểm trên map được hiển thị sử dụng ‘markers’ – đối tượng của lớp GMarker, và thường hiển thị một biểu tượng tùy thích. • Đường trên map được hiển thị sử dụng ‘polylines’ (tập các điểm) – đối tượng của lớp Gpolyline. • Vùng trên map hiển thị như ‘polygons’ (vùng với hình dạng bất kì) hoặc ‘ground overlays’ (vùng là hình chữ nhật). • Map sẽ được hiển thị sử dụng ‘tile overlay’. Bạn có thể sửa đổi nó bằng cách sử dụng GTileLayerOverlay hoặc tạo mới sử dụng GMapType. Mỗi overlay thực hiện một giao diện Goverlay. Overlay được thêm vào bản đồ sử dụng Gmap2.addOverlay() và có thể xóa bỏ sử dụng GMap2.removeOverlay(). Bạn sẽ nhìn thấy: H3.5: map_api_overlay.html - Markers ‐ 40 ‐  Markers xác định điểm trên map. Chúng ta sử dụng G_DEFAULT_ICON để xác định icon tùy ý, GMarker cần GLatLng và một đối tượng tùy chọn GMarkerOptions như các biến. - Marker có thể di chuyển Ở ví dụ trên, chúng ta thực hiện cho marker có thể nhận được ‘click’ và có thể được kéo đến một ví trí mới. Những sự kiện có thể xảy ra trên marker: click, dragstart, drag, dragend. Và để những sự kiện này có tác dụng, chúng ta phải khởi động chúng. - Icons Một số lượng các image khác nhau có thể tạo nên một icon trong Maps API. Một Icons đơn giản nhất dựa trên kiểu G_DEFAULT_ICON. Bạn tạo một icon từ kiểu này cho phép bạn thay đổi nhanh chóng icon mặc định chỉ với một vài thao tác. - Polylines GPolyline bao tạo các đường trên map. Một GPolyline bao gồm một chuỗi các điểm và tạo thành chuỗi các đoạn có thể liên kết điểm theo thứ tự, Ta vẽ được đường trên map: GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("Marker " + letter); }); GEvent.addListener(marker, "dragstart" , function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("Bạn vừa di chuyển..." + letter); }); ‐ 41 ‐  H3.6: map_api_polyline.html 3.2.5 Google Maps API Services - Geocoding Geocoding là quá trình chuyển đổi địa chỉ vào một tọa độ địa lý. Google Maps API bao gồm Geocoding services mà có thể được truy cập trực tiếp qua HTTP Request hoặc bằng cách sử dụng một đối tượng GClientGeocoder. Đối tượng GClientGeocoder - Geocoding Caches Chúng ta sẽ có kết quả (khi bạn chọn ‘Tokyo, Japan’ trên dialog box): H3.7: map_api_geocoding.html ‐ 42 ‐  KẾT LUẬN Mashup đã thực sự tạo nên lớp ứng dụng mới hiệu quả và hữu ích trong môi trường ứng dụng web. Luận văn đã giúp hiểu được tổng quan cross-domain và các giải pháp cho cross-domain trong ajax. Đồng thời, bài luận cũng nêu được tính quan trọng và cần thiết trong việc tìm hướng giải quyết đối với cross-domain, phục vụ cho mashup – một lớp ứng dụng hữu ích trong thế giới web. Cùng với việc nghiên cứu, khóa luận đã áp dụng được lý thuyết vào để xây dựng lên một ứng dụng cho mashup với bản đồ trực tuyến tuy đơn giản nhưng đã hướng tới mục đích của đề tài. Chưa có phương pháp thật sự hiệu quả để gọi cross-domain sử dụng ajax, vì vậy hướng phát triển tiếp theo cho việc nghiên cứu của luận văn sẽ mong muốn phát hiện ra những phương pháp hiệu quả hơn cho cross-domain. Tiếp đó là phát triển ứng dụng mashup để xây dựng một website đặc trưng cho riêng mình. ‐ 43 ‐  TÀI LIỆU THAM KHẢO [1] Collin Jackson và Helen J.Wang (2007) - Subspace: Secure Cross-Domain Communication for Web Mashups. [2] Jesse Feiler - How to do Everything with Web Mashups 2.0. [3] Jon Howell, Collin Jackson, Helen J.Wang và Xiaofeng Fan - MashupOS: Operating System Abstractions for Client Mashups. [4] Head, Indigenous Studies Portal University of Saskatchewan Library (2007) - What’s a Mashup & Why Would I Want One?. [5] AJAX và vấn đề cross-domain - [6] API - [7] Cross-domain-ajax - [8] Cross Domain AJAX: A quick summary - [9] Cross-domain AJAX - cross-domain-ajax.htm [10] Calling Cross Domain Web Services in AJAX - talk.com/dotnet/asp.net/calling-cross-domain-web-services-in-ajax/ [11] Giải quyết vấn đề cross-domain của AJAX - [12] Introduction to Cross-Domain Ajax - [13] JSONRequest - [14] Make Mashups Talk Across Domains(2006) – [15] Mashup cho ứng dụng nghiệp vụ - s/57/Default.aspx [16] Shaping the future of secure Ajax mashups (2007) – [17] [18] [19] [20] ‐ 44 ‐