`

DWR 应用实例(二) 新闻发布系统，多种新闻类型之间切换无刷新

    博客分类：
  • AJAX
DWRJavaScriptServletCSSXML 
阅读更多

点击察看（一）

step:8  配置 dwr

     (一)、配置 web.xml 文件，添加 DwrServlet

xml 代码
  1. <!---->xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns="http://java.sun.com/xml/ns/j2ee" >  
  3.    <servlet>  
  4.         <servlet-name>dwr-invokerservlet-name>  
  5.         <servlet-class>  
  6.     org.directwebremoting.servlet.DwrServlet   
  7.         servlet-class>  
  8.         <init-param>  
  9.     <param-name>debugparam-name>  
  10.     <param-value>trueparam-value>      
  11.         init-param>  
  12.         <init-param>  
  13.     <param-name>classes param-name>       
  14.         <param-value>java.lang.Objectparam-value>  
  15.         init-param>  
  16.         <load-on-startup>100load-on-startup>      
  17.   servlet>    
  18.   <servlet-mapping>  
  19.     <servlet-name>dwr-invokerservlet-name>  
  20.     <url-pattern>/dwr/*url-pattern>  
  21.   servlet-mapping>  
  22.   <session-config>  
  23.       <session-timeout>30session-timeout>  
  24.   session-config>  
  25.   <welcome-file-list>  
  26.       <welcome-file>index.jspwelcome-file>  
  27.   welcome-file-list>  
  28. web-app>  
  29.   

     (二)、配置 dwr.xml，添加需要能够远程调用的类以及公开客户端调用的类方法：

xml 代码
  1. <!---->xml version="1.0" encoding="UTF-8"?>  
  2. <dwr>  
  3.   <allow>  
  4.   
  5.     <create creator="new" javascript="news" scope="application">  
  6.       <param name="class" value="com.fzfx88.base.service.AjaxNewsSystemService"/>  
  7.       <include method="queryStoreList"/>  
  8.       <include method="retrieveAjaxNew"/>  
  9.     create>  
  10.        
  11.     <convert  converter="bean" match="com.fzfx88.conf.AjaxNew">  
  12.         <param name="include" value="id,newTitle, newAuther, newType, newContent"/>  
  13.     convert>  
  14.   
  15.   allow>  
  16. dwr>  
step9:构建页面  
css 代码
  1. [html]   
  2. [head]   
  3.     [meta http-equiv="Content-Type" content="text/html; charset=gbk" /]   
  4.     [link href="reg/style.css" type="text/css" rel="stylesheet"]  
  5.     <!---->javascript=news相符->
  6.     [script type='text/javascript' src='../dwr/interface/news.js'] 
  7.     <!---->
  8.     [script type='text/javascript' src='../dwr/engine.js'] 
  9.     <!---->  
  10.     [script type='text/javascript' src='../dwr/util.js'/]   
  11.     <!----> 
  12.     [script type='text/javascript' src='../jsfloder/ajaxNews.js'/]   
  13.     [title]news[/title]   
  14. [/head]   
  15. [body]   
  16. [div id="tabs5"]   
  17. [ul][li id="current"][a href="javaScript:queryNewsList('1');"][span]国内[/span][/a][/li]   
  18. [li][a href="javaScript:queryNewsList('2');"][span]国际[/span][/a][/li]   
  19. [li][a href="javaScript:queryNewsList('3');"][span]时事政治[/span][/a][/li]   
  20. [li][a href="javaScript:queryNewsList('4');"][span]影视娱乐[/span][/a][/li]   
  21. [li][a href="javaScript:queryNewsList('5');"][span]读书频道[/span][/a][/li]   
  22. [li][a href="javaScript:queryNewsList('6');"][span]美容护肤[/span][/a][/li]   
  23. [li][a href="javaScript:queryNewsList('7');"][span]生活琐事[/span][/a][/li]   
  24. [/ul]   
  25. [/div]   
  26. [TABLE  class="toptable grid" width="100%" cellSpacing="0" cellPadding="5" align="center" border="1"]   
  27.   [TBODY id="knew"]   
  28.   [/TBODY]   
  29. [/TABLE]   
  30. [div id="snow" style="width:500px;border:1px solid darkcyan;padding:5px;display:none;"][/div]   
  31. [/body]   
  32. [/html]  

   step10: 构建 js文件

js 代码
  1. function queryNewsList(id){   
  2.     var loadinfo = "正在载入中，请稍等...........";   
  3.     var newType = id;   
  4.     try{   
  5.             //news为dwr.xml文件中定义java类的别名，调用该类的queryStoreList方法，
  6.             //获取新闻信息
  7.             news.queryStoreList(newType,queryNewList);   
  8.             DWRUtil.useLoadingMessage(loadinfo);   
  9.     }catch(e){   
  10.        
  11.     }   
  12. }
  13. //将查询结果返回的list，添加到页面表格中   
  14. function queryNewList(data){   
  15.     document.getElementById( "snow" ).style.display = "none";   
  16.     var cellfuncs = [   
  17.         function(data){   
  18.             var newId = data.id;   
  19.             var ahive = document.createElement(");   
  20.             ahive.setAttribute("alink","fuchsia");   
  21.             var oTextNode = document.createTextNode(data.newTitle);   
  22.             ahive.appendChild(oTextNode);      
  23.             return ahive;   
  24.         },   
  25.         function(data){   
  26.             var newId = data.id;   
  27.             var ahive = document.createElement(");   
  28.             ahive.setAttribute("alink","#FFFFFF");   
  29.             var delButton = document.createElement("img");   
  30.             delButton.setAttribute("src","../images/ico_down.gif");   
  31.             delButton.setAttribute("border","1");              
  32.             ahive.appendChild(delButton);   
  33.             return ahive;   
  34.         }          
  35.     ];   
  36.     DWRUtil.removeAllRows('knew');     
  37.     DWRUtil.addRows('knew', data,cellfuncs,{   
  38.     rowCreator:function(options) {   
  39.         var row = document.createElement("tr");   
  40.         row.setAttribute("id",options.rowData.id);   
  41.         row.setAttribute("height","20");   
  42.         return row;   
  43.     },   
  44.     cellCreator:function(options) {   
  45.         var td = document.createElement("td");   
  46.         td.setAttribute("align","left");   
  47.         return td;   
  48.     }          
  49.     });   
  50. } 
  51. //根据id获得一条新闻的具体信息  
  52. function showContent(id){   
  53.     var news_id = id;   
  54.     var loadinfo = "正在载入中，请稍等...........";   
  55.     try{   
  56.         news.retrieveAjaxNew(news_id,showAnew);   
  57.         DWRUtil.useLoadingMessage(loadinfo);   
  58.     }catch(e){   
  59.        
  60.     }   
  61. } 
  62. //显示信息内容  
  63. function showAnew(data){   
  64.     var pp = document.getElementById("snow");   
  65.     document.getElementById( "snow" ).style.display = "";   
  66.     if (pp.hasChildNodes()) {   
  67.         for (i=0; i
  68.           var currentNode = pp.childNodes[i];   
  69.             pp.removeChild(currentNode);   
  70.         }   
  71.     }   
  72.    var titleText = document.createTextNode(data.newTitle);   
  73.    var context = document.createTextNode(data.newContent);   
  74.    var tspan = document.createElement("p");   
  75.    tspan.setAttribute("style","font-weight:normal;");   
  76.    tspan.appendChild(titleText);   
  77.    var cspan = document.createElement("p");   
  78.    cspan.appendChild(context);   
  79.    var vbr = document.createElement("br");   
  80.    pp.appendChild(tspan);   
  81.    pp.appendChild(vbr);;   
  82.    pp.appendChild(cspan);   
  83. }  

 运行结果如下图所示：

 

  • 大小: 6.1 KB
分享到：
| DWR 应用实例(一) 新闻发布系统，多种新 ...
评论
14 楼 spiritfrog 2007-10-15  
一在哪里？怎么不合并一下？
代码下来先看看
13 楼 fzfx88 2007-10-15  
补全了！
12 楼 qpg_200505 2007-10-04  
up................................
11 楼 rogerfox 2007-09-25  
为什么是不全的！
10 楼 fzfx88 2007-09-24  
还有 (一)
9 楼 teamax 2007-09-18  
不全的,你拿出来帖个p啊,浪费大家时间
8 楼 ljh0613 2007-08-14  
怎么没有提供下载？
7 楼 dlyhc 2007-06-09  
6 楼 zlsunnan 2007-06-02  
ajaxNews.js 有问题吧  为什么我运行了 没有反应  请指教 谢谢
5 楼 zlsunnan 2007-05-28  
是啊 楼主能否将code 分享一下啊 十分感谢分享
4 楼 wxindb 2007-05-23  
前台显示的JSP以及控制JSP样式的CSS没有啊 按照你说的方法我就是这两个地方有点问题

可以把完整的CODE放上啊
3 楼 fzfx88 2007-05-14  
DWR 应用实例(一) 新闻发布系统，多种新闻类型之间切换无刷新

还有 (二)

DWR 应用实例(二) 新闻发布系统，多种新闻类型之间切换无刷新
2 楼 wxindb 2007-05-13  
提供源代码 下载！！！！
1 楼 wxindb 2007-05-13  
怎么不全啊 掉了一些东西吧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics