DWR远程调用

最新推荐文章于 2018-07-15 11:53:21 发布

原创最新推荐文章于 2018-07-15 11:53:21 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dwr #string #servlet #javascript #input #div

JavaScript自学专栏收录该内容

4 篇文章

订阅专栏

本文介绍了DWR（Direct Web Remoting）的基本概念和工作原理，展示了如何配置DWR的Servlet、创建Java类处理请求、配置dwr.xml文件，以及在客户端使用JavaScript进行远程调用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DWR全称是Direct Web Remoting，它采用Ajax作为传输机制，可以执行从客户端JavaScript到服务器端Java代码的远程过程调用。

DWR是作为一个Servlet来实现的，它用来处理所有客户端请求。DWR通过一个看起来像普通JavaScript文件引用的Servlet引用来动态生成客户端存根。

1. 简单的Servlet声明

在web.xml文件中添加如下配置

<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>Chap4</display-name> <servlet>  <servlet-name>DwrServlet</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>DwrServlet</servlet-name>  <url-pattern>/dwrserver/*</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>

2. 新建一个Java类，处理客户端请求，下面的例子是获取客户信息的CustomerFactory.java类

package org.bibeault.aip.dwr; public class CustomerFactory { public Customer findByName( String firstName, String lastName ) { if (firstName.equalsIgnoreCase("Bill") && lastName.equalsIgnoreCase("Moody")) { return new Customer( "Bill", "Moody", "123 Nowhere Lane", "Austin", "TX", "USA", "78701" ); } else { return null; } } }

Customer.java类

package org.bibeault.aip.dwr; public class Customer { private String firstName; private String lastName; private String address; private String city; private String state; private String country; private String postalCode; public Customer( String firstName, String lastName, String address, String city, String state, String country, String postalCode ) { this.firstName = firstName; this.lastName = lastName; this.address = address; this.city = city; this.state = state; this.country = country; this.postalCode = postalCode; } public String getFirstName() { return firstName; } public String getLastName() { return lastName; } public String getAddress() { return address; } public String getCity() { return city; } public String getState() { return state; } public String getCountry() { return country; } public String getPostalCode() { return postalCode; } }

3. 接下来是配置dwr.xml文件，将CustomerFactory.java发布成一个JavaScript脚本提供给客户端访问(对应的脚本名为CustomerFactory.js, 客户端访问即访问它)

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow>  <convert converter="bean" match="org.bibeault.aip.dwr.Customer"/> <create creator="new" javascript="CustomerFactory"> <param name="class" value="org.bibeault.aip.dwr.CustomerFactory"/> </create> </allow> </dwr>

5. 最后是客户端网页的代码testDWR.html

html> <title>Who's that Customer?</title>   <script type='text/javascript' src='/Chap4/dwrserver/interface/CustomerFactory.js'> </script> <script type='text/javascript' src='/Chap4/dwrserver/engine.js'></script> <script> function lookupByName( form ) { if ((form.firstName.value != '') && (form.lastName.value != '')) { CustomerFactory.findByName(form.firstName.value, form.lastName.value, onCustomerFound); } } function onCustomerFound( customer ) { if (customer != null) { var form = document.customerForm; form.address.value = customer.address; form.city.value = customer.city; form.state.value = customer.state; form.postalCode.value = customer.postalCode; form.country.value = customer.country; } } </script> </head> <body> <form name="customerForm" action="/doSomething"> <div> <label>First name:</label> <input type="text" name="firstName" onblur="lookupByName(this.form)"/> <label>Last name:</label> <input type="text" name="lastName" onblur="lookupByName(this.form)"/> </div> <div> <label>Address:</label> <input type="text" name="address"/> </div> <div> <label>City:</label> <input type="text" name="city"/> <label>State/Province:</label> <input type="text" name="state"/> </div> <div> <label>Postal Code:</label> <input type="text" name="postalCode"/> <label>Country:</label> <input type="text" name="country"/> </div> <div> <input type="submit" value="OK"/> </div> </form> </body> </html>

onblur属性所指的方法是当输入框失去焦点的时候执行