12.6 显示频道内容功能 (征服ASP.NET 2.0 Ajax——Web开发技术详解)

-----------http://book.csdn.net/bookfiles/305/10030512728.shtml 

12.6  显示频道内容功能

获取频道的内容主要是根据频道的地址，然后使用XMLHttpRequest对象从网络获取数据，返回字符串或者XML数据。本节就介绍如何显示频道的内容。

12.6.1  从网络获取频道的内容

从网络读取数据，需要先向网络请求频道的内容。创建请求的步骤如下：

（1）在显示频道列表时，使用了读取频道内容的方法“loadContent”，当时没有设计代码，现在实现这个方法的代码，如清单12-12所示。其中设计了一段提示代码，当系统数据没有加载完成时，出现提示如图12-10所示。

代码清单12-12  读取内容的方法

    //加载rss内容的方法

    function loadContent(url)

    {

        //提示信息

        document.getElementById("rsscontent").innerHTML="请稍候，正在加载.......";

        //创建异步对象

        createXMLHttp();

           //判断异步对象状态的方法

           xmlhttp.onreadystatechange=viewContent;

           //加载服务器页并发送数据请求-url为用户选择的rss频道路径

           xmlhttp.open("GET",url,true);

           xmlhttp.send(null);

    }

图12-10  频道未加载完时的等待效果图

（2）上述代码中使用了创建XMLHttpRequest对象的方法“createXMLHttp”，此方法的代码如下：

    var xmlhttp;

    function createXMLHttp()

    {

           //未考虑除IE外其他浏览器-创建异步对象

           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

（3）由于本示例属于动态内容，所以没有任何数据库和服务端处理的代码。按“Ctrl+S”保存读取的代码。对于状态的判断以及客户端的显示，将在下一节介绍。

12.6.2  显示频道内容

当网络请求完成并且成功后，需要设置显示内容的div，一是要将内容显示在div中，二是要设置显示的格式，本例的格式在前期定义样式表时已经完成，此处没有变化。实现显示频道内容功能的步骤如下：

（1）打开Default.aspx页。

（2）在HTML源代码中XMLHttpRequest对象的状态判断方法“FillList”，代码如清单12-13所示。

代码清单12-13  显示内容的方法

    //显示div内容的方法

    function FillList( listdom)

    {

         var str="";

         var list=new Array();

         list=listdom.getElementsByTagName("item");

         //本例使用字符串的形式将内容连接，也可使用DOM创建元素的形式

          for(var i=0;i<list.length;i++)

          {

                //显示名称

                var sondom=list[i].childNodes;

                var name,link,desc;

                for(var j=0;j<sondom.length;j++)

                {

                   if(sondom[j].nodeName=="title")

                   {

                      name=sondom[j].nodeTypedValue;

                   }

                   else if(sondom[j].nodeName=="link")

                   {

                      link=sondom[j].nodeTypedValue;

                   }

                   else if(sondom[j].nodeName=="description")

                   {

                      desc=sondom[j].nodeTypedValue;;

                   }

                }

                str= str +"<a href='" +link+ "'>" +name+"</a> <br />";

               //显示描述信息me

                str=str+"<p>"+desc+"</p><br />";

          }

          //在div中显示

          document.getElementById("rsscontent").innerHTML=str;

    }

（3）按“Ctrl+S”保存代码的设计。

此时全部的功能已经设计完毕，按F5运行程序，单击频道列表中的某项，查看频道的内容，效果如图12-11所示。

图12-11  频道列表的内容显示效果图