ajax transportation methods

1.AJAX client/server

Javaworld.tw :tempo

Email:[email_address]

Blog:http:// www.pocketshark.com/blog/page/tempo

3. , 4. : Hi , session ? 5.

AJAX(Rich Internet Application)

User Interface: DHTML

: XMLHttpRequest (XHR) ,

AJAX Framework

DWR(Direct Web Remoting) AJAXJava ,

AJAX /Reverse AJAX

http:// www.marketwatch.com

http://localhost:8080/dwr-reverse/before.jsp

http://localhost:8080/dwr-reverse/after.jsp

http:// gabbly.com/http://www.pocketshark.com/blog/page/tempo /

http://localhost:8080/dwr-chat/before.jsp

http://localhost:8080/dwr-chat/after.jsp

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 9. AJAX 1:35 10. : AJAX? ? 11. AJAX

A synchronous

J avaScript

XHTML&CSS DOM JavaScript XMLHttpRequest AJAX = DHTML + XHR 12. Classic Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php 13. AJAX Web Applications From: http://adaptivepath.com/publications/essays/archives/000385.php 14. : AJAX ? 15. XHR(XMLHttpRequest)

JavaScriptHttpConnection

open(string url,string asynch):

send(string):

onreadystatechange :

status: HTTP

responseXML :XML DOM

responseText :

16. XHR

//XHR request = new XMLHttpRequest(); // request. onreadystatechange =handleResponse; // request. open ("GET","http://abc.com",true); // request. send (null); 17. XHR

http://localhost:8080/xhr/index.jsp

19. Tips & Tricks about XHR 1:40 20. : , ,XML ? 21. XHR

, XHRXML ,text ,HTML ,JavaScript (JSON)

[{author:tempo, title: '}, {author:browser,koji, title:JSP '}, {author:caterpillar, title:Spring '}, {author:piggy, title:Java2 ]; 22. : XHR ? 23.

IE 5.0+

Mozilla 1.0+

Safari 1.2

Konqueor

Opera 8.0

IE:ActiveX

Others:JavaScript

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, ? 26.

,XHR ,

For example,http:// www.abc.com/test.jsp ,XHR:

: test.abc.com/*, abc.com/*

:www.abc.com/*

AJAX SOA?

27. : tempo,XHR , 28.

engine.jsutil.jsdwrscript

HelloWorld.jsscript

52. Step4:clientJavaScript window.onload =function(){ functon callback (str) { $('output'). innerHTML= str; } HelloWorld. sayHelloWorldTo (" JavaTwo 2006 ",callback ); } 53.

callback function ,

Meta-data Objectcallback function

public classRemote { public StringgetData (intindex ) { ... } } function handleGetData (str) { alert(str); } Remote.getData(42,handleGetData ); 54. Demo: Hello World

http://localhost:8080/dwr-helloworld/

http://localhost:8080/dwr-helloworld/dwr/

55. Tips & Tricks about DWR 2:15 56. : Javasessionapplication scope ? 57. Scope

scopedwr.xmlcreate

application, session, request, page

58. : ? 59. Converters

dwr.xmlremote

varr=Remote .method( param );

Uses a Converter Uses a Creator From:http://getahead.ltd.uk/dwr/overview/dwr 60. Converters

Primitive Type( class )

String

Converters

Bean/Object Converter

Array/Collection Converter

Dom Objects

Enum Converter

61. Converters

dwr.xml

62. : Java ? 63. ,

dwr.xmlJava

< exclude method = noUse "/> < param name =" exclude "value =" password "/> 64. tempo: Web Form 2:20 65. Step1:Java public classUser{ private Stringid ; private Stringpassword ; private Stringname ; private Stringtitle ; } 66. Step2:Java public classUserManager{ private final List users = new ArrayList(); public synchronized voidadd (User user) { users. add (user); } public synchronized ListgetAll () { return new ArrayList(users); } } 67. Step3: client script functionaddUser () { 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; } ]; functionfillTable (users) { DWRUtil.removeAllRows("usersBody"); DWRUtil.addRows("usersBody", users, cellFuncs); } 68. Demo: DWR Form

http://localhost:8080/dwr-form/

69. Reverse AJAX 2:25 70. : jsp ,Demo ? 71. Reverse AJAX

AJAX ( WEB )

PullModel

Reverse AJAX

PushModel ( pull )

Polling

Comet (Long Live HTTP)

72. Polling N request 1. 2. 3. req1 req2 req3 req4 73. Comet 1. 2. 3. req1 req2 74. Reverse AJAX

Comet (Long Live HTTP)

Polling

Server PushJavaScript Client

ScriptSession. addScript (" alert('Hi') "); 75. Reverse AJAX

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 79. Demo: DWR Chat

http://localhost:8080/dwr-chat/before.jsp

http://localhost:8080/dwr-chat/after.jsp

80. : Demo , ? 2:30 81. Step1:Java private classSendTickerDataTask 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)); } } 82. Demo: DWR Reverse

http://localhost:8080/dwr-reverse/before.jsp

http://localhost:8080/dwr-reverse/after.jsp

83. Web Framework Integration 2:35 84. : ,include , ? 85. AJAX Includes

, DWRServer-side Include

Server

Browser

public String getInclude () { return WebContextFactory. get () . forwardToString (" /forward.jsp "); } function update () { Demo.getInclude(function(html) { DWRUtil. setValue (" somediv ", html); } ); 86. : ,spring beans, ? 87. Spring Integration

SpringCreator

web.xml

contextConfigLocation /WEB-INF/classes/beans.xml 88. : ,Struts, Webwork ? 89. Struts Integration

StrutsCreator

Webwork

Action ,JavaScriptformAction

90. 2:40 91. : , ? 92. Batching

,dwr ,Batch

beginBatch (); endBatch (); 93. :gmailloading message, 94. Loading Message

onLoaduseLoadingMessage()

DWRUtils.useLoadingMessage(); Or DWRUtils.useLoadingMessage(Waiting); 95. ::( 96. Error Handling

Global Error (Exception) Handling

Meta Data

function handler(msg) { alert(msg); } DWREngine.setErrorHandler(handler); Remote.method(params, { callback:function(data) { ... }, errorHandler:handler }); 97. : , DWR/AJAX , back/forward:( 98.

XHR < script >

Really Simple History

http:// codinginparadise.org/projects/dhtml_history/README.html

99. : ? 100.

IE 5.5+

Firefox 1.0+

Mozilla 1.7+

Safari 1.2+

Konqueor

Opera 7.5.4+ ( Reverse AJAX)

101. :framework ,DHR ? 102. DWRAJAX Framework

JavaScript Libraries

Dojo Toolkit

Prototype

Script.aculo.us

AJAX Framework

2:45 103. Thank you! ,AJAX Framework,DWR [email_address] 104. ..

ajax transportation methods

Documents