Ajax - 基础教程第八章例子学习三

新闻标题版块

跟上篇一样，学习前先了解一下作者用到了什么服务。作者是在这里http://rss.news.yahoo.com/rss/topstories（点击看看）得到头条新闻的列表的。

从作者的言论在看，这个版块是4个版块中最简单的。

一。newsItems.jsp页面，这是版块的主页面

代码清单8-8 newsItems.jsp

< div  id ="newsItemsRoot"  style ="left:400px; top:300px;" >
     < div  id ="newsItemsHandle" >
         < table  width ="100%"  border ="0"  class ="textbox" >
             < tr >
                 < td  align ="left"  class ="controls" >
                    Top News Stories Powered by Yahoo!
                 </ td >
                 < td  align ="right" >
                     < a  class ="controls"  
                                   href ="javascript:minimize('newsItemsContent');" >
                        -
                     </ a >
                     &nbsp;
                     < a  class ="controls"  
                                   href ="javascript:maximize('newsItemsContent');" >
                        +
                     </ a >
                 </ td >
             </ tr >
         </ table >
     </ div >
        
     < div  id ="newsItemsContent"  class ="newsItemsContent" >   

         <% @include file = " newsItemsDetail.jsp " %>
    
     </ div >

</ div >

<div id="newsItemsRoot" style="left:400px; top:300px;">
    <div id="newsItemsHandle">
这个页面中，最外层的是id为newsItemsRoot的DIV，newsItemsRoot的里面有id为newsItemsHandle的DIV，显示新闻标题列表id为newsItemsContent的DIV。

在ajaxDashboard.js中，在加载页面是执行了 initDomDrag("newsItemsHandle", "newsItemsRoot");

 initDomDrag("newsItemsHandle", "newsItemsRoot");实现了鼠标拖动newsItemsHandle 主newsItemsRoot也随着拖动。

这次窗口拖动把柄就只是 一句话            －＋             这样而已

<div id="newsItemsContent" class="newsItemsContent">  

        <%@include file="newsItemsDetail.jsp"%>
    
    </div>
这个是新闻的列表主体了

整个页面

newsItemsRootDIV｛

       newsItemsHandleDIV｛

                  table｛

                           tr｛Top News Stories Powered by Yahoo!                                     －＋｝

                  ｝

      ｝

      newsItemsContentDIV｛

            新闻标题列表

      ｝

｝

二。在新闻版块主页中include了一个页面，这个页面是显示新闻标题列表内容的。

代码清单8-9 newsItemsDetail.jsp

<% @ taglib uri = " http://java.sun.com/jsp/jstl/core "  prefix = " c " %>  

< c:forEach  var ="newsItem"  items ="${newsItems}" >
     < div >  
         < br />
         < a  href ="${newsItem.link}"  class ="newsLink"  target ="blank" >
        
              ${newsItem.title} 
         
         </ a >
     </ div >
</ c:forEach >     

看了上一篇后应该对${newsItems}这个怎么来的大概知道把知道了吧！不知道的话看看UpdateNewsItemsServlet.java中的request.setAttribute("newsItems", newsItems);

newsItems是一个NewsItem的Collection，主要结构看ajaxdashboard.domain.NewsItem;

三。整个版块的工作过程

1.加载页面时，ajaxDashboard.js运行startUpdateNewsItemsInterval();

startUpdateNewsItemsInterval();这个我觉得是作者写错了，90秒后才开始服务，怕4个服务一起启动太拥挤了吗？但90秒也太久了吧，怕太拥挤可以用一次定时器setTimeout，所以我觉得应该为＋多个updateNewsItems();

startUpdateNewsItemsInterval();是在news.js中

var updateNewsItemsIntervalID = 0;   //定时器开关

function updateNewsItems() {//启动AJAX，下面的语句是taconite框架的用法
    var ajaxRequest = new AjaxRequest("UpdateNewsItems");//UpdateNewsItems是Servlet
    ajaxRequest.sendRequest();
}

function startUpdateNewsItemsInterval() { //设置90秒的重复定时器
    updateNewsItemsIntervalID = window.setInterval("updateNewsItems()", 90000);
}

2. UpdateNewsItemsServlet

 在web.xml中添加

< servlet >
         < servlet-name > UpdateNewsItemsServlet </ servlet-name >
         < servlet-class > ajaxdashboard.servlet.UpdateNewsItemsServlet </ servlet-class >
     </ servlet >
     < servlet-mapping >
         < servlet-name > UpdateNewsItemsServlet </ servlet-name >
         < url-pattern > /UpdateNewsItems </ url-pattern >
     </ servlet-mapping >

跟UpdateNewsItemServlet相关联的类是NewsItem.java， NewsService.java

NewsItem.java 封装了   

    private String guid;
    private String title;
    private String link;
    private String description;
    private String pubDate;

这个POJO类。

NewsService.java

这个是主要的服务类，通过把http://rss.news.yahoo.com/rss/topstories读取内容，封装到xmlDocument中，然后把xmlDocument中的相关内容保存到一个NewsItem类对象中，再把这些类对象放到一个NewsItems集合中，这个集合放到request变量中，跳转到相关页面newsItemsAjax.jsp。

代码清单8-10 newsItemsAjax.jsp

<% @page contentType = " text/xml " %>
<% @ taglib uri = " http://taconite.sf.net/tags "  prefix = " tac "   %>
< tac:taconiteRoot >
     < tac:replaceChildren  contextNodeID ="newsItemsContent"  
                                                             parseOnServer ="true" >
        
         <% @include file = " newsItemsDetail.jsp " %>
    
     </ tac:replaceChildren >
    
</ tac:taconiteRoot >  

源代码中是用把Ajax响应作为xml返回给浏览器端的，让浏览器完成工作，但我试了不行，所以把全部改成了第一个版块那种在服务器端响应并完成的方法，测试证明可以。

 原来的是这样

<% @page contentType = " text/xml " %>

< taconite-root >
     < taconite-replace-children  contextNodeID ="newsItemsContent"  
                                                             parseInBrowser ="true" >
        
         <% @include file = " newsItemsDetail.jsp " %>
    
     </ taconite-replace-children >
    
</ taconite-root >  

 注意：在UpdateNewsItemsServlet.java在有一句java语句是这样

newsItem.setLink(newsItem.getLink().replaceAll("&", "&amp;"));

这个的作用是把链接中存在 & 这个符号变成可以在页面显示的 &amp; （自己试试就知道啦）

但我要加多一句 newsItem.setTitle(newsItem.getTitle().replaceAll("&quot;", "/'  "));

今天有个新闻，里面有符号 " ,这个符号在页面中是 &quot； 本来应该可以正常显示的，但在taconite框架下，在页面中会提示缺少 ")" 的错误，我随便测试了其他的符号，像< ,> 都没问题，就是 " 双引号有问题，从查错到发现错误的地方，到找解决方法，用了我整整一天。最后还是只能用单引号 ‘ 代替 “ 的方法。

下一部分 股票行情版块

http://blog.csdn.net/lin49940/archive/2007/09/06/1774512.aspx