AJAX 的 client/server 溝通機制探究

Slides:



Advertisements
Similar presentations
LOGO 第 9 章 Java Servlet 和 JSP 编程 孙焘. 重点: servlet 编程原理 1 servlet 的基础类与编程实现 2 JSP 编程原理 3 JSP 的常用语法 4.
Advertisements

第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
Java 程序分类 Java Application :是完整程序,需要独立的解 释器解释运行;以 “.java” 为后缀的文件,以 main() 方法作为程序入口,由 java 编译器编译生 成字节码,由 Java 解释器加载执行字节码。 Java Applet 没有 main() 方法作为程序入口,是嵌在.
— 高级软件人才实作培训专家 ! 北京传智播客教育 ajax 讲师:韩顺平 qq:
Web Maple— 云端计 算 数学学院刘海洋 胡婷婷. 需求 什么是 Web Maple ? Maple : “ 数学家的软件 ” 符号和数值计算 动态编程语言 集成编辑环境与图形输出 Web Maple :网页上的数学家 完整的 Maple 功能 云端计算 网页独特的输入输出格式.
1 网站设计理念 大连理工大学创新实验学院 优秀网站展示 - LAMP 类网站
事件驱动的移动数据中心 广州舜飞信息科技有限公司 谭荣棉.
PHPCMS 使用指南及二次开发向导
基于SSH的web开发 AND 企业级WEB应用开发新技术
姓名: 钱琬婷 学号: 0501W238 专业: 计算机科学与技术 指导教师: 陈家琪 教授
第五章:JDBC与数据库 第一讲.
第12讲 Javascript 复习 信息学院 孙辉.
MVC Servlet与MVC设计模式.
攻击JAVA WEB 阿里巴巴集团安全中心 周拓.
王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
網頁技術簡介.
计算机图形技术 余 莉
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第三章 使用XMLHttpRequest对象
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
Ch07 PHP程式基礎 網頁程式設計.
Hello World 體驗實作第一個JSP程式.
第9章 过滤器和监听器技术 过滤器(Filter)和监听器(Listener)是两种特殊的Servlet技术。过滤器可以对用户的请求信息和响应信息进行过滤,常被用于权限检查和参数编码统一设置等。监听器可以用来对Web应用进行监听和控制的,增强Web应用的事件处理能力。 本章主要介绍过滤器和监听器的编程接口、基本结构、信息配置、部署和运行,最后通过案例说明过滤器和监听器的典型应用。
DhtmlXGrid表格显示控件简介.
网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne.
软件设计模式与体系结构课程设计 周 宇 College of Information Science and Technology
數位典藏 - 全文檢索系統簡介 Reporter:Chia-Hao Lee
Ajax编程技术 第一章 Ajax简介.
AJAX基础.
数据库操作示例 import java.sql.*; //导入java.sql包 public class JDBCDemo {
专题4:JSP脚本和指令.
Arena System Technology Architecture 系统技术架构 1、Database V2(Lotus Notes)V3(Oracle8i) 2、Application Server SilverStream2.53 (Java as server side programming.
Working with Databases (II) 靜宜大學資管系 楊子青
JavaScript 靜宜大學 資管系 楊子青.
CHT IPv6測試 D-Link Taiwan 友訊科技台灣分公司 TTSS 電信技術支援課 Name:
Java语言程序设计 第八部分 Applet小程序.
網頁切換移轉 JS vs. ASP.NET.
DWR WEB开发交流 1、自我介绍 2、DWR概述 3、DWR DEMO介绍 4、DWR实现机制 5、DWR配置说明 6、JS开发注意事项.
Ajax網頁的危機與防禦術 王寧疆 MCAD.NET/MCSD.NET/MCT/MVP 資策會教育訓練處.
Echo Server/Client Speaker:Fang.
Web Crack 专题 – AJAX – 2016/11/18 – Payne 本次培训仅供教学内部用途 实验请遵守相关法律法规
系統設定 IE8相容性檢視
網頁切換移轉 JS vs. ASP.NET.
Topic Introduction—RMI
WEB统一检索本地整合技术 中国农业大学图书馆 康实.
架站實做—AppServ
简单工厂模式.
第 11 章 XML資料的傳遞 –XmlHttpRequest物件
Ajax编程技术 第六章 调试与错误处理.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
第十二章 过滤器.
表格(HTML – FORM).
JavaScript Sunxiaoshen.
UI 软件 设计 页面布局(一).
Java Server Faces 参考书籍 Java Server Faces 核心编程.
网 站 设 计 与 建 设 Website design and developments
表格(HTML – FORM)
Dreamweaver 進階網頁製作 B 許天彰.
1. 查詢個人電腦版本 1.進入控制台 2.點選“所有控制台項目” 3.點選“系統”.
W3C标准网页制作 主讲教师:张 涛.
案例分析: THE NEXTGEN POS SYSTEM
多站台網路預約系統之 AJAX即時資料更新機制
讀取網路資料及JSON開放資料 靜宜大學資管系 楊子青
第21章 Spring 的MVC框架 Spring不但一个很好的集成框剪,它还提供了构建Web应用程序的全功能MVC模块。Spring 的MVC框架非常强大并不逊色于其他专业的Web框架,如Struts、WebWork。但在国内Spring MVC应用的并不是特别多,原因可能是Struts太深入人心的缘故吧。
Jquery Mobile開發須知 周季賢.
JavaScript 教师:魏小迪
CHT IPv6測試 D-Link Taiwan 友訊科技台灣分公司 TTSS 電信技術支援課 Name:
InputStreamReader Console Scanner
Presentation transcript:

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

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

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

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

內容主題 AJAX AJAX Framework 利用 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 非同步傳輸 1:35

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

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

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

Tips & Tricks about XHR 1:40

珍妮佛: 傑克, 這真是太神奇了, 但傳輸的資料一定要是 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 支援以下瀏覽器 但不同的瀏覽器 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 之外, 還有其它方式來存取網站資料

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

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

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

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

Direct Web Remoting 1:50

傑克: 什麼是 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 修改 web.xml, 新增 DwrServlet <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> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>

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

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.xml 的 <allow> 內建立 <create> <create creator="new“ javascript="HelloWorld" scope="page"> <param name="class" value="com.willmobile.ajaxtm.HelloWorld" /> </create> </allow> </dwr>

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

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/

Tips & Tricks about DWR 2:15

傑克: 可以讓遠端 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 自動轉換 預設 Converters Primitive Type (與他們對應的 class 型態) String Date 預設 Converters Bean/Object Converter Array/Collection Converter Dom Objects Enum Converter

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

傑克: 任何遠端 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/

Reverse AJAX 2:25

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

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

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

Comet 瀏覽器 伺服器 req1 2.新資料傳至瀏覽器 1.新資料到 3.顯示 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>

其他的功能 2:40

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

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  馮彥文 yenwen.feng@willmobile.com

我想請教關於..