AJAX Search & Cross Domain Survey 2009-04-10 David Hung
前言 <ul><li>為了實現 Quick Search ,必須要使用 AJAX 的技術 </li></ul><ul><li>瀏覽器限制了 Client 端程式利用 AJAX 技術做遠端資料存取,只允許 Client 存取同一 Domain 底...
The Possible Way <ul><li>為了要存取遠端的資料,可以使用以下幾種可能的方法 : </li></ul>A Server Proxy Using JSONP API Flash Cross-Domain Hack Java ...
A Server Proxy <ul><li>Client 端要取得遠端資料時,先透過 Server 端發送 Request 拿到遠端資料,再將結果回傳給 Client </li></ul><ul><li>Working Flow: </li>...
使用 Server Proxy 的優缺點 <ul><li>優點 : </li></ul><ul><ul><li>可 Access 任意網站的資料 </li></ul></ul><ul><li>缺點 : </li></ul><ul><ul><li...
需要消耗 Server 的運算資源
必須自行 Parse 頁面資料 </li></ul></ul><ul><li>潛在問題 : </li></ul><ul><ul><li>若網站更改頁面的呈現方式,即需要重新寫 Parsing 頁面資料的程式碼 </li></ul></ul><u...
Using JSONP API <ul><li>What is “JSONP”? </li></ul><ul><ul><li>JSON with Padding. A script code with JSON data and a callb...
Using JSONP API( 二 ) <ul><li>Working Flow: </li></ul>
有提供 JSONP API 的搜尋引擎 <ul><li>Google AJAX Search API </li></ul><ul><ul><li>http://code.google.com/intl/zh-TW/apis/ajaxsearch...
Example URL: </li></ul></ul>http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=zh_TW&start=0&rsz=large&q=test <u...
每次 request 最多只能回傳 8 筆搜尋結果資料
最多只能抓取 64 筆搜尋結果資料
可指定 Host Language 參數 (hl):  host language of the application making the request
可指定 Language Restrict 參數 (lr):  restrict the search to documents written in a particular language  </li></ul></ul></ul>
有提供 JSONP API 的搜尋引擎 ( 二 ) <ul><li>Yahoo BOSS Search API </li></ul>http://developer.yahoo.com/search/boss/boss_guide/Web_Se...
規則  &  限制 : </li></ul></ul><ul><ul><ul><li>無每天 request 數的上限
每次 request 最多回傳 50 筆搜尋結果資料
最多可以抓取 1000 筆搜尋結果資料 </li></ul></ul></ul>
有提供 JSONP API 的搜尋引擎 ( 三 ) <ul><li>MSN Live Search API </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/dd4407...
Upcoming SlideShare
Loading in...5
×

AJAX Search & Cross Domain Survey

1,775

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,775
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AJAX Search & Cross Domain Survey

  1. 1. AJAX Search & Cross Domain Survey 2009-04-10 David Hung
  2. 2. 前言 <ul><li>為了實現 Quick Search ,必須要使用 AJAX 的技術 </li></ul><ul><li>瀏覽器限制了 Client 端程式利用 AJAX 技術做遠端資料存取,只允許 Client 存取同一 Domain 底下的資料 </li></ul>
  3. 3. The Possible Way <ul><li>為了要存取遠端的資料,可以使用以下幾種可能的方法 : </li></ul>A Server Proxy Using JSONP API Flash Cross-Domain Hack Java Applet
  4. 4. A Server Proxy <ul><li>Client 端要取得遠端資料時,先透過 Server 端發送 Request 拿到遠端資料,再將結果回傳給 Client </li></ul><ul><li>Working Flow: </li></ul>
  5. 5. 使用 Server Proxy 的優缺點 <ul><li>優點 : </li></ul><ul><ul><li>可 Access 任意網站的資料 </li></ul></ul><ul><li>缺點 : </li></ul><ul><ul><li>回應速度比較慢
  6. 6. 需要消耗 Server 的運算資源
  7. 7. 必須自行 Parse 頁面資料 </li></ul></ul><ul><li>潛在問題 : </li></ul><ul><ul><li>若網站更改頁面的呈現方式,即需要重新寫 Parsing 頁面資料的程式碼 </li></ul></ul><ul><li>Critical Issue: </li></ul><ul><ul><li>Server 可能會因為 Request 發送太過頻繁被當成 Web Robot 攻擊而直接被封索 IP </li></ul></ul>
  8. 8. Using JSONP API <ul><li>What is “JSONP”? </li></ul><ul><ul><li>JSON with Padding. A script code with JSON data and a callback function. </li></ul></ul><ul><li>How it works? </li></ul><ul><ul><li>Browser doesn’t restrict <script> tag access remote script code. </li></ul></ul><head> <script type=&quot;text/javascript&quot;>     function handle_data(twitter_data) {      // manipulate the JSON data      }    </script>    <script type=&quot;text/javascript&quot; src=&quot;http://search.twitter.com/trends.json?callback=handle_data&quot;></script> </head>
  9. 9. Using JSONP API( 二 ) <ul><li>Working Flow: </li></ul>
  10. 10. 有提供 JSONP API 的搜尋引擎 <ul><li>Google AJAX Search API </li></ul><ul><ul><li>http://code.google.com/intl/zh-TW/apis/ajaxsearch/documentation/reference.html#_intro_fonje
  11. 11. Example URL: </li></ul></ul>http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=zh_TW&start=0&rsz=large&q=test <ul><ul><li>規則 & 限制 : </li></ul></ul><ul><ul><ul><li>無每天 request 數的上限
  12. 12. 每次 request 最多只能回傳 8 筆搜尋結果資料
  13. 13. 最多只能抓取 64 筆搜尋結果資料
  14. 14. 可指定 Host Language 參數 (hl): host language of the application making the request
  15. 15. 可指定 Language Restrict 參數 (lr): restrict the search to documents written in a particular language </li></ul></ul></ul>
  16. 16. 有提供 JSONP API 的搜尋引擎 ( 二 ) <ul><li>Yahoo BOSS Search API </li></ul>http://developer.yahoo.com/search/boss/boss_guide/Web_Search.html <ul><ul><li>Example URL: http://boss.yahooapis.com/ysearch/web/v1/test?appid=AawYS3jV34G4qs8DUaXFuppaFKCgKaqoeAXAmGUb5w_3Panx98.UkLrLJwmaNGxq&format=xml&count=1
  17. 17. 規則 & 限制 : </li></ul></ul><ul><ul><ul><li>無每天 request 數的上限
  18. 18. 每次 request 最多回傳 50 筆搜尋結果資料
  19. 19. 最多可以抓取 1000 筆搜尋結果資料 </li></ul></ul></ul>
  20. 20. 有提供 JSONP API 的搜尋引擎 ( 三 ) <ul><li>MSN Live Search API </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/dd440753.aspx
  21. 21. Example URL: http://api.search.live.net/xml.aspx?Appid=165B2CAB2D36162736CA004E5B4DA8163E2E0CAF&query=sushi&sources=web
  22. 22. 規則 & 限制 : </li></ul></ul><ul><ul><ul><li>無每天 request 數的上限
  23. 23. 每次 request 最多回傳 50 筆搜尋結果資料
  24. 24. 最多可以抓取 1000 筆搜尋結果資料
  25. 25. 可指定 Market 參數 : Language and country/region information for the SearchRequest. </li></ul></ul></ul>
  26. 26. 其它有提供 JSONP API 的網站 <ul><li>Flickr Tag Search API </li></ul><ul><ul><li>demo: http://localhost/test/backup/demo_getJSON.jsp </li></ul></ul><ul><li>delicious Feeds API </li></ul><ul><ul><li>http ://feeds.delicious.com/v2/json?callback=handle_data </li></ul></ul><ul><li>Twitter Search API </li></ul><ul><ul><li>http ://search.twitter.com/trends.json?callback=handle_data </li></ul></ul>
  27. 27. 使用 JSONP 的優缺點 <ul><li>優點 : </li></ul><ul><ul><li>省去 Parsing HTML 頁面資料的流程
  28. 28. 回應速度比度較快 </li></ul></ul><ul><li>缺點 : </li></ul><ul><ul><li>受制於網站的 API 規格 </li></ul></ul><ul><li>潛在問題 : </li></ul><ul><ul><li>當網站終止提供 API 服務時,則無法使用。而網站修改 API 規格時,程式碼即需要跟著變動。 </li></ul></ul>
  29. 29. Demo Site by Using JSON API <ul><li>http://localhost/test/demo_ajax_search.jsp </li></ul>
  30. 30. Flash Cross-Domain Hack <ul><li>透過 flash function 存取遠端 Server 的資料 </li></ul><ul><li>遠端 Server 的 Root Path 底下必須要有一個 crossdomain.xml 的設定檔 </li></ul><ul><li>Cross-domain Policy File Specification </li></ul><ul><ul><li>http ://www.senocular.com/pub/adobe/crossdomain/policyfiles.html </li></ul></ul><?xml version=&quot;1.0&quot;?> <cross-domain-policy> <allow-access-from domain=&quot;*&quot; /> </cross-domain-policy>
  31. 31. 各家搜尋引擎的 crossdomain.xml 設定 - Google <ul><li>http ://www.google.com/crossdomain.xml </li></ul><?xml version=&quot;1.0&quot;?> <!DOCTYPE cross-domain-policy SYSTEM &quot;http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd&quot;> <cross-domain-policy> <site-control permitted-cross-domain-policies=&quot; by-content-type &quot; /> </cross-domain-policy>
  32. 32. 各家搜尋引擎的 crossdomain.xml 設定 – Yahoo & MSN <ul><li>Yahoo </li></ul>http ://tw.search.yahoo.com/crossdomain.xml <ul><ul><li>無此檔案 </li></ul></ul><ul><li>MSN </li></ul>http://search.live.com/crossdomain.xml <ul><ul><li>無此檔案 </li></ul></ul>
  33. 33. Demo AJAX Cross-Domain via Flash <ul><li>http://localhost/test/demo_ajax_call_flash.jsp </li></ul><ul><li>Available URL: </li></ul><ul><ul><li>http ://blog.sina.com.cn/s/blog_47014d300100cgvy.html?tj=1 </li></ul></ul>
  34. 34. 使用 Flash Cross-Domain Hack 的優缺點 <ul><li>優點 : </li></ul><ul><ul><li>可以透過 Client 自由存取該 Server 同 Domain 底下的所有 URL </li></ul></ul><ul><li>缺點 : </li></ul><ul><ul><li>必須要在遠端 Server 存在有 crossdomain.xml 設定檔,並且設定允許外部連線
  35. 35. 連線的 Browser 必須裝有 Flash Player ,且必須是正確的版本
  36. 36. 必須自行 Parse 頁面資料 </li></ul></ul><ul><li>潛在問題 : </li></ul><ul><ul><li>當遠端 Server 更改 crossdomain.xml 設定時,可能會導致無法連線
  37. 37. Flash Player 版本異動時,有可能造成無法連線 </li></ul></ul>
  38. 38. Java Applet <ul><li>經實際測試,透過 Applet 連線到遠端 URL 會被 Java 直接擋掉權限,出現 access denied (java.net.SocketPermission) 的錯誤 </li></ul><ul><ul><li>demo: http://localhost/test/test_applet.html </li></ul></ul>
  39. 39. 綜合比較 可成功連線 限制 風險 自由度 可行性 Server Proxy success none Server IP block! 高 中 JSONP API success API Spec. API closed 低 高 Flash Cross-Domain Hack success crossdomain.xml XML setting changed 中 低 Java Applet failed N/A N/A N/A N/A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×