OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

国内首发 -- ajax完整功能框架

2022-2-5 17:02| 发布者: 菜鸟教程小白| 查看: 335| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 经过仔细研究和分析,终于让AJAX的模拟浏览器功能达到一个新的高峰.下面将给我源代码,希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重.记得有篇文章数落AJAX的"七宗罪"中说到, ...

经过仔细研究和分析,终于让AJAX的模拟浏览器功能达到一个新的高峰.
下面将给我源代码,希望喜欢的朋友转载的时候注明转载出处,这样不管对你自己,还是对本人,都是一种极大的尊重.

记得有篇文章数落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" />
<title>AJAX初级应用-RSS无刷新聚合器(RC 060221)</title>
<style type="text/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');">胡东平个人空间</a><br />
      <a href="javascript:ent('a-fei');">OM-Space</a><br />
      <a href="javascript:ent('ryanxia');">RYAN Graphics</a><br />
      <a href="javascript:ent('awflasher');">活着而已</a><br />
      <a href="javascript:ent('seles');">Seles空间</a><br />
      <a href="javascript:ent('wawa');">WAWA-Fairy's blog</a><br />
      <a href="javascript:ent('dreammx');">大懒人的布拉格</a><br />
      <a href="javascript:setlist(12);">除错模式</a><br />
    </div>
    <div class="special">
      <div class="spetit">特别感谢：</div>
      <br />
            <h4><a href="#">LT</a></h4>
      -- 至今为止，之所以我可以做我自己认为喜欢的事情，完全是因为LT对我的强力后台支持。所以让我可以强烈藐视一切不公平现象，因为导致出现不公平现象的起因永远是人，而这个人通常是那种过于自以为是的垃圾。<br />
      <br />
      <h4><a href="http://www.ryanxia.com" target="_blank">夏锐</a></h4>
      -- 是他带我走进了网页设计这个神奇的领域，并让我认识到了CSS，从此让我进入到一个充满奇迹的世界。虽然他因为某种原因不能在与我们一起共事，但是他的对我的启蒙将永远铭记于心！<br />
      <br />
      <h4><a 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">
      <h5><a href="#">使用帮助信息</a></h5>
      <span>发表时间：2006.02.21</span>
      <div class="article"> 如果你看到这些文字，我想你可能遇到麻烦了！看看下面给出的一些帮助信息是否有你需要的！</div>
      <div class="bottom"> <a href="#">作者：胡东平</a> </div>
      <h5><a href="#">帮助</a></h5>
      <span>发表时间：2005.02.21</span>
      <div class="article"> 本范例为个人原创，如需转载请联系作者QQ：100829912<br />
        <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()">
      <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: 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 :

程序代码

点击下载