本文主要是介绍12.6 显示频道内容功能 (征服ASP.NET 2.0 Ajax——Web开发技术详解),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
-----------http://book.csdn.net/bookfiles/305/10030512728.shtml12.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 频道列表的内容显示效果图
这篇关于12.6 显示频道内容功能 (征服ASP.NET 2.0 Ajax——Web开发技术详解)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!