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 次 |
![]() 下载 |