1 / 104

AJAX 的 client/server 溝通機制探究

AJAX 的 client/server 溝通機制探究. 馮彥文 隨想行動科技. 講師介紹. 馮彥文 隨想行動科技 Javaworld.tw : tempo Email: yenwen.feng@willmobile.com Blog: http://www.pocketshark.com/blog/page/tempo. 這個故事 , 就從兩個技術人在一次研討會中的偶然相遇開始 …. 傑克 : Hi 珍妮佛 , 你知道這個 session 最主要是講 ?. 內容主題. AJAX

bradley-terry
Télécharger la présentation

AJAX 的 client/server 溝通機制探究

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX的 client/server溝通機制探究 馮彥文 隨想行動科技

  2. 講師介紹 • 馮彥文 • 隨想行動科技 • Javaworld.tw: tempo • Email: yenwen.feng@willmobile.com • Blog: http://www.pocketshark.com/blog/page/tempo

  3. 這個故事, 就從兩個技術人在一次研討會中的偶然相遇開始…

  4. 傑克:Hi 珍妮佛,你知道這個 session 最主要是講?

  5. 內容主題 • AJAX • 利用 AJAX 提高網站與使用者的互動性 (Rich Internet Application) • User Interface: DHTML • 非同步傳輸: XMLHttpRequest (XHR) 與其他方式, 與他們的黑暗面 • AJAX Framework • 學習如何利用 DWR(Direct Web Remoting)來簡化 AJAX 與 Java 間的網路存取, 且為網站增添更多功能 • AJAX / Reverse AJAX

  6. 我們的目標 • 即時股市報價 • http://www.marketwatch.com • http://localhost:8080/dwr-reverse/before.jsp • http://localhost:8080/dwr-reverse/after.jsp

  7. 我們的目標 • Web 聊天室 • http://gabbly.com/http://www.pocketshark.com/blog/page/tempo/ • http://localhost:8080/dwr-chat/before.jsp • http://localhost:8080/dwr-chat/after.jsp

  8. What We Will Focus on Here Browser Compatibility,Cross-Domains, Java Data Marshalling,JSON, JSON-RPC,DOJO,DWR, GWT,iframe,Prototype,Timeout & Error Handling, Reverse AJAX, History & Bookmarks,scriptTag,Web Framework Integration, XHR, XML

  9. AJAX 非同步傳輸 1:35

  10. 珍妮佛:什麼是 AJAX? 什麼又是非同步傳輸?

  11. AJAX AJAX = DHTML + XHR Asynchronous JavaScript And XML XHTML&CSS DOM JavaScript XMLHttpRequest

  12. Classic Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php

  13. AJAX Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php

  14. 傑克:那我該如何利用 AJAX 存取遠端網站資料呢?

  15. XHR(XMLHttpRequest) • JavaScript 版的 HttpConnection • 介面 • open(string url,string asynch): 開啟網頁 • send(string): 傳送資料 • onreadystatechange: 狀態改變回呼函式 • status: HTTP 狀態 • responseXML: 回傳的 XML DOM • responseText: 回傳的文字內容

  16. XHR • 使用者輸入觸動 XHR // 建立 XHR request = new XMLHttpRequest(); // 設定回呼函式 request.onreadystatechange=handleResponse; // 開啟連結 request.open("GET","http://abc.com",true); // 傳送資料 request.send(null);

  17. XHR • 接收資料後立刻更新UI function handleResponse() { // 檢查 XHR 狀態 if(request.readyState == 4){ // 檢查 http 狀態 if(request.status == 200){ // 讀取回傳 XML 資料 var doc = request.responseXML; // 取得網頁上需被更新的 node 位置 var node = document.getElementById(“resp"); // 設定該 node 的內容 node.innerHTML = doc.documentElement.childNodes[0].nodeValue; } } }

  18. DEMO: Hello World http://localhost:8080/xhr/index.jsp

  19. Tips & Tricks about XHR 1:40

  20. 珍妮佛:傑克, 這真是太神奇了, 但傳輸的資料一定要是 XML 格式嗎?

  21. XHR 接受的資料型態 • 不, XHR 除了 XML 資料之外, 還可以傳送 text, 所以也包括了 HTML, JavaScript (JSON) [{author:‘tempo’, title:‘智者的對談'}, {author:‘browser,koji’, title:‘JSP技術手冊'}, {author:‘caterpillar’, title:‘Spring技術手冊'}, {author:‘piggy’, title:’Java2全方位學習’];

  22. 傑克:那所有的瀏覽器都有支援 XHR 嗎?

  23. 瀏覽器支援 • XHR 支援以下瀏覽器 • IE 5.0+ • Mozilla 1.0+ • Safari 1.2 • Konqueor • Opera 8.0 • 但不同的瀏覽器 XHR 建立方式不同 • IE: ActiveX • Others: JavaScript

  24. 瀏覽器支援 function httpRequest(reqType,url){ if(window.XMLHttpRequest){ // Mozilla, Opera, Safari, … request = new XMLHttpRequest(); } else if (window.ActiveXObject){ // IE request=new ActiveXObject("Msxml2.XMLHTTP"); if (!request){ request=new ActiveXObject("Microsoft.XMLHTTP"); } } if(request){ … } else { alert("Your browser does not permit the use of all "+ "of this application's features!"); } }

  25. 珍妮佛:真奇怪, 我使用 XHR, 瀏覽器卻一直跳出安全性問題?

  26. 跨網域支援 • 有可能是其他問題, 但 XHR 限制僅能存取該網站上的資料, 無法存取其他網站的資料 • For example, 若此網頁的網址為 http://www.abc.com/test.jsp, 則 XHR: • 不可存取: test.abc.com/*, abc.com/* • 可存取: www.abc.com/* • AJAX SOA?

  27. 傑克:少來了 tempo, 明明除了 XHR 之外, 還有其它方式來存取網站資料

  28. <iframe>與<script> • 是的, 利用 <iframe> 與 <script> 也可以達到相同的功能, 但需要轉幾個彎

  29. <iframe>與<script>使用 • <iframe> • <script> var sObj = document.createElement('iframe'); sObj.src = ‘http://www.abc.com’; sObj.onload = function() { iframe_loaded( sObj ); }; document.body.appendChild( sObj ); var sObj = document.createElement('script'); sObj.src = ‘http://www.abc.com’; document.body.appendChild( sObj );

  30. <iframe>與<script>資料接收 • <iframe> • 回傳資料為 HTML 格式 • <script> • 回傳資料為 JavaScript 格式 • 但都可以經過額外的步驟轉換為 XML或 JavaScript

  31. <iframe>與<script>優缺點 • 優點 • 可以跨網域存取資料, 不像 XHR 有限制 • <iframe> 瀏覽過的網頁會被加入瀏覽器的歷史紀錄內 • 支援較多的瀏覽器 • 缺點 • 使用起來較繁瑣 • 僅支援 HTTP GET

  32. tempo:那我來做個整理吧

  33. 各種方法比較

  34. 小細節需要注意 • 三種傳輸方式 • XHR, <iframe>, <script> • 三種資料格式 • XML, HTML, JavaScript • 跨網域問題 • 瀏覽器支援問題 • 上一頁/下一頁與書籤問題*

  35. 珍妮佛:好吧 tempo, 這太複雜了, 我只是想要存取網站上的資料而已

  36. 透過 AJAX Framework 來做非同步傳輸 • XHR, <iframe>, <script> 各有不同的優點與缺點 • 瀏覽器有不同的 bugs與標準 • 自行維護非同步傳輸底層不容易

  37. 透過 AJAX Framework 來做非同步傳輸 • 現有的AJAX Framework都有提供自己的XHR Utility或包裝 • Framework: Google Web Toolkit, ZK, Dojo, … • RPC: DWR, JSON-RPC, … • Libraries: Prototype, … • DWR是其中最專業也是支援最廣的 AJAX 非同步傳輸 Framework

  38. Direct Web Remoting 1:50

  39. 傑克:什麼是 DWR 呢?

  40. DWR(Direct Web Remoting) • RPC-Style AJAX • Easy AJAX for Java • Easy to integrate • AJAX: • Expose Java to the Browser • Reverse AJAX: • Expose JavaScript to the Server

  41. DWR From: http://getahead.ltd.uk/dwr/overview/dwr

  42. 珍妮佛:我也想試試 DWR, 我該如何安裝呢?

  43. Step 1: Download • 從網站下載 DWR: http://getahead.ltd.uk/dwr/download • Copy dwr.jar into WEB-INF/lib 2:00

  44. Step 2: web.xml <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> • 修改 web.xml, 新增 DwrServlet

  45. Step 3: dwr.xml <dwr> <allow> <create creator="new" javascript="JDate"> <param name="class" value="java.util.Date"/> </create> </allow> </dwr> • 將遠端 Java 物件註冊到 dwr.xml

  46. DEMO: Installation http://localhost:8080/dwr-minimal/dwr/

  47. DWR 除錯視窗 • 在 web.xml 設定 init-param, ‘debug’ = true • 顯示註冊在 dwr.xml的物件與提供直接測試用 • 請不要在正式環境使用!!! <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param>

  48. 建民:那 tempo, 你應該要講怎麼做 Hello World 了吧? 2:05

  49. Step1: 建立伺服器端的 Java 物件 package com.willmobile.ajaxtm; public class HelloWorld { public String sayHelloWorldTo(String name) { return "Hello World " + name + "!"; } }

  50. Step2: 在 dwr.xml 中註冊類別 • 在 dwr.xml 的 <allow> 內建立 <create> <dwr> <allow> <create creator="new“ javascript="HelloWorld" scope="page"> <param name="class" value="com.willmobile.ajaxtm.HelloWorld" /> </create> </allow> </dwr>

More Related