Weitere ähnliche Inhalte Ähnlich wie Ajax Transportation Methods Ähnlich wie Ajax Transportation Methods (20) 1. AJAX 的 client/server 溝通機制探究 馮彥文 隨想行動科技 3. 這個故事 , 就從兩個技術人在一次研討會中的偶然相遇開始… 4. 傑克 : Hi 珍妮佛 , 你知道這個 session 最主要是講 ? 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 10. 珍妮佛 : 什麼是 AJAX? 什麼又是非同步傳輸 ? 14. 傑克 : 那我該如何利用 AJAX 存取遠端網站資料呢 ? 20. 珍妮佛 : 傑克 , 這真是太神奇了 , 但傳輸的資料一定要是 XML 格式嗎 ? 22. 傑克 : 那所有的瀏覽器都有支援 XHR 嗎 ? 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, 瀏覽器卻一直跳出安全性問題 ? 27. 傑克 : 少來了 tempo, 明明除了 XHR 之外 , 還有其它方式來存取網站資料 35. 珍妮佛 : 好吧 tempo, 這太複雜了 , 我只是想要存取網站上的資料而已 41. DWR From: http://getahead.ltd.uk/dwr/overview/dwr 42. 珍妮佛 : 我也想試試 DWR, 我該如何安裝呢 ? 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 + " ! "; } } 52. Step4: 撰寫 client 端 JavaScript <head> <script type =" text/javascript "> window.onload = function() { functon callback (str) { $('output'). innerHTML = str; } HelloWorld. sayHelloWorldTo (" JavaTwo 2006 ", callback ); } </script> </head> 56. 傑克 : 可以讓遠端 Java 物件存放在 session 或 application scope 嗎 ? 62. 傑克 : 任何遠端 Java 物件上的方法都可以呼叫嗎 ? 64. tempo: 那該輪到做一個 Web Form 來試試看 2:20 65. Step1: 建立伺服器端的 Java 物件 public class User { private String id ; private String password ; private String name ; private String title ; … } 66. 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); } } 67. 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); } 70. 珍妮佛 : 我也會做 jsp 的聊天室呀 , 你前面的 Demo 有比較好嗎 ? 72. Polling 瀏覽器 伺服器 N 秒送出一個 request 1. 新資料到 2. 新資料傳至瀏覽器 3. 顯示 req1 req2 req3 req4 76. 珍妮佛 : 我也想做像前面 Demo 那樣的聊天室 ~~ 77. 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"); } 78. 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> 80. 傑克 : 那你之前 Demo 的股市報價 , 也是用同一種技術囉 ? 2:30 81. 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)); } } 84. 珍妮佛 : 我不想呼叫物件 , 我想把整個網頁 include 進來 , 這可以嗎 ? 86. 傑克 : 這樣也行 , 那我想要呼叫我伺服器上的 spring beans, 不會也可以吧 ? 88. 珍妮佛 : 好吧 , 那像 Struts, Webwork 應該也不是問題囉 ? 91. 傑克 : 我想要連續呼叫三個遠端函式 , 這樣使用者會等比較久嗎 ? 93. 珍妮佛 : 我看你的網頁右上方都有像 gmail 一樣的 loading message, 我也要 97. 傑克 : 哇 , DWR/AJAX 真棒 , 可是 back/forward 鍵沒用了 :( 99. 珍妮佛 : 以上提到的方法所有瀏覽器都支援嗎 ? 101. 傑克 : 我已經有使用其他 framework 了 , 那我該如何整合 DHR 呢 ?
![講師介紹 ,[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)