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

阅读更多

点击察看（一）

step:8  配置 dwr

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

xml 代码

xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" >
   <servlet>
        <servlet-name>dwr-invokerservlet-name>
        <servlet-class>
    org.directwebremoting.servlet.DwrServlet
        servlet-class>
        <init-param>
    <param-name>debugparam-name>
    <param-value>trueparam-value>
        init-param>
        <init-param>
    <param-name>classes param-name>
        <param-value>java.lang.Objectparam-value>
        init-param>
        <load-on-startup>100load-on-startup>
  servlet>
  <servlet-mapping>
    <servlet-name>dwr-invokerservlet-name>
    <url-pattern>/dwr/*url-pattern>
  servlet-mapping>
  <session-config>
      <session-timeout>30session-timeout>
  session-config>
  <welcome-file-list>
      <welcome-file>index.jspwelcome-file>
  welcome-file-list>
web-app>

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

xml 代码

xml version="1.0" encoding="UTF-8"?>
<dwr>
  <allow>

    <create creator="new" javascript="news" scope="application">
      <param name="class" value="com.fzfx88.base.service.AjaxNewsSystemService"/>
      <include method="queryStoreList"/>
      <include method="retrieveAjaxNew"/>
    create>

    <convert  converter="bean" match="com.fzfx88.conf.AjaxNew">
        <param name="include" value="id,newTitle, newAuther, newType, newContent"/>
    convert>

  allow>
dwr>

step9:构建页面   

css 代码

[html]
[head]
    [meta http-equiv="Content-Type" content="text/html; charset=gbk" /]
    [link href="reg/style.css" type="text/css" rel="stylesheet"]
    javascript=news相符->
    [script type='text/javascript' src='../dwr/interface/news.js']

    [script type='text/javascript' src='../dwr/engine.js']

    [script type='text/javascript' src='../dwr/util.js'/]

    [script type='text/javascript' src='../jsfloder/ajaxNews.js'/]
    [title]news[/title]
[/head]
[body]
[div id="tabs5"]
[ul][li id="current"][a href="javaScript:queryNewsList('1');"][span]国内[/span][/a][/li]
[li][a href="javaScript:queryNewsList('2');"][span]国际[/span][/a][/li]
[li][a href="javaScript:queryNewsList('3');"][span]时事政治[/span][/a][/li]
[li][a href="javaScript:queryNewsList('4');"][span]影视娱乐[/span][/a][/li]
[li][a href="javaScript:queryNewsList('5');"][span]读书频道[/span][/a][/li]
[li][a href="javaScript:queryNewsList('6');"][span]美容护肤[/span][/a][/li]
[li][a href="javaScript:queryNewsList('7');"][span]生活琐事[/span][/a][/li]
[/ul]
[/div]
[TABLE  class="toptable grid" width="100%" cellSpacing="0" cellPadding="5" align="center" border="1"]
  [TBODY id="knew"]
  [/TBODY]
[/TABLE]
[div id="snow" style="width:500px;border:1px solid darkcyan;padding:5px;display:none;"][/div]
[/body]
[/html]

   step10: 构建 js文件

js 代码

function queryNewsList(id){
    var loadinfo = "正在载入中，请稍等...........";
    var newType = id;
    try{
            //news为dwr.xml文件中定义java类的别名，调用该类的queryStoreList方法，
            //获取新闻信息
            news.queryStoreList(newType,queryNewList);
            DWRUtil.useLoadingMessage(loadinfo);
    }catch(e){

    }
}
//将查询结果返回的list，添加到页面表格中
function queryNewList(data){
    document.getElementById( "snow" ).style.display = "none";
    var cellfuncs = [
        function(data){
            var newId = data.id;
            var ahive = document.createElement(");
            ahive.setAttribute("alink","fuchsia");
            var oTextNode = document.createTextNode(data.newTitle);
            ahive.appendChild(oTextNode);
            return ahive;
        },
        function(data){
            var newId = data.id;
            var ahive = document.createElement(");
            ahive.setAttribute("alink","#FFFFFF");
            var delButton = document.createElement("img");
            delButton.setAttribute("src","../images/ico_down.gif");
            delButton.setAttribute("border","1");
            ahive.appendChild(delButton);
            return ahive;
        }
    ];
    DWRUtil.removeAllRows('knew');
    DWRUtil.addRows('knew', data,cellfuncs,{
    rowCreator:function(options) {
        var row = document.createElement("tr");
        row.setAttribute("id",options.rowData.id);
        row.setAttribute("height","20");
        return row;
    },
    cellCreator:function(options) {
        var td = document.createElement("td");
        td.setAttribute("align","left");
        return td;
    }
    });
}
//根据id获得一条新闻的具体信息
function showContent(id){
    var news_id = id;
    var loadinfo = "正在载入中，请稍等...........";
    try{
        news.retrieveAjaxNew(news_id,showAnew);
        DWRUtil.useLoadingMessage(loadinfo);
    }catch(e){

    }
}
//显示信息内容
function showAnew(data){
    var pp = document.getElementById("snow");
    document.getElementById( "snow" ).style.display = "";
    if (pp.hasChildNodes()) {
        for (i=0; i
          var currentNode = pp.childNodes[i];
            pp.removeChild(currentNode);
        }
    }
   var titleText = document.createTextNode(data.newTitle);
   var context = document.createTextNode(data.newContent);
   var tspan = document.createElement("p");
   tspan.setAttribute("style","font-weight:normal;");
   tspan.appendChild(titleText);
   var cspan = document.createElement("p");
   cspan.appendChild(context);
   var vbr = document.createElement("br");
   pp.appendChild(tspan);
   pp.appendChild(vbr);;
   pp.appendChild(cspan);
}

 运行结果如下图所示：

 

• 
• 大小: 6.1 KB

• ajaxtest.rar (2.3 MB)
• 下载次数: 2608

• 查看图片附件