ajax 的 client/server 溝通機制探究
DESCRIPTION
AJAX 的 client/server 溝通機制探究. 馮彥文 隨想行動科技. 講師介紹. 馮彥文 隨想行動科技 Javaworld.tw : tempo Email: [email protected] Blog: http://www.pocketshark.com/blog/page/tempo. 這個故事 , 就從兩個技術人在一次研討會中的偶然相遇開始 …. 傑克 : Hi 珍妮佛 , 你知道這個 session 最主要是講 ?. 內容主題. AJAX - PowerPoint PPT PresentationTRANSCRIPT
-
Javaworld.tw: tempoEmail: [email protected]: 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.comhttp://localhost:8080/dwr-reverse/before.jsphttp://localhost:8080/dwr-reverse/after.jsp
-
Web http://gabbly.com/http://www.pocketshark.com/blog/page/tempo/http://localhost:8080/dwr-chat/before.jsphttp://localhost:8080/dwr-chat/after.jsp
-
What We Will Focus on HereBrowser 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? ?
-
AJAXAsynchronousJavaScriptAndXML
XHTML&CSSDOMJavaScriptXMLHttpRequestAJAX = DHTML + XHR
-
Classic Web ApplicationsFrom: http://adaptivepath.com/publications/essays/archives/000385.php
-
AJAX Web ApplicationsFrom: http://adaptivepath.com/publications/essays/archives/000385.php
-
: AJAX ?
-
XHR(XMLHttpRequest)JavaScript HttpConnectionopen(string url,string asynch): send(string): onreadystatechange: status: HTTP responseXML: XML DOMresponseText:
-
XHR XHR// XHRrequest = new XMLHttpRequest();// request.onreadystatechange=handleResponse;// request.open("GET","http://abc.com",true);// request.send(null);
-
XHRUI
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 Worldhttp://localhost:8080/xhr/index.jsp
Tips & Tricks about XHR1: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 IE 5.0+Mozilla 1.0+Safari 1.2KonqueorOpera 8.0 XHR IE: ActiveXOthers: 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 ,
-
, ,
-
var sObj = document.createElement('script');sObj.src = http://www.abc.com;document.body.appendChild( sObj );var sObj = document.createElement('iframe');sObj.src = http://www.abc.com;sObj.onload = function() { iframe_loaded( sObj ); };document.body.appendChild( sObj );
-
HTML
JavaScript XML JavaScript
-
, XHR HTTP GET
-
tempo:
-
XHR, , XML, HTML, JavaScript/*
-
: tempo, ,
-
AJAX Framework XHR, , bugs
-
AJAX Framework AJAX FrameworkXHR UtilityFramework: Google Web Toolkit, ZK, Dojo, RPC: DWR, JSON-RPC, Libraries: Prototype, DWR AJAX Framework
Direct Web Remoting1:50
-
: DWR ?
-
DWR(Direct Web Remoting)RPC-Style AJAXEasy AJAX for JavaEasy to integrateAJAX:Expose Java to the BrowserReverse AJAX:Expose JavaScript to the Server
-
DWRFrom: http://getahead.ltd.uk/dwr/overview/dwr
-
: DWR, ?
-
Step 1: Download DWR: http://getahead.ltd.uk/dwr/downloadCopy dwr.jar into WEB-INF/lib2:00
-
Step 2: web.xml
dwr-invoker DWR Servlet org.directwebremoting.servlet.DwrServlet debug true
dwr-invoker /dwr/*
web.xml, DwrServlet
-
Step 3: dwr.xml
Java dwr.xml
-
DEMO: Installationhttp://localhost:8080/dwr-minimal/dwr/
-
DWR web.xml init-param, debug = true
dwr.xml !!!
debug true
-
: 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
-
Step3: include JavaScript
engine.js util.js dwr scriptHelloWorld.js script
-
Step4: client JavaScript
window.onload = function() { functon callback(str) { $('output').innerHTML = str; } HelloWorld.sayHelloWorldTo("JavaTwo 2006", callback);}
-
callback function, Meta-data Object callback functionpublic class Remote { public String getData(int index) { ... }}function handleGetData(str) { alert(str);}
Remote.getData(42, handleGetData);
-
Demo: Hello Worldhttp://localhost:8080/dwr-helloworld/http://localhost:8080/dwr-helloworld/dwr/
Tips & Tricks about DWR2:15
-
: Java session application scope ?
-
Scope scope dwr.xml create application, session, request, page
-
: ?
-
Converters dwr.xml remote
var r = Remote.method(param);Uses a ConverterUses a CreatorFrom: http://getahead.ltd.uk/dwr/overview/dwr
-
ConvertersPrimitive Type ( class )StringDate ConvertersBean/Object ConverterArray/Collection ConverterDom ObjectsEnum Converter
-
Converters
-
: Java ?
-
, dwr.xml Java
-
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 users = new ArrayList();
public synchronized void add(User user) { users.add(user); }
public synchronized List getAll() { return new ArrayList(users); }}
-
Step3: client scriptfunction 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 Formhttp://localhost:8080/dwr-form/
Reverse AJAX2:25
-
: jsp , Demo ?
-
Reverse AJAXAJAX( WEB ), Pull ModelReverse AJAXPush Model ( pull )PollingComet(Long Live HTTP)
-
PollingN request1.2.3.req1req2req3req4
-
Comet1.2.3.req1req2
-
Reverse AJAXDWRComet(Long Live HTTP)PollingServer 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
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"));}
-
Demo: DWR Chathttp://localhost:8080/dwr-chat/before.jsphttp://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 Reversehttp://localhost:8080/dwr-reverse/before.jsp http://localhost:8080/dwr-reverse/after.jsp
Web Framework Integration2:35
-
: , include , ?
-
AJAX Includes, DWR Server-side IncludeServer
Browserpublic String getInclude() { return WebContextFactory.get() .forwardToString("/forward.jsp");}function update() { Demo.getInclude(function(html) { DWRUtil.setValue("somediv", html); });
-
:, spring beans, ?
-
Spring IntegrationSpringCreator
web.xml
contextConfigLocation /WEB-INF/classes/beans.xml
-
:, Struts, Webwork ?
-
Struts IntegrationStrutsCreator
Webwork Action , JavaScript form Action
2:40
-
: , ?
-
Batching, dwr , Batch beginBatch();endBatch();
-
: gmail loading message,
-
Loading Message onLoad useLoadingMessage() DWRUtils.useLoadingMessage();OrDWRUtils.useLoadingMessage(Waiting);
-
: :(
-
Error HandlingGlobal Error (Exception) Handling
Meta Datafunction handler(msg) { alert(msg);}
DWREngine.setErrorHandler(handler);Remote.method(params, { callback:function(data) { ... }, errorHandler:handler});
-
: , DWR/AJAX , back/forward :(
-
XHR Really Simple Historyhttp://codinginparadise.org/projects/dhtml_history/README.html
-
: ?
-
DWR IE 5.5+Firefox 1.0+Mozilla 1.7+Safari 1.2+KonqueorOpera 7.5.4+ ( Reverse AJAX)
-
: framework , DHR ?
-
DWR AJAX FrameworkJavaScript Libraries Dojo ToolkitPrototypeScript.aculo.usAJAX Framework GWTZK
2:45
Thank you!
, AJAX Framework, DWR [email protected]
-
..