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

step:8  配置 dwr

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

xml 代码

<!--sp-->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 代码

<!--sp-->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"]
    <!--js是dwr自动生成，命名要和dwr.xml中<span class="attribut-->javascript=news相符->
    [script type='text/javascript' src='../dwr/interface/news.js']
    <!--wr 中的js需引-->
    [script type='text/javascript' src='../dwr/engine.js']
    <!--wr 中的js需引-->
    [script type='text/javascript' src='../dwr/util.js'/]
    <!--定义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);
}

 运行结果如下图所示：

 

news.gif
描述:
文件大小:	6 KB
看过的:	文件被下载或查看 114 次
下载

 

分享到：

DWR 应用实例(一) 新闻发布系统，多种新闻 ... | 精妙SQL语句

• 2007-05-12 12:18
• 浏览 1868
• 评论(2)
• 查看更多

评论

2 楼 vito_fh 2007-08-14  

帅哥，给分完整的code，可以么！谢谢先呀 [e-mail]

1 楼 zlsunnan 2007-06-02  

不知道 有没有 code 可以分享一下  ajaxNews.js 不对啊 根本就不能运行  [e-mail]

相关推荐

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

在本实例中，"DWR 应用实例(一) 新闻发布系统，多种新闻类型之间切换无刷新"，我们将探讨如何使用DWR构建一个新闻发布系统，这个系统可以在用户选择不同新闻类型时，动态加载对应的内容，而无需重新加载整个页面。...

dwr经典实例（9个常用实例）

DWR (Direct Web Remoting) 是一个开源JavaScript库，它允许Web应用程序与服务器端Java对象进行实时交互，实现异步更新页面，无需刷新整个页面。这个压缩包文件"dwrtest"很可能包含了9个经典的DWR实例，这些实例通常...

dwr实现实时刷新实例

在这个“dwr实现实时刷新实例”中，我们将深入探讨DWR如何实现无页面跳动的刷新机制，并关注线程管理和数据库更新。 首先，DWR的核心功能是提供异步通信，使得前端可以实时获取服务器端的变化，而无需刷新整个页面...

dwr应用实例

Direct Web Remoting (DWR) 是一个开源的Java库，它允许JavaScript在浏览器端与服务器端的Java对象进行交互，从而实现动态Web应用程序。DWR通过AJAX技术提供了一种简单的方法来创建富客户端界面，使得用户可以在不...

dwr、ajax 无刷新技术

"MyDwr"可能是一个示例项目，展示了如何在实际应用中使用DWR进行无刷新开发。 综上所述，DWR和AJAX的结合为Web开发者提供了强大的工具，以实现无刷新的交互体验。通过学习和应用这些技术，开发者可以创建出更现代、...

dwr+spring实例

本实例"DWRSpring实例"是一个使用DWR与Spring框架结合的消息发布系统，包含了基础的CRUD（Create、Read、Update、Delete）操作。通过这个例子，我们可以深入理解DWR和Spring如何协同工作，以及它们在实际开发中的...

dwr工程实例,基本于myeclipse.

DWR（Direct Web Remoting）是一种Java库，用于在Web应用程序中实现JavaScript和服务器端Java对象之间的双向通信。它使得动态、实时的交互成为可能，极大地增强了用户体验。在这个"dwr工程实例"中，我们将探讨如何...

dwr,dojo框架应用实例

DWR 是一个开源JavaScript库，允许Web应用程序在客户端和服务器之间进行实时通信，即实现Ajax（异步JavaScript和XML）功能。它简化了JavaScript与Java后端服务的交互，让开发者能够调用服务器上的方法，就像它们是...

dwr 实例 Dwr实例

自己写的dwr实例。方便大家学习,包括jar文件，希望对大家有帮助

dwr实例教程 很好的入门实例

### dwr实例教程知识点解析 #### 一、DWR简介及功能特点 DWR（Direct Web Remoting）是一种简化Ajax应用开发的技术框架。它能够使客户端的JavaScript代码直接调用服务器端的Java方法，实现数据的实时交互。与传统...

dwr框架实现无刷新分页

DWR（Direct Web Remoting）是一种JavaScript和Java之间的远程调用技术，它允许Web应用在不刷新整个页面的情况下与服务器进行交互，从而实现动态更新和实时反馈的效果。在DWR中，JavaScript对象可以直接调用后台的...

Spring DWR配置实例

Spring Direct Web Remoting (DWR) 是一个Java库，它允许Web应用程序轻松地在客户端JavaScript和服务器端Java之间进行交互。这个技术的核心功能是提供了一种机制，使得动态的、实时的Web应用成为可能，无需刷新整个...

dwr实例dwr实例dwr实例

dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr实例dwr...

dwr框架的应用实例

DWR (Direct Web Remoting) 是一个开源的Java框架，用于在浏览器和服务器之间实现动态、实时的Web应用交互。这个框架允许JavaScript直接调用服务器端的Java方法，就像它们是本地函数一样，极大地简化了AJAX...

ajax_dwr实现页面无刷新加载

**Ajax与DWR：实现页面无刷新加载** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高...

dwr.demo dwr实例

DWR (Direct Web Remoting) 是一个开源的Java库，它允许Web应用程序在客户端和服务器之间进行实时的、异步的通信，无需刷新整个页面。这个"**dwr.demo dwr实例**"很可能是用来展示如何在实际项目中集成和使用DWR的...

ajax的dwr框架实例

这些操作在客户端完成，无需刷新整个页面，从而实现了Ajax的无刷新特性，提高了用户交互的流畅性。 在实际应用中，我们可能还需要考虑安全性问题，比如防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。DWR提供了...

web编程异步刷新dwr技术jar包

DWR (Direct Web Remoting) 是一种用于Java Web应用程序的开源框架，它允许在客户端JavaScript和服务器端Java之间进行实时的、异步的数据交换。DWR使得开发者可以轻松地利用AJAX（Asynchronous JavaScript and XML）...

ajax框架dwr程序实例源码

6. **实例应用**：这个实例可能是一个简单的Web应用，如用户输入验证、数据检索或更新等，以演示DWR的功能。通过查看源码，我们可以理解DWR如何与HTML页面、CSS样式和JavaScript脚本协作，以实现实时的前端更新。 7...

Global site tag (gtag.js) - Google Analytics