Dwr is an open source Java library that helps you implement the Ajax website.

It lets you call Java on the Web server from Javascript code in the browser, just as Java code is in the browser.

Dwr mainly consists of two parts:

Servlet s running on the server process requests and return the results to the browser.

Javascript running on browsers can send requests and dynamically change pages.

Dwr generates Javascript code dynamically based on your Java classes.

The magic of these codes is to make you feel that the whole Ajax call happens on the browser, but in fact the server executes these codes, and DWR is responsible for data transfer and conversion.

Download the latest version of the jar package from the DWR website at: http://directwebremoting.org/dwr/downloads/index.html

Put the jar package in the lib folder of WEB-INF. At the same time, dwr relies on the commons-logging.jar package

The configuration web.xml file is as follows

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.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>

Configure dwr as follows

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
        "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

<!-- Key configuration -->       
<dwr>
    <allow>
        <create creator="new" javascript="Chat">
            <param name="class" value="com.epri.xts.wxqyh.app.chatroom.module.Chat"/>
        </create>
        <convert converter="bean" match="com.epri.xts.wxqyh.app.chatroom.bean.Message"/>
    </allow>
</dwr>

<!--
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
--> 

dwr.xml is the core configuration file of dwr, and its main tags are < converter >, < convert >, < create >.

The < create > tag is an important tag in dwr, which is used to describe the interaction between java (server side) and javascript (client side). Its basic format is as follows:

<allow>
  <create creator="..." javascript="..." scope="...">
    <param name="..." value="..."/>
    <auth method="..." role="..."/>
    <exclude method="..."/>
    <include method="..."/>
  </create>
  ...
</allow>

creator and javascript are mandatory attributes, others can be ignored. creator contains the following values:

New: Java creates objects with "new" keywords

none: It does not create objects (v1.1+)

scripted: Create objects using scripting languages, such as BeanShell or Groovy, through BSF

Spring: Accessing Bean s through the Spring Framework

Struts: FormBean using Struts (v1.1+)

Jsf: Bean using JSF (v1.1+)

Pageflow: Access to Weblogic or Beehive's PageFlow (v1.1+)

ejb3: Using EJB3 session bean (v2.0+)

This is a beginner's lesson. Practical java new creates objects.

4. Page Configuration

Pages need to introduce three JS

<script src="<%=ctxPath%>/dwr/interface/Chat.js" type="text/javascript"></script>
<script src="<%=ctxPath%>/dwr/engine.js" type="text/javascript"></script>
<script src="<%=ctxPath%>/dwr/util.js" type="text/javascript"></script> 

engine.js must refer to util.js if you need to use some convenient tools provided by dwr, and then the JS file generated automatically by dwr.

The name is the same as the javascript attribute value of the create tag in dwr.xml, and must be the directory at the beginning of dwr/interface

5. javascript code:

// send message
function sendMessage() {
    var text = DWRUtil.getValue("message");
    if("" != text){
        DWRUtil.setValue("message", "");
        Chat.addMessage(text, name, taskId, gotMessages);
    }
}
function gotMessages(messages) {
    var chatlog = "";
    for ( var data in messages) {
        chatlog = "<div> <li class='even'>" + messages[data].text + "</li></div
    }
    DWRUtil.setValue("chatlog", chatlog);
    setTimeout("queryMessage()", 2000);
}

function queryMessage() {
    Chat.getMessages(taskId, gotMessages);
}

html code

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    String ctxPath = request.getContextPath();
%>
<html>
<head>
<title>Chat group</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/add.css">
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body class="bgc" onload="queryMessage()">

    <div data-role="page" id="pageone">

        <!-- Chat Content Display Area -->
        <div data-role="content" class="container" role="main">
            <ul class="content-reply-box mg10" id="chatlog">
            
            </ul>
        </div>
        
        <!-- Lower input box -->
        <div data-position="fixed" data-role="footer">
            <ul class="footer">
                <li class="col-xs-3">
                    <span class="b_pic">
                        <form action="<%=request.getContextPath()%>/chat" method="post"
                            enctype="multipart/form-data" data-ajax="false" name="form"
                            id="form"  target="relnews">
                            <input type="hidden" name="name" id="name" value="" /> 
                            <input type="hidden" name="taskId" id="taskId" value="" /> 
                            <input type="file" name="image" id="image" class="photo" onchange="sendImage(this)" />
                        </form>
                    </span>
                </li>
                <li class="col-xs-6"><input type="text" name="fname" id="message"></li>
                <li class="col-xs-4"><a href="" data-role="button"
                    class="b_submit" id="submitInfo" onclick='sendMessage();'>Send out</a></li>
            </ul>
        </div>
        
    </div>
    
<!-- Hidden fields are not used to jump pages after submission as forms -->
    <iframe align="center" frameborder="0" marginheight="0" marginwidth="0"
        name="relnews" id="hiddenIframe" scrolling="no"
        style="width: 100%; height: 100%; display: none"> </iframe>
        
</body>
<script src="<%=ctxPath%>/dwr/interface/Chat.js" type="text/javascript"></script>
<script src="<%=ctxPath%>/dwr/engine.js" type="text/javascript"></script>
<script src="<%=ctxPath%>/dwr/util.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/chat.js"></script>
</html>

6. Other

dwr can set whether to access java code asynchronously:

Dwr.engine.setAsync (false); //false is synchronous and true (default) is asynchronous
As well as dwr's handling of exceptions, a simple global exception is marked here, and the following learning supplement of subdivision is added:

dwr.engine.setErrorHandler(errh);
function errh(errorString, exception) {
    errorFlag = true;
    alert("Operation failed! "";
}