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

xml  代码

1.      <!--sp-->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.      <!--sp-->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.          <!--js是dwr自动生成，命名要和dwr.xml中<span class="attribut-->javascript=news相符->

6.          [script type='text/javascript' src='../dwr/interface/news.js'] 

7.          <!--wr 中的js需引-->

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

9.          <!--wr 中的js需引-->  

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

11.      <!--定义js文--> 

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.  }