Javaworld.tw: tempoEmail: yenwen.feng@willmobile.comBlog: 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 yenwen.feng@willmobile.com

..