Ajax Transportation Methods

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

講師介紹馮彥文隨想行動科技 Javaworld.tw : tempo Email: [email_address] Blog: http:// www.pocketshark.com/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:// www.marketwatch.com http://localhost:8080/dwr-reverse/before.jsp http://localhost:8080/dwr-reverse/after.jsp

我們的目標 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

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

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

AJAX A synchronous J avaScript A nd X ML XHTML&CSS DOM JavaScript XMLHttpRequest AJAX = DHTML + XHR

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

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

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

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

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

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; } } }

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

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

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

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

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

瀏覽器支援 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! "); } }

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

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

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

tempo: 那我來做個整理吧

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

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

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

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

傑克 : 什麼是 DWR 呢 ?

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

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

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

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

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

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

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

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

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

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

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

Step3: 在網頁中 include JavaScript <head> <script type =' text/javascript ' src =' /dwr-helloworld/dwr/interface/HelloWorld.js'/> <script type ='text/javascript‘ src =' /dwr-helloworld/dwr/engine.js ‘/> <script type ='text/javascript‘ src =' /dwr-helloworld/dwr/util.js ‘/> </script> </head> engine.js 與 util.js 是 dwr 的公用 script HelloWorld.js 是我們註冊的遠端物件 script

Step4: 撰寫 client 端 JavaScript <head> <script type =" text/javascript "> window.onload = function() { functon callback (str) { $('output'). innerHTML = str; } HelloWorld. sayHelloWorldTo (" JavaTwo 2006 ", callback ); } </script> </head>

遠端物件方法呼叫方式參數與一般呼叫方式相同回傳值使用 callback function , 放在最後一個參數用 Meta-data Object 定義 callback function public class Remote { public String getData (int index ) { ... } } function handleGetData (str) { alert(str); } Remote.getData(42, handleGetData );

Demo: Hello World http://localhost:8080/dwr-helloworld/ http://localhost:8080/dwr-helloworld/dwr/

傑克 : 可以讓遠端 Java 物件存放在 session 或 application scope 嗎 ?

設定遠端物件的 Scope 物件的 scope 可以透過 dwr.xml 內的 create 屬性設定 application, session, request, page <dwr> <allow> <create creator="new“ javascript="HelloWorld" scope =" page "> <param name="class" value="com.willmobile.ajaxtm.HelloWorld" /> </create> </allow> </dwr>

珍妮佛 : 參數可以是自訂的類別嗎 ?

Converters 定義在 dwr.xml 中描述 remote 物件 var r = Remote .method( param ); Uses a Converter Uses a Creator From: http://getahead.ltd.uk/dwr/overview/dwr

Converters 自動轉換 Primitive Type ( 與他們對應的 class 型態 ) String Date 預設 Converters Bean/Object Converter Array/Collection Converter Dom Objects Enum Converter

Converters 設定 <dwr> <allow> <create> … </create> <convert converter =" bean “ match =" com.willmobile.ajaxtm.User "> </convert> </allow> </dwr> 在 dwr.xml 的 <allow> 內建立 <convert>

傑克 : 任何遠端 Java 物件上的方法都可以呼叫嗎 ?

<include>, <exclude> 可在 dwr.xml 中設定遠端 Java 物件存取的權限 <dwr> <allow> <create creator="new“ javascript="HelloWorld" scope="page"> <param name="class" value="com.willmobile.ajaxtm.HelloWorld" /> < exclude method =“ noUse "/> </create> <convert converter="bean“ match="com.willmobile.ajaxtm.User"> < param name =" exclude " value =" password "/> </convert> </allow> </dwr>

tempo: 那該輪到做一個 Web Form 來試試看 2:20

Step1: 建立伺服器端的 Java 物件 public class User { private String id ; private String password ; private String name ; private String title ; … }

Step2: 建立伺服器端的 Java 物件 public class UserManager { private final List<User> users = new ArrayList<User>(); public synchronized void add (User user) { users. add (user); } public synchronized List<User> getAll () { return new ArrayList<User>(users); } }

Step3: client script function addUser () { var user = { id:"", name:"", title:"" }; DWRUtil.getValues(user); UserManager.add(user); UserManager.getAll(fillTable); } var cellFuncs = [ function(data) { return data.id; }, function(data) { return data.name; }, function(data) { return data.title; } ]; function fillTable (users) { DWRUtil.removeAllRows("usersBody"); DWRUtil.addRows("usersBody", users, cellFuncs); }

Demo: DWR Form http://localhost:8080/dwr-form/

珍妮佛 : 我也會做 jsp 的聊天室呀 , 你前面的 Demo 有比較好嗎 ?

Reverse AJAX AJAX ( 與一般 WEB 應用 ) 由瀏覽器發動每個需求 , 伺服器不能主動傳給瀏覽器任何資料 Pull Model Reverse AJAX 伺服器可主動傳送資訊至瀏覽器顯示或執行 Push Model ( 但其實是用 pull 模擬 ) Polling Comet (Long Live HTTP)

Polling 瀏覽器伺服器 N 秒送出一個 request 1. 新資料到 2. 新資料傳至瀏覽器 3. 顯示 req1 req2 req3 req4

Comet 瀏覽器伺服器 1. 新資料到 2. 新資料傳至瀏覽器 3. 顯示 req1 req2

Reverse AJAX DWR 將這些複雜的操作隱藏起來 Comet (Long Live HTTP) Polling Server Push JavaScript 至 Client ScriptSession. addScript (" alert('Hi') ");

Reverse AJAX 適合需要即時回應的網路應用股市資訊線上遊戲聊天交友會員客戶服務

珍妮佛 : 我也想做像前面 Demo 那樣的聊天室 ~~

Step1: 建立伺服器端的 Java 物件 public void addMessage (String text) { … final WebContext wctx = WebContextFactory. get (); // For all the browsers on the current page: String currentPage = wctx. getCurrentPage (); Collection sessions = wctx. getScriptSessionsByPage (currentPage); DwrUtil utilAll = new DwrUtil(sessions); utilAll.removeAllOptions("chatlog"); utilAll.addOptions("chatlog", messages, "text"); }

Step1: 建立伺服器端的 Java 物件 <script type="text/javascript"> window.onload = function() { DWREngine. setReverseAjax (true); Chatroom. getAllMessages (function(messages) { DWRUtil.removeAllOptions('chatlog'); DWRUtil.addOptions( 'chatlog', messages, 'text'); }); } function sendMessage() { Chatroom. addMessage (DWRUtil.getValue("text")); } </script>

Demo: DWR Chat http://localhost:8080/dwr-chat/before.jsp http://localhost:8080/dwr-chat/after.jsp

傑克 : 那你之前 Demo 的股市報價 , 也是用同一種技術囉 ? 2:30

Step1: 建立伺服器端的 Java 物件 private class SendTickerDataTask extends TimerTask { public void run() { ServerContext sctx = ServerContextFactory. get (servletContext); Collection sessions = sctx. getScriptSessionsByPage ( “ /dwr-reverse/after.jsp ”); DwrUtil pages = new DwrUtil( sessions, servletContext); pages.setValue(symbol, RandomStockSnapshot. getRandomStockSnapshotString(symbol)); } }

Demo: DWR Reverse http://localhost:8080/dwr-reverse/before.jsp http://localhost:8080/dwr-reverse/after.jsp

Web Framework Integration 2:35

珍妮佛 : 我不想呼叫物件 , 我想把整個網頁 include 進來 , 這可以嗎 ?

AJAX Includes 可以 , DWR 提供 Server-side Include Server Browser public String getInclude () { return WebContextFactory. get () . forwardToString (" /forward.jsp "); } function update () { Demo.getInclude(function(html) { DWRUtil. setValue (" somediv ", html); } );

傑克 : 這樣也行 , 那我想要呼叫我伺服器上的 spring beans, 不會也可以吧 ?

Spring Integration SpringCreator web.xml <allow> <create creator=" spring " javascript="Fred"> <param name="beanName" value="Shiela"/> </create> </allow> <context-param> <param-name> contextConfigLocation </param-name> <param-value>/WEB-INF/classes/beans.xml</param-value> </context-param>

珍妮佛 : 好吧 , 那像 Struts, Webwork 應該也不是問題囉 ?

Struts Integration StrutsCreator Webwork 整合至 Action 層 , 可透過 JavaScript 直接將 form 丟給 Action <allow> <create creator=" struts " javascript="Fred"> <param name="beanName" value="Shiela"/> </create> </allow>

傑克 : 我想要連續呼叫三個遠端函式 , 這樣使用者會等比較久嗎 ?

Batching 會的 , 所以若需要將數個 dwr 功能一次送出 , 請將需要在同一個交易內的功能放到 Batch 中 beginBatch (); … endBatch ();

珍妮佛 : 我看你的網頁右上方都有像 gmail 一樣的 loading message, 我也要

Loading Message 請在網頁 onLoad 時呼叫 useLoadingMessage() 即可 DWRUtils.useLoadingMessage(); Or DWRUtils.useLoadingMessage(‘Waiting…’);

傑克 : 你都沒有提到錯誤處理機制 :(

Error Handling Global Error (Exception) Handling Meta Data function handler(msg) { alert(msg); } DWREngine.setErrorHandler(handler); Remote.method(params, { callback:function(data) { ... }, errorHandler:handler });

傑克 : 哇 , DWR/AJAX 真棒 , 可是 back/forward 鍵沒用了 :(

瀏覽器歷史紀錄問題 XHR 或是 < script > 都無法將連線網頁加入瀏覽器歷史紀錄內 Really Simple History http:// codinginparadise.org/projects/dhtml_history/README.html

珍妮佛 : 以上提到的方法所有瀏覽器都支援嗎 ?

瀏覽器支援 DWR 支援以下瀏覽器 IE 5.5+ Firefox 1.0+ Mozilla 1.7+ Safari 1.2+ Konqueor Opera 7.5.4+ ( 但現在不支援 Reverse AJAX)

傑克 : 我已經有使用其他 framework 了 , 那我該如何整合 DHR 呢 ?

DWR 與其它 AJAX Framework JavaScript Libraries 不會有影響 Dojo Toolkit Prototype Script.aculo.us AJAX Framework 則請使用原本提供的存取方式 GWT ZK 2:45

Thank you! 如果你流落荒島 , 但是只能帶一個 AJAX Framework, 建議你帶 DWR  馮彥文 [email_address]

Ajax Transportation Methods

More Related Content

What's hot (16)

Viewers also liked (20)

Similar to Ajax Transportation Methods (20)

More from yiditushe (20)

Ajax Transportation Methods