{"id":1664,"date":"2011-03-15T17:07:30","date_gmt":"2011-03-15T11:37:30","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=1664"},"modified":"2011-03-15T17:07:30","modified_gmt":"2011-03-15T11:37:30","slug":"step-by-step-dwr-application-simple-ajax-in-java","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/step-by-step-dwr-application-simple-ajax-in-java\/","title":{"rendered":"Step by Step DWR Application &#8211; Simple AJAX in JAVA"},"content":{"rendered":"<p>In this article, i am going to explain the step by step approach to create the <strong>DWR (Direct Web Remoting)<\/strong> application in JAVA.<\/p>\n<p><strong>DWR consists of two main parts:<\/strong><\/p>\n<ul>\n<li>A Java Servlet running on the server that processes requests and sends responses back to the browser.<\/li>\n<li>JavaScript running in the browser that sends requests and can dynamically update the webpage.<\/li>\n<\/ul>\n<figure id=\"attachment_1665\" aria-describedby=\"caption-attachment-1665\" style=\"width: 439px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/How-DWR-works-in-Java.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1665 \" title=\"How DWR works in Java\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/How-DWR-works-in-Java.jpg?resize=439%2C175&#038;ssl=1\" alt=\"How DWR works in Java\" width=\"439\" height=\"175\" \/><\/a><figcaption id=\"caption-attachment-1665\" class=\"wp-caption-text\">How DWR works in Java<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p style=\"text-align: left;\"><span style=\"text-decoration: underline;\"><strong>JavaScript file that must be included in your application for DWR:<\/strong><\/span><\/p>\n<p style=\"text-align: left;\">1.\u00a0Auto generated\u00a0Javascript of your equivalent class. in this case, my java class name is &#8220;Message&#8221;, so the javascript complete path is &#8220;<strong>\/&lt;App NAME&gt;\/dwr\/interface\/&lt;YOUR CLASS NAME&gt;.js<\/strong>&#8220;.<\/p>\n<p style=\"text-align: left;\">in my application the path is &#8220;\/SimpleDWR\/dwr\/interface\/Message.js&#8221;<\/p>\n<p style=\"text-align: left;\">2. DWR engine file : <strong>&#8220;\/&lt;APP NAME&gt;\/dwr\/engine.js&#8221;<\/strong>. This is responsible for marshaling of Java objects\/Values between Client and Server.<\/p>\n<p style=\"text-align: left;\">3. This is not necessary, but it provides nice set of utility methods to work with HTML code :<\/p>\n<p style=\"text-align: left;\">&#8220;<strong>\/&lt;APP NAME&gt;\/dwr\/util.js<\/strong>&#8220;<\/p>\n<p>Lets start with our project:<\/p>\n<p><strong>Step 1:<\/strong> Create a Dynamic Website.<br \/>\n<strong>Step 2: <\/strong>Download and add the dwr jar files in the &#8220;web-inf\/ lib&#8221;\u009d folder.<br \/>\nDownload location : <a title=\"Download link\" href=\"http:\/\/directwebremoting.org\/dwr\/downloads\/index.html\" target=\"_blank\">http:\/\/directwebremoting.org\/dwr\/downloads\/index.html<\/a><br \/>\n<strong>Step 3:<\/strong> add following code in web.xml.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n  &lt;servlet&gt;\n  &lt;servlet-name&gt; dwr-invoker &lt;\/servlet-name&gt;\n  &lt;display-name&gt; DWR Servlet &lt;\/display-name&gt;\n  &lt;servlet-class&gt; org.directwebremoting.servlet.DwrServlet &lt;\/servlet-class&gt;\n  &lt;init-param&gt;\n     &lt;param-name&gt; debug &lt;\/param-name&gt;\n     &lt;param-value&gt; true &lt;\/param-value&gt;\n  &lt;\/init-param&gt;\n&lt;\/servlet&gt;\n\n&lt;servlet-mapping&gt;\n  &lt;servlet-name&gt; dwr-invoker &lt;\/servlet-name&gt;\n  &lt;url-pattern&gt; \/dwr\/* &lt;\/url-pattern&gt;\n&lt;\/servlet-mapping&gt;\n\n<\/pre>\n<p><strong>Step 4:<\/strong> create a dwr.xml alongside the web.xml and add below code:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE dwr PUBLIC\n   &quot;-\/\/GetAhead Limited\/\/DTD Direct Web Remoting 1.0\/\/EN&quot;\n   &quot;http:\/\/www.getahead.ltd.uk\/dwr\/dwr10.dtd&quot;&gt;\n&lt;dwr&gt;\n&lt;allow&gt;\n   &lt;create creator=&quot;new&quot; javascript=&quot;Message&quot;&gt;\n   &lt;param name=&quot;class&quot; value=&quot;com.G2.POJO.Message&quot;\/&gt;\n   &lt;\/create&gt;\n&lt;\/allow&gt;\n&lt;\/dwr&gt;\n<\/pre>\n<p>As you can see in above code, i have added the creator attribute which will tell the dwr engine to create the javascript object named &#8220;Message&#8221;, using which we can call the server side methods.<\/p>\n<p><strong>Step 5: <\/strong>create Java class, which will be called by the DWR javascript:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\npackage com.G2.POJO;\n\npublic class Message {\n\tpublic String getMessage() {\n\t\treturn &quot;Hello DWR from Server&quot;;\n\t}\n}\n<\/pre>\n<p><strong>Step 6:<\/strong> create index.html with below code:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/html4\/loose.dtd&quot;&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=ISO-8859-1&quot;&gt;\n&lt;title&gt;DWR Demo&lt;\/title&gt;\n&lt;script type='text\/javascript' src='\/SimpleDWR\/dwr\/interface\/Message.js'&gt;&lt;\/script&gt;\n&lt;script type='text\/javascript' src='\/SimpleDWR\/dwr\/engine.js'&gt;&lt;\/script&gt;\n&lt;script type='text\/javascript' src='\/SimpleDWR\/dwr\/util.js'&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;input value=&quot;click me!!!&quot; type=&quot;button&quot; onclick=&quot;update();&quot; \/&gt;\n&lt;div style=&quot;background-color: #ffeaa7;font-weight: bold;width: 300px;&quot; id=&quot;divResponse&quot;&gt;\nMessage From Server&lt;\/div&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\nfunction update()\n{\n    Message.getMessage(function(data) {\n\t\tdwr.util.setValue(&quot;divResponse&quot;, data);\n\t  });\n}\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>Start the application and Test by writing below URL:<\/p>\n<blockquote><p>http:\/\/localhost:8080\/[YOUR-WEBAPP]\/dwr\/<\/p><\/blockquote>\n<p>You will see a page containing the information about class added in step 5.<br \/>\nNow start the application normally, and your program will run showing that how easy is AJAX with DWR.<\/p>\n<figure id=\"attachment_1666\" aria-describedby=\"caption-attachment-1666\" style=\"width: 318px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/Simple-AJAX-in-JAVA-using-DWR.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1666\" title=\"Simple AJAX in JAVA using DWR\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/Simple-AJAX-in-JAVA-using-DWR.jpg?resize=318%2C269&#038;ssl=1\" alt=\"Simple AJAX in JAVA using DWR\" width=\"318\" height=\"269\" \/><\/a><figcaption id=\"caption-attachment-1666\" class=\"wp-caption-text\">Simple AJAX in JAVA using DWR<\/figcaption><\/figure>\n<p>Clicking on button, it will display the response coming from the java code.<\/p>\n<p>You can <a title=\"Download WAR file of DWR\" href=\"http:\/\/directwebremoting.org\/dwr\/downloads\/index.html\" target=\"_blank\">download the war file of the examples<\/a> from here and explore the DWR in depth.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by Step DWR Application &#8211; Simple AJAX in JAVA<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4,11],"tags":[33,83,330],"class_list":["post-1664","post","type-post","status-publish","format-standard","hentry","category-jsp","category-servlet","tag-ajax","tag-dwr","tag-jsp"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2034,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/tutorial-of-simple-jsp-tiles-application-without-struts\/","url_meta":{"origin":1664,"position":0},"title":"Tutorial of Simple JSP Tiles application without Struts","author":"Jitendra","date":"April 15, 2011","format":false,"excerpt":"Example of Simple JSP Tiles application without Struts","rel":"","context":"In &quot;JSP&quot;","block_context":{"text":"JSP","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/jsp\/"},"img":{"alt_text":"Simple JSP Tiles without Struts","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/04\/Simple-JSP-Tiles-without-Struts.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1643,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/servlet-hibernate-jquery-and-ajax-based-google-like-chat\/","url_meta":{"origin":1664,"position":1},"title":"Servlet, Hibernate, jQuery and Ajax based google like chat","author":"Jitendra","date":"March 14, 2011","format":false,"excerpt":"Servlet, Hibernate, jQuery and Ajax based google like chat with source code","rel":"","context":"In &quot;Hibernate&quot;","block_context":{"text":"Hibernate","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/hibernate\/"},"img":{"alt_text":"Servlet, Hibernate, jQuery and Ajax based google like chat","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/Servlet-Hibernate-jQuery-and-Ajax-based-google-like-chat.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1460,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/setting-session-timeout-in-jsp-servlet\/","url_meta":{"origin":1664,"position":2},"title":"Setting Session Timeout in JSP Servlet","author":"Jitendra","date":"February 7, 2011","format":false,"excerpt":"How to set the Session Time out in JSP and Servlet","rel":"","context":"In &quot;JSP&quot;","block_context":{"text":"JSP","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/jsp\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1976,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/j2ee-servlet-jsp-jsf-and-jms-version-table\/","url_meta":{"origin":1664,"position":3},"title":"J2EE &#8211; Servlet , JSP , JSF and JMS Version Table","author":"Jitendra","date":"April 13, 2011","format":false,"excerpt":"J2EE - Servlet , JSP , JSF and JMS Version Table","rel":"","context":"In &quot;JSP&quot;","block_context":{"text":"JSP","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/jsp\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1501,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/servlet\/difference-in-sendredirect-and-requestdispatcher-in-servlet\/","url_meta":{"origin":1664,"position":4},"title":"Difference in SendRedirect() and RequestDispatcher() in Servlet","author":"Jitendra","date":"February 13, 2011","format":false,"excerpt":"difference in SendRedirect() and RequestDispatcher() in Servlet","rel":"","context":"In &quot;Servlet&quot;","block_context":{"text":"Servlet","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/servlet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2470,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/salesforce-tutorial-create-simple-ajax-based-visualforce-page\/","url_meta":{"origin":1664,"position":5},"title":"Salesforce Tutorial &#8211; Create Simple Ajax based Visualforce page","author":"Jitendra","date":"October 17, 2011","format":false,"excerpt":"Salesforce Tutorial - Step by step tutorial to create AJAX based application in visualforce page with Apex class","rel":"","context":"In &quot;Web Technology&quot;","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"Simple AJAX demo in salesforce using visualforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/10\/Simple-AJAX-demo-in-salesforce-using-visualforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/1664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=1664"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/1664\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}