DWR使用入门教程

前端之家收集整理的这篇文章主要介绍了DWR使用入门教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.DWR简介

DWRDirect Web Remoting)是一个Ajax的开源框架,用于改善web页面Java类交互的远程服务器端的交互体验,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。

2.开发流程

  1. 编写业务代码,该代码是和dwr无关的。

  2. 确认业务代码中哪些类、哪些方法是要由javascript直接访问的。

  3. 编写dwr组件,对步骤2方法进行封装。

  4. 配置dwr组件到dwr.xml文件中,如果有必要,配置convert,进行javajavascript类型互转。

  5. 通过反射机制,dwr将步骤4的类转换成javascript代码,提供给前台页面调用

  6. 编写网页,调用步骤5javascript中的相关方法(间接调用服务器端的相关类的方法),执行业务逻辑,将执行结果利用回调函数返回。

  7. 在回调函数中,得到执行结果后,可以继续编写业务逻辑的相关javascript代码

3.简单样例

3.1.样例说明

参照DWR源码自带样例,完成一个sayHello功能,通过此样例熟悉dwr的运行原理和编写规范。

3.2.下载资源

DWR官网下载最新版本的jar包,地址:

http://directwebremoting.org/dwr/downloads/index.html

jar包放入WEB-INFlib文件夹下。同时,dwr依赖于commons-logging.jar这个包,所以必须将这个jar包也放入到WEB-INFlib文件夹下。

3.3.web.xml文件

首先是配置dwr的环境:

<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>

<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>

3.4.dwr.xml文件

从官网的jar.war文件中利用winRAR等软件提取dwr.xml文件,并将其放入到WEB-INF文件夹下。

dwr.xmldwr的核心配置文件,主要的标签有:<converter><convert><create>这三个标签

<?xml version=@H_7_502@"1.0" encoding=@H_7_502@"UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

<allow>

<create creator=@H_7_502@"new" javascript=@H_7_502@"Demo">

<param name=@H_7_502@"class" value=@H_7_502@"com.agileai.test.simpletext.Demo"/>

</create>

</allow>

</dwr>

其中,creatorjavascript是必须属性,其他可以忽略。creator包含有以下几个值:

  1. newJava用“new”关键字创造对象

  2. none:它不创建对象 (v1.1+)

  3. scripted:通过BSF使用脚本语言创建对象,例如BeanShellGroovy

  4. spring:通过Spring框架访问Bean

  5. struts:使用StrutsFormBean (v1.1+)

  6. jsf:使用JSFBean (v1.1+)

  7. pageflow:访问WeblogicBeehivePageFlow (v1.1+)

  8. ejb3:使用EJB3session bean (v2.0+)

    @H_502_717@3.5.Html文件

<html>

<head>

<title>简单文本生成样例</title>

<Meta http-equiv=@H_7_502@"Content-Type" content=@H_7_502@"text/html; charset=utf-8" />

<script type=@H_7_502@'text/javascript' src=@H_7_502@'../dwr/engine.js'> </script>

<script type=@H_7_502@'text/javascript' src=@H_7_502@'../dwr/util.js'> </script>

<script type=@H_7_502@'text/javascript' src=@H_7_502@'../dwr/interface/Demo.js'> </script>

<script type=@H_7_502@"text/javascript">

@H_502_717@function update() {

@H_502_717@var name = dwr.util.getValue("demoName");

Demo.sayHello(name,@H_502_717@function(data) {

dwr.util.setValue("demoReply",data);

});

}

</script>

</head>

<body>

姓名:

<input type=@H_7_502@"text" id=@H_7_502@"demoName"value=@H_7_502@"Joe"/>

<input value=@H_7_502@"@H_7_502@发送@H_7_502@" type=@H_7_502@"button"onclick="update()"/><br/>

回复:

<span id=@H_7_502@"demoReply"></span>

</body>

</html>

 其中engine.js必须要,如果需要用到dwr提供的一些方便的工具要引用util.js,然后是dwr自动生成js文件,名字必须和dwr.xmlcreate标签javascript属性值一样,且是dwr/interface开头的目录。

@H_502_717@3.6.Java文件

@H_502_717@

@H_502_717@package com.agileai.test.simpletext;

@H_502_717@public@H_502_717@classDemo {

@H_502_717@public String sayHello(Stringname) {

@H_502_717@return"Hello,"+ name;

}

}

@H_502_717@

@H_502_717@3.7.运行原理

  1. 当你点击浏览器调用的“发送”按钮onclick事件,调用update()函数

  2. 在服务器上,DWR调用Demo.sayHello()Java方法

  3. 方法返回的时候,DWR调用回调函数,设置回复值。

原文链接:https://www.f2er.com/ajax/164267.html

猜你在找的Ajax相关文章