经过仔细研究和分析,终于让AJAX的模拟浏览器功能达到一个新的高峰.
下面将给我源代码,
希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重
.
记得有篇文章数落AJAX的"七宗...罪"中说到,AJAX在浏览页面的时候不能使用链接收藏,也就是浏览器的标签功能,更不更使用浏览器的后退.然后也有篇文章翻译了一个老外的AJAX组件,实现了历史记录和后退功能,但是语义有点看不懂,所以在分析了那个组件之后,找出了精华部分,然后重写了这个AJAX RSS应用,并给出所有功能实现的方法注释.
目前在火狐下这个应用还不能使用,不过应该很快就可以解决这个问题.
点这里查看效果
查看
:
源代码:
页面部分,保存为 index.html:
程序代码
AJAX初级应用-RSS无刷新聚合器(RC 060221)
使用帮助信息
发表时间：2006.02.21
如果你看到这些文字，我想你可能遇到麻烦了！看看下面给出的一些帮助信息是否有你需要的！
作者：胡东平
帮助
发表时间：2005.02.21
本范例为个人原创，如需转载请联系作者QQ：100829912
1、假如你一直看到的是这个页面，没有任何内容出现：
请照步骤（工具 - Internet 选项 - 安全 - 自定义级别 - 通过域访问数据资源 - 启用）！
因为这个作品是为了让大家熟悉AJAX重点功能，所以会出现这个问题。
假如还是不行，那么你需要检查一下你的浏览器，因为时间的原故，本人只在IE6 sp1上测试，其他浏览没有试过，不过估计在其他浏览器上肯定会出现一些问题，毕竟新技术还需要时间来支持。
2、希望当你看到这个代码的时候，你会喜欢上ajax技术，这个范例只是一个很基本的应用，但是作者也付出了一定的时间和精力，希望你能够尊重作者的劳动成果，需要的话你可以免费拿去使用，但是最好不要用于商业用途，并且能够注明转载出处，谢谢！
作者：胡东平
隐藏Ifream部分:
保存为 blank.html:
程序代码
blank.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 :
程序代码
点击下载
您可能感兴趣的文章:
无框架 Ajax分页(原创)
jquery 框架使用教程 AJAX篇
Jquery AJAX 框架的使用方法
基于JQuery框架的AJAX实例代码
javascript之AJAX框架使用说明
php的ajax框架xajax入门与试用介绍
简单的前端js+ajax 购物车框架(入门篇)
零基础学习AJAX之AJAX框架
