国内首发--ajax完整功能框架
2023-06-13 09:13:52 时间
经过仔细研究和分析,终于让AJAX的模拟浏览器功能达到一个新的高峰.
下面将给我源代码,希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重.
记得有篇文章数落AJAX的"七宗罪"中说到,AJAX在浏览页面的时候不能使用链接收藏,也就是浏览器的标签功能,更不更使用浏览器的后退.然后也有篇文章翻译了一个老外的AJAX组件,实现了历史记录和后退功能,但是语义有点看不懂,所以在分析了那个组件之后,找出了精华部分,然后重写了这个AJAXRSS应用,并给出所有功能实现的方法注释.
目前在火狐下这个应用还不能使用,不过应该很快就可以解决这个问题.
点这里查看效果查看:
源代码:
页面部分,保存为index.html:
程序代码
下面将给我源代码,
记得有篇文章数落AJAX的"七宗罪"中说到,AJAX在浏览页面的时候不能使用链接收藏,也就是浏览器的标签功能,更不更使用浏览器的后退.然后也有篇文章翻译了一个老外的AJAX组件,实现了历史记录和后退功能,但是语义有点看不懂,所以在分析了那个组件之后,找出了精华部分,然后重写了这个AJAXRSS应用,并给出所有功能实现的方法注释.
目前在火狐下这个应用还不能使用,不过应该很快就可以解决这个问题.
点这里查看效果查看:
源代码:
页面部分,保存为index.html:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>AJAX初级应用-RSS无刷新聚合器(RC060221)</title>
<styletype="text/css">
<!--
@importurl("read.css");
-->
</style>
<scripttype="text/javascript"src="rss.js"></script>
</head>
<body>
<divclass="title">AJAX初级应用-RSS无刷新聚合器
<divclass="close"id="clobar"onclick="closebar("sidebar","clobar");">关闭侧边栏</div>
</div>
<divclass="body">
<divclass="sidebar"id="sidebar">
<divclass="spacecla">
<!--在这里按照相同的格式添加你需要的连接-->
<ahref="javascript:ent("clear");">胡东平个人空间</a><br/>
<ahref="javascript:ent("a-fei");">OM-Space</a><br/>
<ahref="javascript:ent("ryanxia");">RYANGraphics</a><br/>
<ahref="javascript:ent("awflasher");">活着而已</a><br/>
<ahref="javascript:ent("seles");">Seles空间</a><br/>
<ahref="javascript:ent("wawa");">WAWA-Fairy"sblog</a><br/>
<ahref="javascript:ent("dreammx");">大懒人的布拉格</a><br/>
<ahref="javascript:setlist(12);">除错模式</a><br/>
</div>
<divclass="special">
<divclass="spetit">特别感谢：</div>
<br/>
<h4><ahref="#">LT</a></h4>
--至今为止，之所以我可以做我自己认为喜欢的事情，完全是因为LT对我的强力后台支持。所以让我可以强烈藐视一切不公平现象，因为导致出现不公平现象的起因永远是人，而这个人通常是那种过于自以为是的垃圾。<br/>
<br/>
<h4><ahref="http://www.ryanxia.com"target="_blank">夏锐</a></h4>
--是他带我走进了网页设计这个神奇的领域，并让我认识到了CSS，从此让我进入到一个充满奇迹的世界。虽然他因为某种原因不能在与我们一起共事，但是他的对我的启蒙将永远铭记于心！<br/>
<br/>
<h4><ahref="#">张天鸣</a></h4>
--假如有一天我成为一个优秀的程序设计师，那么他的功劳应该是最大的，始终不厌其烦地给我解释一些很弱智的问题，但是就因为这样的精神，把我领进了程序设计的大门，让我受益终生！AJAX的概念就是他传达给我的。<br/>
</div>
</div>
<divclass="main"id="main">
<divclass="maintit"id="listnum"></div>
<divclass="nonetab"></div>
<divclass="mainbg"id="prolist">
<h5><ahref="#">使用帮助信息</a></h5>
<span>发表时间：2006.02.21</span>
<divclass="article">如果你看到这些文字，我想你可能遇到麻烦了！看看下面给出的一些帮助信息是否有你需要的！</div>
<divclass="bottom"><ahref="#">作者：胡东平</a></div>
<h5><ahref="#">帮助</a></h5>
<span>发表时间：2005.02.21</span>
<divclass="article">本范例为个人原创，如需转载请联系作者QQ：100829912<br/>
<br/>
1、假如你一直看到的是这个页面，没有任何内容出现：<br/>
<br/>
请照步骤（工具-Internet选项-安全-自定义级别-通过域访问数据资源-启用）！<br/>
因为这个作品是为了让大家熟悉AJAX重点功能，所以会出现这个问题。<br/>
<br/>
假如还是不行，那么你需要检查一下你的浏览器，因为时间的原故，本人只在IE6sp1上测试，其他浏览没有试过，不过估计在其他浏览器上肯定会出现一些问题，毕竟新技术还需要时间来支持。<br/>
<br/>
2、希望当你看到这个代码的时候，你会喜欢上ajax技术，这个范例只是一个很基本的应用，但是作者也付出了一定的时间和精力，希望你能够尊重作者的劳动成果，需要的话你可以免费拿去使用，但是最好不要用于商业用途，并且能够注明转载出处，谢谢！</div>
<divclass="bottom"><ahref="#">作者：胡东平</a></div>
</div>
</div>
</div>
<divclass="footer">胡东平个人空间©转载须注明出处<br/>
<ahref="http://blog.cnrui.cn"target="_blank">CopyRightByClearOnlineSpace</a></div>
<!--提示窗口-->
<divid="loadifo"style="display:none"onclick="ent(delChar());"></div>
<iframeid="historyFrame"style="display:none"src="blank.html"></iframe>
</body>
</html>
隐藏Ifream部分:
保存为blank.html:
<html>
<scriptlanguage="JavaScript">
functionpageLoaded(){
window.parent.dhtmlHistory.iframeLoaded(window.location);
}
</script>
<bodyonLoad="pageLoaded()">
<h1>blank.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:2pxsolid#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;
}
.spaceclaa{
font-weight:bold;
color:#E1F1FF;
text-decoration:none;
float:left;
width:120px;
padding:5px5px3px;
border-bottom:1pxdashed#6FF;
}
.spaceclaa: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:2pxsolid#EEE;
}
.spacecla{
width:150px;
}
.speciala{
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);
}
.articleimg{
border-width:0px;
border-style:none;
}
.article{
padding:5px;
text-indent:2em;
border-top:1pxsolid#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;
}
.footera{
color:#EEE;
}
#loadifo{
position:absolute;
top:200px;
width:120px;
background:#F69;
padding:10px;
filter:Alpha(Opacity=90);
text-align:center;
color:#FFF;
border:1pxdashed#909;
left:400px;
}
重点:核心代码部分:
保存为rss.js:
<!--
//控制ID
functiongetId(objId){
returndocument.getElementById(objId)
}
//链接对应数组,请注明转载自http://www.cnrui.cn/blog
functionurlArrary(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:
returnfalse
}
}
//侧边栏控制,请注明自http://www.cnrui.cn/blog转载
functionclosebar(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转载
functionlisten(a){
getId("prolist").className=a;
}
functionbtnSty(objId,objStyle)
{
getId(objId).style.display=objStyle
}
//提示窗口控制
functionifodis(){
btnSty("loadifo","none");
}
functionsettime(a){
setTimeout(a,1000);
}
functionloadtime(){
getId("loadifo").innerHTML+="."
}
//数据入口
functionent(urlName){
window.location.hash=urlName
varfrmUrl=saveState(urlName);//写入信息到ifream
vargamestart=loadrss(urlName);//AJAX数据过程
}
//XML数据绑定
varxmldoc=false;
functionloadrss(urlName){
varmyurl=urlArrary(urlName)
if(myurl){
listen("mainbg2");
//生成随机数，同时限制刷新次数
varNum=Math.floor(Math.random()*100);
//定义往址参数
url=myurl+"?id="+Num;
//定义为异步传输模式
xmldoc=false;
//Mozill,Safari等浏览器时需要创建的XMLHttp类
if(window.XMLHttpRequest){
xmldoc=newXMLHttpRequest();
if(xmldoc.overrideMimeType){
xmldoc.overrideMimeType("text/xml");
}
}
//IE浏览器时创建的XMLHttp类
elseif(window.ActiveXObject){
try{
xmldoc=newActiveXObject("Msxml3.XMLHTTP");
}
catch(e){
try{
xmldoc=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmldoc=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
}
//不能创建XMLHTTP类时返回
if(!xmldoc){
returnfalse;
}
//调用CheckState函数
xmldoc.onreadystatechange=CheckState;
xmldoc.open("GET",url,true);
xmldoc.send(null);
}else{
getId("listnum").innerHTML="您输入的地址错误，请重试！"
}
}
//状态检测
functionCheckState(){
varresponse=xmldoc.responseXML.documentElement;
btnSty("loadifo","block")
//收到完整的服务器响应
if(xmldoc.readyState==1){
getId("loadifo").innerHTML="连接服务器"
}
elseif(xmldoc.readyState==2){
getId("loadifo").innerHTML="开始加载数据"
}
elseif(xmldoc.readyState==3){
getId("loadifo").innerHTML="正在加载数据"
settime(loadtime)
}
elseif(xmldoc.readyState==4){
//HTTP服务器响应值成功
if(xmldoc.status==200){
//将服务器返回的字符串写到页面中ID为showdiv的区域
getId("loadifo").innerHTML="加载完成"
settime(ifodis)
num(response)
}
else{
getId("loadifo").innerHTML="错误"+xmldoc.status+"点这里刷新";
}
}
}
//检查数据合法性
functiontrydata(nodeName,nodeName2){
try{
varnodeV=nodeName.firstChild.nodeValue;
}catch(e){
try{
varnodeV=nodeName2.firstChild.nodeValue;
}catch(e){
varnodeV="没有可用信息"
}
}
returnnodeV;
}
//记录集总数
functionnum(b){
try{
vartitleNode=b.selectNodes("//rss/channel/title");
vara=b.getElementsByTagName("item").length
titleV=trydata(titleNode(0));
getId("listnum").innerHTML="共有"+a+"篇文章 来源于："+titleV;
setlist(a,b);
}catch(e){}
}
if(top.location!=self.location)top.location=self.location;
//节目列表显示
//定义接收指向各个元素的节点信息的变量
vartitleNode,linkNode,categoryNameNode,authorNode,pubDateNode,descriptionNode
//定义接收元素值的变量
vartitleV,linkV,categoryNameV,authorV,pubDateV,descriptionV
//分类聚合
functionsetlist(a,b)
{
varprograNode=b.getElementsByTagName("item");
varadminlinkNode=b.selectNodes("//rss/channel/link");
vartitleNode=b.selectNodes("//rss/channel/item/title");
varlinkNode=b.selectNodes("//rss/channel/item/link");
varcategoryNode=b.selectNodes("//rss/channel/item/category");
varauthorNode=b.selectNodes("//rss/channel/item/author");
varpubDateNode=b.selectNodes("//rss/channel/item/pubDate");
vardescriptionNode=b.selectNodes("//rss/channel/item/description");
varcategory2sNode=b.selectNodes("//rss/channel/item/dc:subject");
varauthor2sNode=b.selectNodes("//rss/channel/item/dc:creator");
varpubDate2sNode=b.selectNodes("//rss/channel/item/dc:date");
varlistchar=""
//使用for循环，产生列表信息
for(i=0;i<a;i++)
{
titleV=trydata(titleNode(i))
linkV=trydata(linkNode(i))
categoryV=trydata(categoryNode(i),category2sNode(i))
authorV=trydata(authorNode(i),author2sNode(i))
pubDateV=trydata(pubDateNode(i),pubDate2sNode(i))
descriptionV=trydata(descriptionNode(i))
adminlinkV=trydata(adminlinkNode(0))
//将得到的元素值装载到产生表格的字符串中
listchar+="<h5><ahref=""+linkV+""target="_blank">"+titleV+"</a></h5><span>发表时间："+pubDateV+"</span><divclass="article">"+descriptionV+"</div><divclass="bottom">文章分类："+categoryV+" <ahref=""+adminlinkV+""target="_blank">作者："+authorV+"</a></div>";
}
//将生成的表格输出到页面的DIV元素
getId("prolist").innerHTML=listchar;
listen("mainbg")
}
//浏览器回退部分
//重写IFREAM链接，浏览器回退重点
functionsaveState(message){
varhisFrm=getId("historyFrame")
hisFrm.src="blank.html?"+message
}
//检测IFREAM
window.dhtmlHistory={
iframeLoaded:function(newLocation){
varhash=newString(newLocation.search)
if(hash.length>=2&&hash.charAt(0)=="?"&&hash.substring(1)!=delChar()){
hash=hash.substring(1)
window.location.hash=hash;
varhisFrmdata=loadrss(hash)
}
}
}
//浏览器链接指向部分
//去除符号,请注明http://www.cnrui.cn/blog转载
functiondelChar(){
vara=window.location.hash
return a.substring(1)
}
window.onload=function(){
if(window.location.hash.length>=2){
ent(delChar())
}
}
//-->
点击下载
相关文章
- Ajax清晰请求步骤与代码
- Ajax教程_ajax是服务器端动态网页技术
- Flask框架：运用Ajax轮询动态绘图
- AJAX技术之DWR框架详解编程语言
- python3开发进阶-Djamgo框架中的JSON和AJAX详解编程语言
- Struts1.x中利用Ajax动态更新详解编程语言
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- Ajax技术实现MySQL数据查询与更新（ajax连接mysql）
- 29款Ajax超级特效展示及下载
- Ajax实现MySQL读写服务接口（ajax读写mysql）
- MySQL与Ajax的联动大大提高网站数据交互的效率（ajax和mysql连用）
- Ajax与MySQL结合实现互联网数据交互的动力（ajax和mysql）
- 探究Ajax的MySQL驱动原理（ajax原理 mysql）
- 展现灵活性Ajax与MySQL的交互（ajax与mysql交互）
- MySQL与Ajax 精彩无穷的开发实现（ajax与mysql）
- AJAX验证框架13个
- 一个AJAX类代码
- ScriptManager.RegisterStartupScript()方法在ajax页面无效的解决方法
- 简单的前端js+ajax购物车框架(入门篇)
- ajax页面无刷新IE下遭遇Ajax缓存导致数据不更新的问题
- formvalidator验证插件中有关ajax验证问题
- IE关闭时判断及AJAX注销案例学习
- ajax传递多个参数具体实现
- 解决js数据包含加号+通过ajax传到后台时出现连接错误
- JQuery的Ajax请求实现局部刷新的简单实例
- ajax翻页效果模仿yii框架自己写的
- ThinkPHP使用心得分享-ThinkPHP+Ajax实现2级联动下拉菜单
- jQuery+PHP+ajax实现微博加载更多内容列表功能
- PHP开发框架kohana中处理ajax请求的例子