Download - Ajax Transportation Methods
- 1.AJAX client/server
2.
- Javaworld.tw :tempo
- Email:[email_address]
- Blog:http:// www.pocketshark.com/blog/page/tempo
3. , 4. : Hi , session ? 5.
- AJAX
-
- AJAX(Rich Internet Application)
-
- User Interface: DHTML
-
- : XMLHttpRequest (XHR) ,
- AJAX Framework
-
- DWR(Direct Web Remoting) AJAXJava ,
-
- AJAX /Reverse AJAX
6.
-
- http:// www.marketwatch.com
-
- http://localhost:8080/dwr-reverse/before.jsp
-
- http://localhost:8080/dwr-reverse/after.jsp
7.
- 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
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
- A nd
- X ML
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
//XHR request = new XMLHttpRequest(); // request. onreadystatechange =handleResponse; // request. open ("GET","http://abc.com",true); // request. send (null); 17. 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; } } } 18. DEMO: Hello World
- 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.
- XHR
-
- IE 5.0+
-
- Mozilla 1.0+
-
- Safari 1.2
-
- Konqueor
-
- Opera 8.0
- XHR
-
- 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
-
- Date
- 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
- DWR
-
- 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.
- DWR
-
- 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
-
- GWT
-
- ZK
2:45 103. Thank you! ,AJAX Framework,DWR [email_address] 104. ..