國(guó)內(nèi)首發(fā) -- ajax完整功能框架

更新時(shí)間：2007年01月31日 00:00:00 投稿：mdxy-dxy

經(jīng)過仔細(xì)研究和分析,終于讓AJAX的模擬瀏覽器功能達(dá)到一個(gè)新的高峰.
下面將給我源代碼,希望喜歡的朋友轉(zhuǎn)載的時(shí)候注明轉(zhuǎn)載出處,這樣不管對(duì)你自己,還是對(duì)本人,都是一種極大的尊重.

記得有篇文章數(shù)落AJAX的"七宗...罪"中說到,AJAX在瀏覽頁面的時(shí)候不能使用鏈接收藏,也就是瀏覽器的標(biāo)簽功能,更不更使用瀏覽器的后退.然后也有篇文章翻譯了一個(gè)老外的AJAX組件,實(shí)現(xiàn)了歷史記錄和后退功能,但是語義有點(diǎn)看不懂,所以在分析了那個(gè)組件之后,找出了精華部分,然后重寫了這個(gè)AJAX RSS應(yīng)用,并給出所有功能實(shí)現(xiàn)的方法注釋.

目前在火狐下這個(gè)應(yīng)用還不能使用,不過應(yīng)該很快就可以解決這個(gè)問題.

點(diǎn)這里查看效果查看:

源代碼:

頁面部分,保存為 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初級(jí)應(yīng)用-RSS無刷新聚合器(RC 060221)</title>
<style type="text/css">

</style>
<script type="text/javascript" src="rss.js"></script>
</head>
<body>
<div class="title"> AJAX初級(jí)應(yīng)用-RSS無刷新聚合器
  <div class="close" id="clobar" onclick="closebar('sidebar','clobar');">關(guān)閉側(cè)邊欄</div>
</div>
<div class="body">
  <div class="sidebar" id="sidebar">
    <div class="spacecla">
      
      <a href="javascript:ent('clear');">胡東平個(gè)人空間</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);">除錯(cuò)模式</a><br />
    </div>
    <div class="special">
      <div class="spetit">特別感謝：</div>
      <br />
            <h4><a href="#">LT</a></h4>
      -- 至今為止，之所以我可以做我自己認(rèn)為喜歡的事情，完全是因?yàn)長(zhǎng)T對(duì)我的強(qiáng)力后臺(tái)支持。所以讓我可以強(qiáng)烈藐視一切不公平現(xiàn)象，因?yàn)閷?dǎo)致出現(xiàn)不公平現(xiàn)象的起因永遠(yuǎn)是人，而這個(gè)人通常是那種過于自以為是的垃圾。<br />
      <br />
      <h4><a href="http://www.ryanxia.com" target="_blank">夏銳</a></h4>
      -- 是他帶我走進(jìn)了網(wǎng)頁設(shè)計(jì)這個(gè)神奇的領(lǐng)域，并讓我認(rèn)識(shí)到了CSS，從此讓我進(jìn)入到一個(gè)充滿奇跡的世界。雖然他因?yàn)槟撤N原因不能在與我們一起共事，但是他的對(duì)我的啟蒙將永遠(yuǎn)銘記于心！<br />
      <br />
      <h4><a href="#">張?zhí)禅Q</a></h4>
      -- 假如有一天我成為一個(gè)優(yōu)秀的程序設(shè)計(jì)師，那么他的功勞應(yīng)該是最大的，始終不厭其煩地給我解釋一些很弱的問題，但是就因?yàn)檫@樣的精神，把我領(lǐng)進(jìn)了程序設(shè)計(jì)的大門，讓我受益終生！AJAX的概念就是他傳達(dá)給我的。<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>發(fā)表時(shí)間：2006.02.21</span>
      <div class="article"> 如果你看到這些文字，我想你可能遇到麻煩了！看看下面給出的一些幫助信息是否有你需要的！</div>
      <div class="bottom"> <a href="#">作者：胡東平</a> </div>
      <h5><a href="#">幫助</a></h5>
      <span>發(fā)表時(shí)間：2005.02.21</span>
      <div class="article"> 本范例為個(gè)人原創(chuàng)，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者QQ：100829912<br />
        <br />
        1、假如你一直看到的是這個(gè)頁面，沒有任何內(nèi)容出現(xiàn)：<br />
        <br />
        請(qǐng)照步驟（工具 - Internet 選項(xiàng) - 安全 - 自定義級(jí)別 - 通過域訪問數(shù)據(jù)資源 - 啟用）！<br />
                因?yàn)檫@個(gè)作品是為了讓大家熟悉AJAX重點(diǎn)功能，所以會(huì)出現(xiàn)這個(gè)問題。<br />
        <br />
        假如還是不行，那么你需要檢查一下你的瀏覽器，因?yàn)闀r(shí)間的原故，本人只在IE6 sp1上測(cè)試，其他瀏覽沒有試過，不過估計(jì)在其他瀏覽器上肯定會(huì)出現(xiàn)一些問題，畢竟新技術(shù)還需要時(shí)間來支持。<br />
        <br />
        2、希望當(dāng)你看到這個(gè)代碼的時(shí)候，你會(huì)喜歡上ajax技術(shù)，這個(gè)范例只是一個(gè)很基本的應(yīng)用，但是作者也付出了一定的時(shí)間和精力，希望你能夠尊重作者的勞動(dòng)成果，需要的話你可以免費(fèi)拿去使用，但是最好不要用于商業(yè)用途，并且能夠注明轉(zhuǎn)載出處，謝謝！</div>
      <div class="bottom"> <a href="#">作者：胡東平</a> </div>
    </div>
  </div>
</div>
<div class="footer"> 胡東平個(gè)人空間 © 轉(zhuǎn)載須注明出處<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 - 這個(gè)東西很重要的，兄弟！</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;
}

重點(diǎn):核心代碼部分:
保存為 rss.js :

程序代碼

點(diǎn)擊下載

您可能感興趣的文章: