2014年DWR教程.pptVIP

講師介紹 馮彥文 隨想行動科技 Javaworld.tw: tempo Email: yenwen.feng@ Blog: /blog/page/tempo 這個故事, 就從兩個技術人在一次研討會中的偶然相遇開始… 傑克: Hi 珍妮佛,你知道這個 session 最主要是講? 內容主題 AJAX 利用 AJAX 提高網站與使用者的互動性 (Rich Internet Application) User Interface: DHTML 非同步傳輸: XMLHttpRequest (XHR) 與其他方式, 與他們的黑暗面 AJAX Framework 學習如何利用 DWR(Direct Web Remoting) 來簡化 AJAX 與 Java 間的網路存取, 且為網站增添更多功能 AJAX / Reverse AJAX 我們的目標 即時股市報價 http://localhost:8080/dwr-reverse/before.jsp http://localhost:8080/dwr-reverse/after.jsp 我們的目標 Web 聊天室 //blog/page/tempo/ http://localhost:8080/dwr-chat/before.jsp http://localhost:8080/dwr-chat/after.jsp What We Will Focus on Here 珍妮佛: 什麼是 AJAX? 什麼又是非同步傳輸? AJAX Asynchronous JavaScript And XML Classic Web Applications AJAX Web Applications 傑克: 那我該如何利用 AJAX 存取遠端網站資料呢? XHR(XMLHttpRequest) JavaScript 版的 HttpConnection 介面 open(string url,string asynch): 開啟網頁 send(string): 傳送資料 onreadystatechange: 狀態改變回呼函式 status: HTTP 狀態 responseXML: 回傳的 XML DOM responseText: 回傳的文字內容 XHR 使用者輸入觸動 XHR XHR 接收資料後立刻更新UI DEMO: Hello World http://localhost:8080/xhr/index.jsp 珍妮佛: 傑克, 這真是太神奇了, 但傳輸的資料一定要是 XML 格式嗎? XHR 接受的資料型態 不, XHR 除了 XML 資料之外, 還可以傳送 text, 所以也包括了 HTML, JavaScript (JSON) 傑克: 那所有的瀏覽器都有支援 XHR 嗎? 瀏覽器支援 XHR 支援以下瀏覽器 IE 5.0+ Mozilla 1.0+ Safari 1.2 Konqueor Opera 8.0 但不同的瀏覽器 XHR 建立方式不同 IE: ActiveX Others: JavaScript 瀏覽器支援 珍妮佛: 真奇怪, 我使用 XHR, 瀏覽器卻一直跳出安全性問題? 跨網域支援 有可能是其他問題, 但 XHR 限制僅能存取該網站上的資料, 無法存取其他網站的資料 For example, 若此網頁的網址為 /test.jsp, 則 XHR: 不可存取: /*, /* 可存取: /* AJAX SOA? 傑克: 少來了 tempo, 明明除了 XHR 之外, 還有其它方式來存取網站資料 iframe與script 是的, 利用 iframe 與 script 也可以達到相同的功能, 但需要轉幾個彎 iframe與script使用 iframe script iframe與script資料接收 iframe 回傳資料為 HTML 格式 script 回傳資料為 JavaScript 格式 但都可以經過額外的步驟轉換為 XML 或 JavaScript iframe與script優缺點 優點 可以跨網域存取資料, 不像 XHR 有限制 iframe 瀏覽過的網頁會被加入瀏覽器的歷史紀錄內 支援較多的瀏覽器 缺點 使用起來較繁瑣 僅支援 HTTP GET tempo: 那我來做個整理吧 各種方法比較 小細節需要注意 三種傳輸方式 XHR, iframe, script 三種資料格式 XML, HTML, JavaScript 跨網域問題 瀏覽器支援問題 上一頁/下一頁與書籤問題* 珍妮佛: 好吧 tempo, 這太複雜了, 我只是想要存取網站上的資料而已 透過 AJAX Framework 來做非同步傳輸 XHR, iframe, script 各有不同的優點與缺