DWR系统学习笔记一

最新推荐文章于 2021-01-12 07:14:00 发布

最新推荐文章于 2021-01-12 07:14:00 发布 · 214 阅读

文章标签：

#DWR #Java #JavaScript #JSP #Tomcat #ViewUI

ajax/js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何集成DWR实现Ajax通信。步骤包括从官网下载DWR、配置web.xml、创建dwr.xml并定义服务接口，以及在JSP页面中使用DWR进行调用。

1.官方网站下载:[url]http://getahead.org/dwr/download[/url]
2.dwr.jar拷贝到lib目录下
3.web.xml


<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
      <!--开发阶段把debug设置为true,可以http://localhost:8080/dwrtest/dwr进行详细查看-->
    </init-param>
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>initApplicationScopeCreatorsAtStartup</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>maxWaitAfterWrite</param-name>
      <param-value>100</param-value>
    </init-param>
    <init-param>   
            <param-name>crossDomainSessionSecurity</param-name>   
            <param-value>false</param-value>   
    </init-param>

    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
	    <servlet-name>dwr-invoker</servlet-name>
	    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

4.在WEB-INF下建立dwr.xml


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

<dwr>

  <allow>
    <create creator="new" javascript="service">
      <param name="class" value="helloworld.Service"/>
      <include method="sayHello"/>
    </create>
  </allow>

</dwr>

[color=red]注:<create>标签里的属性javascript的值有2个意思。
一：把相应的类生成一个js文件，那么该js文件的名字。
二：前台调用该类的某个方法时的引用名字。[/color]

5.Service.java


package helloworld;

public class Service {

	public String sayHello(String yourname){
		return "hello :" + yourname;
	}
}

6.和WEB-INF位于同一目录下的helloworld.jsp:


<%@ page language="java" pageEncoding="UTF-8"%> 
<html> 
<head>
	 <title>
		 My JSP 'first_dwr.jsp' starting page
	 </title> 
	 <script type='text/javascript' src='dwr/util.js'></script> 
	 <script type='text/javascript' src='dwr/engine.js'></script>
	 <script type='text/javascript' src='dwr/interface/service.js'> </script> 
	 <script type="text/javascript"> 

	 	function show(){
	 		var str = $("text").value;
	 		service.sayHello(str,callBack);//not callBack();
	 	}
	 	function callBack(data)//not (var data)
	 	{
	 		dwr.util.setValue("showName",data,{escapeHtml:true});
	 	}
	 </script> 

 </head>

 <body>

  <input type="text" id="text" ><input type="button" onclick="show()" value="submit">
  <div id="showName"></div>

 </body> 

 </html>

注：
[color=red]1.util.js和engine.js都不需要从下载的dwr的源文件包里拷贝过来。
2.service.js文件是动态生成的。该js文件的名字由dwr.xml里的<create>标签的属性javascript的值决定
3.如果把util.js和engine.js拷贝到工程里并且引用目录变为：
<script type='text/javascript' src='scripts/util.js'></script>
<script type='text/javascript' src='scripts/engine.js'></script>
那么dwr.util.setValue("showName",data,{escapeHtml:true});这些函数用不了。[/color]
4.


                function show()
                {
	 		var str = $("text").value;
	 		service.sayHello(str,callBack);//not callBack();
	 	}

[color=red]
回调函数直接写名字，不用带参数。
service.sayHello,为什么是service，而不是其它？因为：由dwr.xml里的<create>标签的属性javascript的值决定
[/color]


	 	function callBack(data)//not (var data)
	 	{
	 		dwr.util.setValue("showName",data,{escapeHtml:true});
	 	}

[color=red]
function callBack(var data) 加var类型就不对了。
{escapeHtml:true}的意思是对html标签进行过滤，也就是html内容原样输出。<html>输出为<html>，<>输出为<>
{escapeHtml:false}的意思是对html标签不进行过滤，也就是html内容不输出。<html>不输出，<>输出为<>，因为<>不为html标签
[/color]

5. <script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/interface/service.js'> </script>
/dwr/util.js [color=red]以/开头代表服务器的web应用目录(对tomcat而言，就是${tomcat_home}/webapp)，对本例而言，应该改为;/dwrtest/dwr/util.js[/color]
dwr/util.js [color=red]不以/开头的代表当前文件的目录，对本例而言，就是helloworld.jsp所在目录[/color]