下面将给我源代码,希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重.
记得有篇文章数落AJAX的"七宗罪"中说到,AJAX在浏览页面的时候不能使用链接收藏,也就是浏览器的标签功能,更不更使用浏览器的后退.然后也有篇文章翻译了一个老外的AJAX组件,实现了历史记录和后退功能,但是语义有点看不懂,所以在分析了那个组件之后,找出了精华部分,然后重写了这个AJAX RSS应用,并给出所有功能实现的方法注释.
目前在火狐下这个应用还不能使用,不过应该很快就可以解决这个问题.
点这里查看效果 查看:
源代码:
页面部分,保存为 index.html:
程序代码
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleAJAX初级应用-RSS无刷新聚合器(RC 060221)/title
style type="text/css"
!--
@import url("read.css");
--
/style
script type="text/javascript" src="rss.js"/script
/head
body
div class="title" AJAX初级应用-RSS无刷新聚合器
div class="close" id="clobar" onclick="closebar('sidebar','clobar');"关闭侧边栏/div
/div
div class="body"
div class="sidebar" id="sidebar"
div class="spacecla"
!--在这里按照相同的格式添加你需要的连接 --
a href="javascript:ent('clear');"胡东平个人空间/abr /
a href="javascript:ent('a-fei');"OM-Space/abr /
a href="javascript:ent('ryanxia');"RYAN Graphics/abr /
a href="javascript:ent('awflasher');"活着而已/abr /
a href="javascript:ent('seles');"Seles空间/abr /
a href="javascript:ent('wawa');"WAWA-Fairy's blog/abr /
a href="javascript:ent('dreammx');"大懒人的布拉格/abr /
a href="javascript:setlist(12);"除错模式/abr /
/div
div class="special"
div class="spetit"特别感谢：/div
br /
h4a href="#"LT/a/h4
-- 至今为止，之所以我可以做我自己认为喜欢的事情，完全是因为LT对我的强力后台支持。所以让我可以强烈藐视一切不公平现象，因为导致出现不公平现象的起因永远是人，而这个人通常是那种过于自以为是的垃圾。br /
br /
h4a href="http://www.ryanxia.com" target="_blank"夏锐/a/h4
-- 是他带我走进了网页设计这个神奇的领域，并让我认识到了CSS，从此让我进入到一个充满奇迹的世界。虽然他因为某种原因不能在与我们一起共事，但是他的对我的启蒙将永远铭记于心！br /
br /
h4a href="#"张天鸣/a/h4
-- 假如有一天我成为一个优秀的程序设计师，那么他的功劳应该是最大的，始终不厌其烦地给我解释一些很弱智的问题，但是就因为这样的精神，把我领进了程序设计的大门，让我受益终生！AJAX的概念就是他传达给我的。br /
/div
/div
div class="main" id="main"
div class="maintit" id="listnum"/div
div class="nonetab"/div
div class="mainbg" id="prolist"
h5a href="#"使用帮助信息/a/h5
span发表时间：2006.02.21/span
div class="article" 如果你看到这些文字，我想你可能遇到麻烦了！看看下面给出的一些帮助信息是否有你需要的！/div
div class="bottom" a href="#"作者：胡东平/a /div
h5a href="#"帮助/a/h5
span发表时间：2005.02.21/span
div class="article" 本范例为个人原创，如需转载请联系作者QQ：100829912br /
br /
1、假如你一直看到的是这个页面，没有任何内容出现：br /
br /
请照步骤（工具 - Internet 选项 - 安全 - 自定义级别 - 通过域访问数据资源 - 启用）！br /
因为这个作品是为了让大家熟悉AJAX重点功能，所以会出现这个问题。br /
br /
假如还是不行，那么你需要检查一下你的浏览器，因为时间的原故，本人只在IE6 sp1上测试，其他浏览没有试过，不过估计在其他浏览器上肯定会出现一些问题，毕竟新技术还需要时间来支持。br /
br /
2、希望当你看到这个代码的时候，你会喜欢上ajax技术，这个范例只是一个很基本的应用，但是作者也付出了一定的时间和精力，希望你能够尊重作者的劳动成果，需要的话你可以免费拿去使用，但是最好不要用于商业用途，并且能够注明转载出处，谢谢！/div
div class="bottom" a href="#"作者：胡东平/a /div
/div
/div
/div
div class="footer" 胡东平个人空间 © 转载须注明出处br /
a href="http://blog.cnrui.cn" target="_blank"CopyRight By Clear Online Space/a /div
!--提示窗口 --
div id="loadifo" style="display:none" onclick="ent(delChar());"/div
iframe id="historyFrame" style="display:none" src="blank.html"/iframe
/body
/html
隐藏Ifream部分:
保存为 blank.html:
程序代码html
script language="JavaScript"
function pageLoaded() {
window.parent.dhtmlHistory.iframeLoaded(window.location);
}
/script
body onLoad="pageLoaded()"
h1blank.html - 这个东西很重要的，兄弟！/h1
/body
/html
css部分:
保存为 read.css :
程序代码body {
margin: 0px;
padding: 0px;
font-size: 9pt;
}
h4 {
font-size: 9pt;
display: inline;
}
h5 {
display: inline;
margin-left: 10px;
}
span {
margin-left: 20px;
color: #666;
}
a {
text-decoration: none;
color: #900;
}
a:hover {
color: #F90;
}
.title{
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#0099FF", endColorStr="#003366", gradientType="0");
height: 30px;
font-weight: bold;
color: #FFF;
padding-top: 20px;
padding-left: 20px;
border-bottom: 2px solid #FFF;
}
.close {
float: right;
margin-right: 50px;
cursor:pointer;
}
.body {
clear: both;
width: 1002px;
}
.sidebar {
width: 200px;
float: left;
top: 20px;
padding-top: 10px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#0066CC", endColorStr="#FFFFFF", gradientType="0");
text-align: center;
}
.spacecla a{
font-weight: bold;
color: #E1F1FF;
text-decoration: none;
float: left;
width: 120px;
padding: 5px 5px 3px;
border-bottom: 1px dashed #6FF;
}
.spacecla a:hover{
color: #FFF;
background: #09F;
}
.special {
margin-top: 50px;
width: 150px;
color: #666;
line-height: 15px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.spetit {
font-weight: bold;
color: #FFFFFF;
border-bottom: 2px solid #EEE;
}
.spacecla {
width: 150px;
}
.special a {
color: #000;
}
.nonetab {
height: 10px;
background: #EEE;
}
.main {
width: 800px;
float: right;
}
.maintit {
background: #000;
height: 17px;
color: #FFF;
text-align: center;
padding-top: 3px;
}
.mainbg {
background: #EEE;
float: left;
width: 100%;
overflow: hidden;
}
.mainbg2 {
background: #EEE;
float: left;
width: 100%;
filter: Alpha(Opacity=30);
}
.article img {
border-width: 0px;
border-style: none;
}
.article {
padding: 5px;
text-indent: 2em;
border-top: 1px solid #06F;
margin-left: 10px;
}
.bottom {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#EEEEEE", endColorStr="#FFFFFF", gradientType="1");
height: 13px;
text-align: right;
padding-right: 20px;
padding-top: 3px;
margin-bottom: 10px;
}
.footer {
height: 30px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#0066CC", endColorStr="#B9E3FF", gradientType="1");
text-align: center;
padding-top: 5px;
line-height: 15px;
color: #FFF;
clear: both;
}
.footer a {
color: #EEE;
}
#loadifo {
position: absolute;
top: 200px;
width: 120px;
background: #F69;
padding: 10px;
filter: Alpha(Opacity=90);
text-align: center;
color: #FFF;
border: 1px dashed #909;
left: 400px;
}
重点:核心代码部分:
保存为 rss.js :
程序代码!--
//控制ID
function getId(objId){
return document.getElementById(objId)
}
//链接对应数组,请注明转载自http://www.cnrui.cn/blog
function urlArrary(urlName){
switch(urlName){
case "clear":
return "http://www.cnrui.cn/blog/feed.asp"
case "a-fei":
return "http://www.a-fei.net/blog/rss.xml"
case "ryanxia":
return "http://www.ryanxia.com/blog/feedrss2.asp"
case "awflasher":
return "http://www.awflasher.com/blog/feed.asp"
case "seles":
return "http://www.cnrui.cn/seles/feedrss2.asp"
case "wawa":
return "http://a-fei.net/wawa/blog/rss2.php"
case "dreammx":
return "http://www.dreammx.com/xhyl/feed.asp"
default:
return false
}
}
//侧边栏控制,请注明自http://www.cnrui.cn/blog转载
function closebar(targetid,objId){
if(document.getElementById){
target = getId(targetid);
objsty = getId(objId);
if(target.style.display == "none"){
target.style.display = "";
main.style.width = "800px";
objsty.innerHTML = "关闭侧边栏"
}else{
target.style.display = "none";
main.style.width = "100%";
objsty.innerHTML = "开启侧边栏"
}
}
}
//加载变灰,注明自http://www.cnrui.cn/blog转载
function listen(a){
getId("prolist").className=a;
}
function btnSty(objId,objStyle)
{
getId(objId).style.display = objStyle
}
//提示窗口控制
function ifodis(){
btnSty("loadifo","none");
}
function settime(a){
setTimeout(a,1000);
}
function loadtime(){
getId("loadifo").innerHTML += "."
}
//数据入口
function ent(urlName){
window.location.hash = urlName
var frmUrl = saveState(urlName);//写入信息到ifream
var gamestart = loadrss(urlName);//AJAX数据过程
}
//XML数据绑定
var xmldoc = false;
function loadrss(urlName){
var myurl = urlArrary(urlName)
if(myurl){
listen("mainbg2");
//生成随机数，同时限制刷新次数
var Num=Math.floor(Math.random()*100);
//定义往址参数
url = myurl+"?id="+Num;
//定义为异步传输模式
xmldoc = false;
//Mozill,Safari等浏览器时需要创建的XMLHttp类
if(window.XMLHttpRequest){
xmldoc = new XMLHttpRequest();
if(xmldoc.overrideMimeType){
xmldoc.overrideMimeType('text/xml');
}
}
//IE浏览器时创建的XMLHttp类
else if(window.ActiveXObject){
try{
xmldoc = new ActiveXObject("Msxml3.XMLHTTP");
}
catch(e){
try{
xmldoc = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmldoc = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
}
//不能创建XMLHTTP类时返回
if(! xmldoc){
return false;
}
//调用CheckState函数
xmldoc.onreadystatechange = CheckState;
xmldoc.open('GET',url,true);
xmldoc.send(null);
}else{
getId("listnum").innerHTML = "您输入的地址错误，请重试！"
}
}
//状态检测
function CheckState(){
var response = xmldoc.responseXML.documentElement;
btnSty("loadifo","block")
//收到完整的服务器响应
if(xmldoc.readyState == 1){
getId("loadifo").innerHTML = "连接服务器"
}
else if(xmldoc.readyState == 2){
getId("loadifo").innerHTML = "开始加载数据"
}
else if(xmldoc.readyState == 3){
getId("loadifo").innerHTML = "正在加载数据"
settime(loadtime)
}
else if(xmldoc.readyState == 4){
//HTTP服务器响应值成功
if(xmldoc.status == 200){
//将服务器返回的字符串写到页面中ID为showdiv的区域
getId("loadifo").innerHTML = "加载完成"
settime(ifodis)
num(response)
}
else{
getId("loadifo").innerHTML = "错误"+xmldoc.status+"点这里刷新";
}
}
}
//检查数据合法性
function trydata(nodeName,nodeName2){
try{
var nodeV = nodeName.firstChild.nodeValue;
}catch(e){
try{
var nodeV = nodeName2.firstChild.nodeValue;
}catch(e){
var nodeV = "没有可用信息"
}
}
return nodeV;
}
//记录集总数
function num(b){
try{
var titleNode = b.selectNodes("//rss/channel/title");
var a = b.getElementsByTagName("item").length
titleV = trydata(titleNode(0));
getId("listnum").innerHTML = "共有"+a+"篇文章
