Step by Step DWR Application – Simple AJAX in JAVA

Author posted by Jitendra on Posted on under category Categories JSP, Servlet and tagged as Tags , , with 18 Comments on Step by Step DWR Application – Simple AJAX in JAVA

Step by Step DWR Application – Simple AJAX in JAVA

In this article, i am going to explain the step by step approach to create the DWR (Direct Web Remoting) application in JAVA.

DWR consists of two main parts:

  • A Java Servlet running on the server that processes requests and sends responses back to the browser.
  • JavaScript running in the browser that sends requests and can dynamically update the webpage.
How DWR works in Java
How DWR works in Java

JavaScript file that must be included in your application for DWR:

1. Auto generated Javascript of your equivalent class. in this case, my java class name is “Message”, so the javascript complete path is “/<App NAME>/dwr/interface/<YOUR CLASS NAME>.js“.

in my application the path is “/SimpleDWR/dwr/interface/Message.js”

2. DWR engine file : “/<APP NAME>/dwr/engine.js”. This is responsible for marshaling of Java objects/Values between Client and Server.

3. This is not necessary, but it provides nice set of utility methods to work with HTML code :

/<APP NAME>/dwr/util.js

Lets start with our project:

Step 1: Create a Dynamic Website.
Step 2: Download and add the dwr jar files in the “web-inf/ lib” folder.
Download location : http://directwebremoting.org/dwr/downloads/index.html
Step 3: add following code in web.xml.

  <servlet>
  <servlet-name> dwr-invoker </servlet-name>
  <display-name> DWR Servlet </display-name>
  <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class>
  <init-param>
     <param-name> debug </param-name>
     <param-value> true </param-value>
  </init-param>
</servlet>

<servlet-mapping>
  <servlet-name> dwr-invoker </servlet-name>
  <url-pattern> /dwr/* </url-pattern>
</servlet-mapping>

Step 4: create a dwr.xml alongside the web.xml and add below code:

<!DOCTYPE dwr PUBLIC
   "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
   "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
   <create creator="new" javascript="Message">
   <param name="class" value="com.G2.POJO.Message"/>
   </create>
</allow>
</dwr>

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 “Message”, using which we can call the server side methods.

Step 5: create Java class, which will be called by the DWR javascript:

package com.G2.POJO;

public class Message {
	public String getMessage() {
		return "Hello DWR from Server";
	}
}

Step 6: create index.html with below code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DWR Demo</title>
<script type='text/javascript' src='/SimpleDWR/dwr/interface/Message.js'></script>
<script type='text/javascript' src='/SimpleDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/SimpleDWR/dwr/util.js'></script>
</head>
<body>
<input value="click me!!!" type="button" onclick="update();" />
<div style="background-color: #ffeaa7;font-weight: bold;width: 300px;" id="divResponse">
Message From Server</div>
<script type="text/javascript">
function update()
{
    Message.getMessage(function(data) {
		dwr.util.setValue("divResponse", data);
	  });
}
</script>
</body>
</html>

Start the application and Test by writing below URL:

http://localhost:8080/[YOUR-WEBAPP]/dwr/

You will see a page containing the information about class added in step 5.
Now start the application normally, and your program will run showing that how easy is AJAX with DWR.

Simple AJAX in JAVA using DWR
Simple AJAX in JAVA using DWR

Clicking on button, it will display the response coming from the java code.

You can download the war file of the examples from here and explore the DWR in depth.

Related posts

  • Ercsenyi

    Hi Jitendra,

    Unfortunately dwr.xml is missing! Step#4 is the content of the web.xml instead of dwr.xml.

    A.

    • Thanks Ercsenyi,
      for pointing out. I have update the code.
      Regards,
      Jitendra Zaa

      • Coolsrikkanth

        hi,
           am getting an error in the console Message is not defied. can u pls help me out.

        thanks

        • Anonymous

          Hi Srikkanth,
          Can you please check the “dwr.xml” for proper settings. If you have updated the name of class or configuration then that may cause the problem.
          Regards,
          Jitendra Zaa

          • Coolsrikkanth

            Hi JitendraZaa ,

               
                   
                       
                   
               
               
               

            this is what am using in my dwr.xml still am not able find the issue.

            thanks

          • Anonymous

            Hi Srikanth,
            Javascript name is “test” in your configuration.
            Therefore in your HTML page instead of javascript file “Message.js”, you will need to import “test.js”

          • Coolsrikkanth

            Hi JitendraZaa ,
                 That has worked. Thanks for your in time reply.

  • Coolsrikkanth

    hi,
       am getting an error in the console Message is not defied. can u pls help me out.thanks

    • Anonymous

      Hi Srikkanth,
      Can you please check the “dwr.xml” for proper settings. If you have updated the name of class or configuration then that may cause the problem.
      Regards,
      Jitendra Zaa

  • Muffy

    hi,

    ReferenceError: Message is not defined

    my dwr code is

    my jsp file code is

    <script type='text/javascript' src='/dwr/interface/Message.js’>

    • Balkrushna

      just add

  • Rupesh Mehta

    Hi,
    I did everything as show above but means clicking button did not displayed “Hello DWR from Server”.
    So, I moved “” to top in the script import list.
    And, it solved the problem. Now, clicking the button displays “Hello DWR from Server” message as expected.

  • ss

    ddfgd d dfgd

  • Shantanoo

    Hi,
    Thanks for the information.
    I’m facing am issue in my application. It is being migrated from WAS to JBOSS. On a particular screen, when it opens, it gives a popup alert with message “Session Error”. But when I change the value of “crossDomainSessionSecurity” to false in web.xml, the alert does not comes.
    I’ve read that changing the value of “crossDomainSessionSecurity” to false will not prevent CSRF issues. What should I do ? Please suggest.
    Thanks.

  • vinit bhardwaj

    Very useful to understand DWR. Only one correction I have to do by placing DWR Servlet before dwr-invoker

    thanks a lot Jiterdra

    • Happy that it helped you

      • vinit bhardwaj

        Thank you

  • arun saini

    hello sir,
    there is an exception “ClassNotFoundException: org.directwebremoting.servlet.DwrServlet”
    what will be solution for this. please tell sir.
    thank you…