DWR与AJAX

最新推荐文章于 2024-05-02 18:12:22 发布

angel666mzz88

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量450

点赞数

分类专栏：随笔文章标签： dwr xmlhttprequest javascript 服务器 ajax servlet

本文链接：https://blog.csdn.net/angel666mzz88/article/details/6291677

版权

随笔专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，DWR是Direct Web Remoting 的缩写.
DWR 是一个开放源码的使用 Apache 许可协议的解决方案，它包含服务器端 Java 库、一个 DWR servlet 以及 JavaScript 库。虽然 DWR 不是 Java 平台上唯一可用的 Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能。
从最简单的角度来说，DWR 是一个引擎，可以把服务器端 Java 对象的方法公开给 JavaScript 代码。使用 DWR 可以有效地从应用程序代码中把 Ajax 的全部请求-响应循环消除掉。这意味着客户端代码再也不需要直接处理 XMLHttpRequest 对象或者服务器的响应。不再需要编写对象的序列化代码或者使用第三方工具才能把对象变成 XML。甚至不再需要编写 servlet 代码把 Ajax 请求调整成对 Java 域对象的调用。
DWR 是作为 Web 应用程序中的 servlet 部署的。把它看作一个黑盒子，这个 servlet 有两个主要作用：首先，对于公开的每个类，DWR 动态地生成包含在 Web 页面中的 JavaScript。生成的 JavaScript 包含存根函数，代表 Java 类上的对应方法并在幕后执行 XMLHttpRequest。这些请求被发送给 DWR，这时它的第二个作用就是把请求翻译成服务器端 Java 对象上的方法调用并把方法的返回值放在 servlet 响应中发送回客户端，编码成 JavaScript。DWR 还提供了帮助执行常见的用户界面任务的 JavaScript 工具函数 .

使用 DWR 的优点：
1.规范化应用 AJAX ，紧跟业界技术潮流；

2.提高界面响应速度，增强用户体验；

3.简化前台开发流程，减少代码量，提高开发效率；

4.与 GBP 的集成比较容易；

dwr的设计构思：
第一、把java类转化为javascript类由dwr自动完成，只需简单的配置。

第二、应用起来极其简单。开发者不要该服务器代码就可以集成。

第三、容易测试。和webwork一样，隐藏的http协议。

第四、及强扩展性。例如与spring集成，只需修改一点代码。

第五、性能。就我与jason,等简单比较，dwr性能可能是最好的。

第六、自动把java对象转化为javascript对象，并且及易扩展。[/code]

DWR执行流程:
1、 web服务器启动，DWRServlet init()方法调用，init主要做了以下工作。

设置日志级别、实例化DWR用到的单例类（这些类在jvm中只有一个实例对象）、读去配置文件（包括dwr.jar包

中的dwr.xml,WEB-INF/dwr.xml. config.xml）。

2、请求处理

DWRServlet.doGet, doPost方法都调用processor.handle(req, resp)方法处理。Processor对象在init()方法中已经初始化了。

其实动态在浏览器端生成一个AjaxService的JavaScript类，以匹配服务器端AjaxService的Java类.

然后进服务器端进行数据处理返回到(js对象)控制器响应请求,其次响应动态更新页面(展现层).

DWR学习必须
DWR是一个开源的java包，可以使浏览器中的代码使用web服务器中java类的方法，就像这个方法就是在浏览器中一样。
      DWR包括两个部分：一个运行在服务器端的Java Servlet，负责处理浏览器的请求并发送反馈给浏览器；另一个是运行在浏览器端的Java Script，负责发生请求并动态修改web页面。
步骤：
(1)、下载dwr.jar，放在web-inf/lib目录下还有commons-logging-1.0.4.jar
(2)、修改web.xml，增加：
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC
    "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="dwr">
<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>
    </init-param>
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</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>
</web-app>
(3)、创建dwr.xml放在与web.xml一个目录下面
<?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">
<dwr>
    <allow>
        <create creator="new" javascript="Demo">
            <param name="class" value="com.Demo"/>
        </create>
    </allow>
</dwr>
(4)、一般从html/jsp页面中需要加入：
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<TITLE>DWR简单例子</TITLE>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="/mydwr/dwr/engine.js"></script>
<script src="/mydwr/dwr/util.js"></script>
<script src="/mydwr/dwr/interface/Demo.js"></script>

<SCRIPT LANGUAGE="JavaScript">
function CallBack(data) {
dwr.util.setValue("GetNumber", data);
function Sendff(){
var name = dwr.util.getValue("name");
alert(name);
Demo.sayHello(name, CallBack);
}
</SCRIPT>
<BODY>
<form name="Form1">
传递的参数：<input type="text" name="name" id="name"><br>
返回的参数：<span id="GetNumber" style="color: red;"></span><br>
<input value="提交" type="button" οnclick="Sendff()"/>
</form>
</BODY>
</HTML>

(5)、写服务端的JAVA类根据dwr.xml里的<param name="class" value="com.Demo"/>生成
package com;
public class Demo {
public String sayHello(String name){
System.out.println("Demo.sayHello()"+name);
return name;
}
}

(6),可给在html里的函数抽取出来，写个客户端的js
index.js:
function CallBack(data) {
dwr.util.setValue("GetNumber", data);
}
function Sendff(){
var name = dwr.util.getValue("name");
alert(name);
Demo.sayHello(name, CallBack);//Demo.sayHello类名.方法名,CallBack回调函数
}
然后在html里引入<script src="/工程名/dwr/interface/index.js"></script>
就这样dwr就ok了
二，Ajax主要组成部分：
1.Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。
2.Ajax 由 HTML、JavaScript? 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互
性的 Ajax 应用程序。
3.Ajax的核心是JavaScript对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

Ajax原理：
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据.

Ajax是做什么的?
目前，编写应用程序时有两种基本的选择：
?桌面应用程序
?Web 应用程序两者是类似的，桌面应用程序通常以 CD 为介质（有时候可从网站下载）并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 ------ 毫不奇怪，要通过 Web 浏览器访问这种应用程序。不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（就在您的计算机上运行，不用等待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务（比如 Amazon.com 和 eBay）。但是，伴随着 Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。显然这样说过于简略了，但基本的概念就是如此。您可能已经猜到，Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。

Ajax 应用程序所用到的基本技术：

1.HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。

2.JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

3.DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。

4.文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

或者可以说是:
   1.使用CSS和XHTML来表示。
   2. 使用DOM模型来交互和动态显示。
   3.使用XMLHttpRequest来和服务器进行异步通信。
   4.使用javascript来绑定和调用。

Ajax的执行流程：
1.发出一个Http请求：通过XMLHttpRequest对象发送，在生成XMLHttpRequest对象时，要注意区分浏览器的类型（IE和非IE）
2.声明回调函数：即：指定当服务器为你的请求作出相应后，有哪个javaScript函数来处理这个响应
3.打开请求：http_request.open("GET/POST", url, true/false);
4.发送请求：http_request.send(parm);
5.接受响应：由第二步中所指定的回调函数来接受
6.处理响应数据
1）responseText:作为文本串返回
2）responseXML：作为Xml文件返回
从这点可以看出来Ajax的一个最大的缺点：Ajax接受的响应都是"文本类型"的，需要对其进行解析，耗费大量
的时间和宽带，
当响应所返回的数据比较大时，会严重的影响速度，因此，在这种情况下，最好不要使用Ajax.

ajax的优缺点：
【优点】
●页面无刷新，用户体验好；
●异步，不打断用户操作，响应速度快；
●按需求取数据，减少冗余请求，减轻服务器负担；
●基于标准化的并被广泛支持的技术，无需额外的插件；
●可以使数据和表现分离；

【缺点】
●一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax
●开发成本提高
●使back按钮失效，用户操作后无法返回；
●对流媒体支持没有flash之流好；
●对搜索引擎不友好
●破坏程序的异常机制
●存在一些安全问题，暴露了一些程序接口和数据逻辑

Ajax 应用程序中需要了解五种就绪状态：
?0：请求没有发出（在调用 open() 之前）。
?1：请求已经建立但还没有发出（调用 send() 之前）。
?2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
?3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
?4：响应已完成，可以访问服务器响应并使用它。

XMLHttpRequest这个对象的方法如下:

?open()：建立到服务器的新请求。该方法有五个参数：
1.request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
2.url：要连接的 URL。
3.asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
4.username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
5.password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。
(通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 "true"。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。)

?send()：向服务器发送请求。该方法只有一个参数:
1.就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了：虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求（在典型的 Ajax 应用中大约占 80%）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容（本系列的后续文章中将讨论安全数据和 XML 消息）。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。(一般是传递null值作为参数)
?abort()：退出当前请求。
?readyState：提供当前 HTML 的就绪状态。

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。

加入一些 JavaScript得到XMLHttpRequest的句柄后，其他的 JavaScript 代码就非常简单了。事实上，我们将使用 JavaScript 代码完成非常基本的任务：

?获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
?修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
?解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构。对于前两点，需要非常熟悉getElementById()方法，如清单2 所示。清单 2. 用 JavaScript 代码捕获和设置字段值| // Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1] | 只要掌握了XMLHttpRequest，Ajax 应用程序的其他部分就是如清单2 所示的简单 JavaScript 代码了，混合有少量的 HTML。同时，还要用一点儿 DOM，我们就来看看吧。
以 DOM 结束最后还有 DOM，即文档对象模型。可能对有些人来说 DOM 有点儿令人生畏，HTML 设计者很少使用它，即使 JavaScript 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的是复杂的 Java 和 C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。幸运的是，在 JavaScript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 DOM，或者至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨 Ajax，这也是我准备采用的方法。以后的文章将再次讨论 DOM，现在只要知道可能需要 DOM 就可以了。当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。

angel666mzz88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DWR与AJAX

<br />一，DWR是Direct Web Remoting 的缩写.<br />DWR 是一个开放源码的使用 Apache 许可协议的解决方案，它包含服务器端 Java 库、一个 DWR servlet 以及 JavaScript 库。虽然 DWR 不是 Java 平台上唯一可用的 Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能。<br />从最简单的角度来说，DWR 是一个引擎，可以把服务器端 Java 对象的方法公开给 JavaScript 代码。使用 DWR 可以有效地从应用
复制链接

扫一扫