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

fzfx88

浏览: 273077 次

最近访客更多访客>>

云来梦飞雨

rgdson

wjy20150716

a250152

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

DWR JavaScript Servlet CSS XML

点击察看（一）

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);
}

运行结果如下图所示：

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

查看图片附件

分享到：

java 树形结构设计(一) Struts + Hiberna ... | DWR 应用实例(一) 新闻发布系统，多种新 ...

2007-04-24 18:19
浏览 8356
评论(14)
论坛回复 / 浏览 (10 / 19413)
分类:Web前端
查看更多

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

怎么不全啊掉了一些东西吧

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论