Khóa luận 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 ID cho mình với mỗi ứng dụng bạn tạo ra.   8 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 đó. 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’. Hình 8. Đă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ố, ...   9 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 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’. Hình 9. Đă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’.   10 Hình 10. Đăng nhập cho tài khoản AWS 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. Hình 11. 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.   11 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 đó. Hình 12. Đă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.   12 Hình 13. Flickr photos search 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. Hình 14. Đăng nhập cho tài khoản Flickr API   13 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.   14 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. Hình 15. 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.   15 Ư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ở. Hình 16. Hạn chế của cross domain XMLHttpRequest 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   16 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. Hình 17. 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). 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   17 ‘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”. 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. JSONRequest.cancel(requestNumber);   18 • 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 Hình 18. Hoạt động của JSON 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   19 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 với đối tượng JSON và các tham số của nó. Hàm Callback 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: Hàm Callback đượ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. Hình 19. 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:   20 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, 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 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ử <!DOCTYPE cross-domain-policy SYSTEM " policy.dtd"> <!DOCTYPE cross-domain-policy SYSTEM " policy.dtd"> <allow-access-from domain="www.mysite.com" to- ports="25" />   21 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) • 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)   22 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. Hình 20. Gọi ra dữ liệu từ domain đơn unstrusted 3rd-party.   23 Tại Hình 2.6, bước đầu tiên (bên trái), communication object từ top frame sẽ được chuyển tới mediator frame, bước thứ hai ( bên phải) chỉ xảy ra sau khi mediator và unstrusted frame thay đổi document.domain thành hậu tố mashup.com Để tạo cài đặt Phrase, chúng ta 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 Hình 21. Kết nối đa web service. Nếu trình duyệt hạn chế về chính sách frame truy cập ( frame access policy), một cấu trúc khung top-mediator-unstrusted (bên trái) nên được sử dụng, nhưng ngược lại thì chúng ta nên sử dụng cấu trúc khung top-unstrusted-access (bên phải). - 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   24 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. • 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ừ   25 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. - 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.   26 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. 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. 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.   27 Hình 23. 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 : Hình 24. 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.   28 • 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. Như đã nói ở phần trên, yourkey là key mà Google Maps API cung cấp cho bạn khi bạn đăng kí cho ứng dụng của mình – và nó là duy nhất đối với bạn. - 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). Toàn bộ bản đồ sẽ được hiện thị với kích cỡ mà thẻ này đã quy định. - Đố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ử ‘new’, đặ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 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 độ điểm hiện thị và một tham số chỉ ra độ phóng đại, chú ý <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();   29 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. Và nhớ rằng, ở đây, hàm "initialize()" đã được viết. 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: Hình 25. map_api_event.html   30 - 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 đó. 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 bản đồ. • 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 bản đồ. • 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 bản đồ. • GscaleControl : một thang đo xuất hiện trên bản đồ. • GmapTypeControl : một button cho phép người sử dụng đảo chiều giữa các loại bản đồ (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 bản đồ: • G_NORMAL_MAP : hiển thị một bản đồ bình thường, như một bản đồ 2D của Google Maps. 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); } });   31 • 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 bản đồ đ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 bản đồ 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: 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ỏ bản đồ. 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 bản đồ đượ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 bản đồ đượ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 bản đồ 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). • Bản đồ 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: map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());   32 Hình 26. map_api_overlay.html - Markers Markers xác định điểm trên bản đồ. 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. 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); });   33 - Polylines GPolyline bao tạo các đường trên bản đồ. 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 bản đồ: Hình 27. 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. - Geocoding Caches Chúng ta sẽ có kết quả (khi bạn chọn ‘Tokyo, Japan’ trên dialog box): Hình 28. map_api_geocoding.html   34 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 tôi 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 khám phá những phương pháp hiệu quả hơn cho cross-domain mang lại sự phát triển hiệu quả hơn cho các lớp ứng dụng web. Tiếp đó mong muốn phát triển thực nghiệm mashup đã xây dựng để tạo nên một website đặc trưng cho riêng mình.   35 TÀI LIỆU THAM KHẢO Tài liệu tiếng anh [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?. Website [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ụ - fault.aspx [16] Shaping the future of secure Ajax mashups (2007) – [17] [18] [19] [20]