ajax 和dwr

一.DWR的全称，官方网站的解释以及定义，版本。
    1.dwr的全称是Direct Web Remoting(远程web调用)．
    2.dwr的初衷可以用官方网站的一句话来表示：easy ajax for java.
    3.dwr目前开发版本是dwr3.0,最高稳定版本是dwr2.0。
    dwr的核心是ajax和java,它能够在客户端用js来调用java类。

 

二.什么是Ajax，有何作用，执行流程，优缺点。
    1.ajax的全称是Asynchronous JavaScript and XML,Asynchronous的意思是用户在发送请求之后
    还可以在页面上进行其他的操作。ajax不是一种新的技术，它是由javaScript和xml技术组成的。
    2.ajax能够使用户在不提交整个页面表单的情况下和服务器通信而取得需要的数据，而此时客户操作不必阻塞。
    从而提高页面响应度，增强用户体验。
    3.ajax请求处理流程：
        第一步、首先要创建一个xmlHttpRequest对象，它是一个javaScript对象用来发送请求。
                根据浏览器对javaScript的支持来生成对象。
                if (window.XMLHttpRequest) { 
                http_request = new XMLHttpRequest(); 
                } else if (window.ActiveXObject) {
                http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
                } 
        第二步、然后就是通过onreadystatechange属性来设置回调函数用来处理服务器返回的数据。
                http_request.onreadystatechange = nameOfTheFunction; 
        第三步、然后通过open方法来设置请求的方法(GET或者POST)、服务器的url、设置是否为异步请求。
                http_request.open('GET', 'http://www.example.org/some.file', true);
        第四步、通过send发送请求，可以发送值过去。
                http_request.send(null);
        第五步、服务器处理完毕后调用回调函数并把数据传过来。
        第六步、之后检查请求的状态和HTTP响应情况就可以对数据进行处理了，数据的形式可以是xml形式或者text文本形式，
                用DOM对xml数据进行解析。
                if (http_request.readyState == 4) {//判断服务器响应都已接受完毕
                    if (http_request.status == 200) {//表示信息已经成功返回
                        //这里对数据进行解析
                    }
                }
  ajax的优缺点：
    优点：
        1、节省了大量宽带，降低了客户端的响应时间。
        2、使用异步方式与服务器通信，不需要打断用户的操作。
        3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担。
    缺点：
        1、ajax使浏览器后退失效，即对浏览器后退机制的破坏。
        2、安全问题，ajax技术对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
        3、ajax不擅长于操作大数据，因为数据以xml的形式从服务器端传过来，客户端用dom技术进行解析会非常的慢。
        4、使用了javaScript技术，对浏览器的兼容情况不一。

 

三.相对Ajax而言，DWR的优缺点。
使用dwr的好处
    DWR是对java的ajax封装，它能够使客户端js调用服务端的java类并且取得数据，从而减小了ajax的复杂操作，
    用dwr不用去考虑浏览器对js的支持程度。 
dwr的缺点：
    比较的繁琐，它必须要在web.xml进行配制servlet.要有dwr.xml文件，以及一个java类．

 

四.DWR的原理(根据web.xml来解析)
  使用DWR必须要在web.xml文件里面配置DwrServlet，在配置DwrServlet的时候，指定了拦截的请求，默认是/dwr/*，
  当有请求符合条件的时候，DwrServlet进行拦截，拦截后根据页面配置的dwr/interface/*.class，然后将×.class编译成js。
五.如何来使用DWR.
  (1).首先到官方网站上下载jar包，然后导入工程。接着配置web.xml文件.
    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name> 
            <!--DWR默认是false.如果选择true.就可以在URL后面加一个/dwr可以看到你部署的DWR class。例如：http://localhost:8080/demo/dwr-->
            <param-value>true</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
  (2).配置dwr.xml文件
    <create creator="new" javascript="Demo"> //Demo名称意思是你在js里面用的名称。
        <param name="class" value="com.lxit.Demo" /> //包名和类名
    </create>
  (3).在jsp里面导入:
    <script type='text/javascript' src='dwr/engine.js' />
    <script type='text/javascript' src='dwr/util.js' /> 
    <script type='text/javascript' src='dwr/interface/Demo.js'>
    这里需要注意的是：dwr里面并没有Demo.js，而是我们配置的类必须要配置一个js。Demo就是类名，dwr/interface/也是不能改变的。
  (4).上面工作完成后开始调用：
     Demo类里面有一个getUserById(long id)，在js里面就可以这样来调用Demo.getUserById(1,dispose);
     这里注意dispose是一个js函数,为了方便我这里不写dispose这个函数了。
     意思就是说，服务器处理完后的结果交给dispose来处理。dispose就是一个回调函数。

 

六.json(JavaScript Object Notation)语法。
  (1).JSON是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
  (2).语法:
    对象以{名称:值,名称:值}。每个名称后跟一个":"后面是值，多个用","分开。
    例如：var person={id:0,name:null};意思就是说，定义一个对象person，初始化id为0，name为null。
    数组以[值,值]。例如：var array=[1,2,3];为array数组赋了3个值。

 

七.使用的小技巧（显示加载，调试JS,优化服务器性能）
    1.显示加载：DWR可以简单实现页面加载前提示，只要在函数里写上这个"dwr.util.useLoadingMessage()"方法就行了．

 

    2.调试JS:DWR自带了调试javaScript代码的功能，只要在显示的页面的url从工程名以后截断，再在尾部加上"/dwr",
　　　在出来的页面中，会显示java对象在js中的映射，从中可以看出哪些java对象被映射成了js对象，哪些没有被映射
      在调试的过程中，每个方法后面都有一个execute的按钮，点击可以执行此方法

 

    3.优化服务器性能：
        1)CPU瓶颈:经过严格的测试DWR的性能没什么问题。DWR上性能消耗同web服务器和网络比起来可以忽略不计。
          如果你真的需要提升DWR的性能的话，可以把log级别设置ERROR或FATAL，但是主要还是要看你的编码情况。
        2)Network瓶颈: DWR没有管理你的浏览器缓存的功能，所以它会不断的重复读取DWR的javascript文件。
    这里有一个简单的解决办法，把javascript文件复制到你的web-app中，这样web服务器就可以更好的利用它了。
  你也可以考虑把所有的javascript文件合并成一个文件，然后用DOJO的压缩程序处理一个来节省流量。

 

八.分析dwr.xml
    1.creator在dwr中主要的职责就是把配置在dwr.xml中的class进行实例化，
      creator属性是必须的，它用来指定使用哪种创造器，创造器有以下几种可供选择：
        new: 用Java的new关键字创造对象。
        none: 它不创建对象，看下面的原因。 (v1.1+)
        scripted: 通过BSF使用脚本语言创建对象，例如BeanShell或Groovy。
        spring: 通过Spring框架访问Bean。
        jsf: 使用JSF的Bean。 (v1.1+)
        struts: 使用Struts的FormBean。 (v1.1+)
        pageflow: 访问Beehive或Weblogic的PageFlow。 (v1.1+)

 

    2.converter的职责是在接受请求时把客户端的javascript对象转换成服务器端的java对象，
    　通过调用发布的java bean后，再把返回的java对象转化成javascript的对象给客户端调用

 

九.注解
经常用到的注解主要有：@RemoteProxy、@RemoteMethod、@DataTransferObject和@RemoteProperty。        
针对DWR对Javabean的注解分为两类：
Object和Class
针对Class的注解使用：
@RemoteObject注解类为远程反问class相等于create
@RemoteMethod 注解类为远程访问方法相等于dwr.xml中白名单中注解的方法的应用的
注意默认的类中所有的方法为全部在黑名单中。不可作为远程访问对象的。

 

针对：Object使用@DataTransferObject 和@RemoteProperty注解接口
@DataTransferObject仅仅注解类对象
@RemoteProperty注解属性和方法的应用

 

十:DWR反向异步技术（推拉技术，DWR2.0后最大的特性）
  1.借鉴思想
    1.1：B/S（Browser/Server）结构与C/S（Client/Server）结构最大的区别就在于：
        C/S结构需要部署特定客户端，服务端可以主动的与客户端进行通信；而B/S结构只有浏览器给服务端发送请求，才能获得服务端的响应
    1.2：DWR的推技术就是借鉴了C/S的思想，在B/S结构中实现了服务端主动与客户端通信，推技术的缺点就是：
            当客户端过多的时候，服务器的负载会很大。
         而拉技术就是普通的B/S的模式，发送请求才能获得响应
  2.实现DWR推技术的三种模式
    2.1：Polling（轮询）
        客户端以一定的周期向服务器发送请求，看服务端是否有数据更新，如果有更新，就向服务端请求数据
    2.2：Comet
        客户端向服务器发送请求后，服务器将数据通过response发送给客户端，但并不会将此response关闭，而是一直通过response将最新的数
        据发送给客户端浏览器，直到客户端浏览器关闭
    2.3：Piggback（回传）
        服务器端将最新的数据排成队列，然后等待客户端下一次请求，接收到请求后就将更新的数据发给客户端。
  3.实现方式
    3.1 首先要让我们的DWR程序支持反向异步技术，有二种方式：
     1）在web.xml中配置DWR的时候，加入一个参数配置
        <servlet> 
            <servlet-name>dwr-invoker</servlet-name> 
            <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> 
            <init-param>   
                <param-name>activeReverseAjaxEnabled</param-name>   
                <param-value>true</param-value> 
            </init-param>
        </servlet>
     2)可以指定到具体的某个页面支持反向Ajax
       指定页面加载的时候：οnlοad=dwr.engine.setActiveReverseAjax(true);
    3.2 在服务端的java类里面，先new一个Collection的对象，该构造方法所需要的参数是目标页面的相对路径和目标页面的文件名
    3.3 生成一个Util的对象，将Collection的对象作为参数传进去
    3.4 通过页面元素的id，将服务器端的数据发送到目标页面的指定元素内

 

十一：DWR的动态table的实现
    function pageInit{
        QueryTools.queryAllProblem(function(problemList){ //调用服务端的java方法，将此方法返回的List集合做为回调函数的参数
            dwr.util.removeAllRows("peoplebody", { filter:function(tr) { //清除表格的行，定义了一个过滤器，过滤掉不需要删除的行
              return (tr.id != "pattern"); //清除表格内原来的所有行，除了id为pattern的行（模板行）之外
            }});
            problemList.sort(function(p1, p2) { return p1.description.localeCompare(p2.description); });
                //排序，调用集合的sort方法进行排序，p1.字段名.localeCompare(p2.字段名)表示按照该字段进行排序
            var problem;
            var problemId;
            for (var i = 0; i < problemList.length; i++) { //以数组的方式来遍历集合
              problem = problemList[i];
              problemId = problem.id;
              dwr.util.cloneNode("pattern", { idSuffix:problemId }); 
                //"pattern"是页面上定义的一个表格行的模板，cloneNode方法是复制一个节点，也就是将页面上的"pattern"节点复制一条，
                //并将其元素id在"pattern"的基础上加上后缀：problemId
              dwr.util.setValue("table从" + problemId, problem.description);
                //"tableDescription"是"pattern"模板行中的单元格的id，让其加problemId是为了避免页面上的元素id重复，然后将对象的对应字段值放进单元格
              dwr.util.setValue("tableTpye" + problemId, problem.type);
              dwr.util.setValue("tableState" + problemId, problem.state);
              dwr.util.setValue("tableDate" + problemId, problem.submitDate);
              dwr.util.setValue("tableQuizuser"+problemId,problem.loginName);
              $("pattern" + problemId).style.display = "table-row";
                //设定复制出来的这一行的显示风格，"table-row"表示作为表格的行来显示
              problemCache[problemId] = problem;
                //problemCache是一个缓存数组，将查询出来的对象放进这个缓存数组内
            }
        });
    }

 

    function delete(elementId) { //删除的方法
      var deletePrefix = "delete"; //这个是查询页面的表格上，每一行的最后一列的"删除"按钮的id，它是在"delete"的后面加上该行对象的id
      var problem = problemCache[elementId.substring(deletePrefix.length)]; //获取该行对象的id
      if (confirm("Are you sure you want to delete?")) {
      dwr.engine.beginBatch(); //启动一个批处理，注意：修改，删除的方法都必要在DWR批处理里面才能执行
      QueryTools.deleteProblem(problem.id); //调用删除方法，将指定的id传入后台
      pageInit(); //删除以后，重新查询数据，所以再调用上面的pageInit方法
      dwr.engine.endBatch();
      }
    }