cross-domain ajax cho các ứng dụng mashup

luận văn về cross-domain ajax cho các ứng dụng mashup

LỜI CẢM ƠN

Trong thời gian nghiên cứu và làm khóa luận, em xin chân thành cảm ơn

thầy giáo hướng dẫn Nguyễn Hải Châu đã giúp đỡ em hoàn thành tốt đề tài

khóa luận tốt nghiệp Bên cạnh đó, em xin chân thành cảm ơn các thày cô giáo trong khoa Công Nghệ Thông Tin - trường Đại Học Công Nghệ - ĐHQGHN

đã giảng dạy và trang bị cho em những kiến thức cơ bản trong học tập nghiên cứu khoá luận cũng như trong công việc sau này

Những lời động viên, khích lệ từ gia đình, sự chia sẻ, học hỏi từ bạn bè cũng đã góp phần rất nhiều cho khóa luận tốt nghiệp của em đạt kết quả tốt hơn

Do trình độ hạn chế nên trong quá trình làm đồ án khó tránh khỏi những thiếu sót, em rất mong sự chỉ bảo thêm của thày cô giúp em hoàn thành và đạt kết quả tốt hơn

Em xin chân thành cảm ơn!

TÓM TẮT KHÓA LUẬN TỐT NGHIỆP

Ngày nay, mashup ngày càng trở nên thịnh hành theo trào lưu Web 2.0 Mashup cho phép mọi người thể hiện khả năng sáng tạo bất tận bằng cách ‘nối’ hai hay nhiều ứng dụng web lại với nhau Và nếu có chính sách kiểm soát thích hợp, mashup có thể tạo nên một lớp ứng dụng mới hiệu quả và hữu ích trong rất nhiều môi trường Để mashup dữ liệu từ các nguồn khác nhau đó, chúng ta phải thực hiện cross-domain AJAX Nhưng để cross-domain được, không phải

là việc dễ vì yêu cầu bảo mật dữ liệu và yêu cầu trang web đạt được những tính năng đầy đủ phải được hài hòa

Hiện có một số phương pháp cho việc cross-domain Và khóa luận

‘Cross-domain ajax cho các ứng dụng mashup’ trình bày những nghiên cứu

tổng thể về mashup và domain ajax, những cách thức để thực hiện 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

cross-MỤC LỤC

MỤC LỤC CÁC SƠ ĐỒ ‐ 5 ‐ 

THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT ‐ 7 ‐ 

LỜI MỞ ĐẦU ‐ 8 ‐ 

CHƯƠNG I ‐ 9 ‐ 

CROSS-DOMAIN AJAX VÀ ‐ 9 ‐ 

ỨNG DỤNG ĐỂ XÂY DỰNG WEB MASHUP ‐ 9 ‐ 

1.1 Giới thiệu chung về Cross-Domain Ajax - 9 -

1.1.1  XMLHttpRequest ‐ 9 ‐ 

1.1.2  Chính sách Same-Origin ‐ 10 ‐ 

1.1.3  Thẻ <script> ‐ 11 ‐  

1.1.4  AJAX ‐ 11 ‐  

1.2 Giới thiệu về Mashup - 11 -

1.3 Một số ứng dụng để xây dựng Web Mahup - 14 -

1.3.1 Sử dụng Google Maps API ‐ 14 ‐ 

1.3.2  Sử dụng Amazon Web Services và Google Search APIs ‐ 15 ‐ 

1.3.3  Sử dụng Flickr API ‐ 17 ‐ 

1.3.4  Sử dụng ebay API ‐ 19 ‐ 

CHƯƠNG II ‐ 20 ‐ 

CROSS-DOMAIN AJAX và ‐ 20 ‐ 

C ÁC GIẢI PHÁP THỰC HIỆN TRONG AJAX ‐ 20 ‐ 

2.1 Cross domain proxy - 20 -

2.2 Cross domain JSON - 21 -

2.2.1 JSONRequest.post ‐ 22 ‐ 

2.2.2 JSONRequest.get ‐ 23 ‐ 

2.2.3 JSONRequest.cancel ‐ 23 ‐ 

2.2.4 Bảo mật ‐ 24 ‐ 

2.2.5 Hoạt động của JSON ‐ 24 ‐ 

2.3 Cross domain sử dụng Flash - 25 -

2.4 Subspace - 26 -

2.4.1 Subdomain ‐ 28 ‐ 

2.4.2 Đơn Web Service ‐ 28 ‐ 

2.4.3 Đa Web Service ‐ 29 ‐ 

2.5 Giải pháp trong thế hệ tiếp theo - 31 -

2.5.1 FlashXMLHttpRequest ‐ 31 ‐ 

2.5.2 ContextAgnosticXMLHttpRequest ‐ 31 ‐ 

CHƯƠNG III ‐ 33 ‐ 

XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM ‐ 33 ‐ 

CROSS-DOMAIN AJAX ‐ 33 ‐ 

3.1 Giới thiệu về Google Maps - 33 -

3.2 Giới thiệu về Google Maps API - 33 -

3.2.1 Maps API Basics ‐ 34 ‐ 

3.2.2 Maps API Events ‐ 36 ‐ 

3.2.3 Maps API Controls ‐ 38 ‐ 

3.2.4 Map Overlays ‐ 39 ‐ 

3.2.5 Google Maps API Services ‐ 41 ‐ 

KẾT LUẬN ‐ 42 ‐ 

TÀI LIỆU THAM KHẢO 43

-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 3 rd -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 ‐ 

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 ‐ 

THUẬT NGỮ VÀ CÁC CHỮ VIẾT TẮT

bộ

bản mở rộng

chuyển đổi mở rộng

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

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

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

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

domain của JavaScript sandbox và nó có thể tránh khỏi tổn thương site

cross-Đố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 <frame> hoặc một <iframe> 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

1.1.3 Thẻ <script>

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

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

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

có sẵn trên web

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à

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

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

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 http://www.amazon.com/ và tìm đến link ‘Amazon Web Services’

H1.9: Đă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

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 đó

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

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 http://developer.ebay.com/ , 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

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

Ư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

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)