zoukankan      html  css  js  c++  java
  • dwr2.0版本的demo

         

        谈起DWR,这个东西在上学的时候接触过,但工作之后就再也没有用过。
     
        对DWR的印象是不手写AJAX,使用JavaScript调用java后台的代码,就如同调用前台代码一样。
     
        于是乎,随着这次修改新景后台的功能之际,了解一下DWR的使用。顺便照着网上的DEMO简单地实现了一下~
     
        简介如下:
        web.xml需要配置一个servlet,处理所有/dwr/*的请求
    1. <servlet>
    2. <servlet-name>dwr-invoker</servlet-name>
    3. <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    4. <!--调试模式-->
    5. <init-param>
    6. <param-name>debug</param-name>
    7. <param-value>true</param-value>
    8. </init-param>
    9. <init-param>
    10. <param-name>scriptCompressed</param-name>
    11. <param-value>false</param-value>
    12. </init-param>
    13. <!--demo抛异常,加入跨域session安全机制-->
    14. <init-param>
    15. <param-name>crossDomainSessionSecurity</param-name>
    16. <param-value>false</param-value>
    17. </init-param>
    18. <load-on-startup>1</load-on-startup>
    19. </servlet>
    20. <servlet-mapping>
    21. <servlet-name>dwr-invoker</servlet-name>
    22. <url-pattern>/dwr/*</url-pattern>
    23. </servlet-mapping>
        在和web.xml同级目录下新建dwr.xml
        配置dwr需要调用的类,配置请求参数所需函数和js参数的对应关系。
        
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
    3. <dwr>
    4. <allow>
    5. <!-- 每次新建都需要创建这样一个类,提供调用的javascript文件是DWRUserMessage.js,全局对象名为DWRUserMessage -->
    6. <createcreator="new"javascript="DWRUserMessage">
    7. <!-- 这个js会调用java的哪一个类,一般和js里的那个文件一样(包名.DWRUserMessage),这里我也的不一样也成功了。 -->
    8. <paramname="class"value="com.wang.dao.UserUtil"/>
    9. </create>
    10. <!-- js和java之间的参数互相转换 -->
    11. <convertconverter="bean"match="com.wang.bean.User"></convert>
    12. </allow>
    13. </dwr>
     
        后台在dwr中调用的函数:
    1. package com.wang.dao;
    2. import com.google.gson.Gson;
    3. import com.wang.bean.User;
    4. public class UserUtil {
    5. public String genUserJson(User tempUser){
    6. if(tempUser == null){
    7. return "空参数";
    8. }
    9. User user = new User();
    10. user.setName(tempUser.getName());
    11. user.setAge(tempUser.getAge());
    12. return new Gson().toJson(user);
    13. }
    14. }
     
       前端页面:
       基于回调函数,调用后端参数传入后端需要的参数和回调函数。
    1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
    6. <title>首页</title>
    7. <scripttype="text/javascript"src="dwr/engine.js"></script>
    8. <scripttype="text/javascript"src="dwr/util.js"></script>
    9. <scripttype="text/javascript"src="dwr/interface/DWRUserMessage.js"></script>
    10. <scripttype="text/javascript">
    11. functionUserrollback(data){
    12. if(data){
    13. //拿到java代码返回的json参数,并转化为js对象,然后获取属性并展示到dom对象的innerHTML中
    14. var qq =eval("("+data+")");
    15. console.log(qq+"=="+qq.name +"=="+qq.age);
    16. var ss = document.getElementById("ss");
    17. var ss2 = document.getElementById("ss2");
    18. ss.innerHTML = qq.name;
    19. ss2.innerHTML = qq.age;
    20. }
    21. }
    22. function genAndShowUserMessage(){
    23. console.log('sb');
    24. var param ={};
    25. param.name ="张三";
    26. param.age =18;
    27. console.log(param);
    28. //调用java后端的函数,并传入参数:param对应后端需要的参数,Userrollback代表执行完java代码执行的回调函数。
    29. //我猜的DWR原理就是基于ajax和回调函数执行的。
    30. DWRUserMessage.genUserJson(param,Userrollback);
    31. console.log('pre rollback');
    32. }
    33. </script>
    34. </head>
    35. <body>
    36. <ahref="javascript:void(0)"onclick="genAndShowUserMessage()">点我获取用户信息</a>
    37. <br/>
    38. 名称:<spanid="ss"></span>
    39. <br/>
    40. 年龄:<spanid="ss2"></span>
    41. </body>
    42. </html>
     
        除了DWR,顺带了解了新景后台的修改方式。
        拿当前任务举例,要求在两个后面对文本框的值做校验,文本框的值是以英文逗号隔开(,)的,通过network找到进入页面的请求,定位到后台代码,找到进入页面jsp,查看逻辑。用DWR实现,对着两处的校验也有相应的数据。
     
     
     
     





  • 相关阅读:
    Composite in Javascript
    Model Validation in Asp.net MVC
    HttpRuntime.Cache vs. HttpContext.Current.Cache
    Controller Extensibility in ASP.NET MVC
    The Decorator Pattern in Javascript
    The Flyweight Pattern in Javascript
    Model Binding in ASP.NET MVC
    Asp.net MVC
    jQuery Ajax 实例 全解析
    ASP.NET AJAX入门系列
  • 原文地址:https://www.cnblogs.com/douJiangYouTiao888/p/6473957.html
Copyright © 2011-2022 走看看