主頁(yè) > 知識(shí)庫(kù) > 國(guó)內(nèi)首發(fā) -- ajax完整功能框架

國(guó)內(nèi)首發(fā) -- ajax完整功能框架
熱門(mén)標(biāo)簽：團(tuán)購(gòu)網(wǎng)站 科大訊飛語(yǔ)音識(shí)別系統(tǒng) Mysql連接數(shù)設(shè)置 服務(wù)器配置 阿里云 電子圍欄 銀行業(yè)務(wù) Linux服務(wù)器
經(jīng)過(guò)仔細(xì)研究和分析,終于讓AJAX的模擬瀏覽器功能達(dá)到一個(gè)新的高峰.
下面將給我源代碼,希望喜歡的朋友轉(zhuǎn)載的時(shí)候注明轉(zhuǎn)載出處,這樣不管對(duì)你自己,還是對(duì)本人,都是一種極大的尊重.

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

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

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

源代碼:

頁(yè)面部分,保存為 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無(wú)刷新聚合器(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初級(jí)應(yīng)用-RSS無(wú)刷新聚合器
  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è)人通常是那種過(guò)于自以為是的垃圾。br />
      br />
      h4>a target="_blank">夏銳/a>/h4>
      -- 是他帶我走進(jìn)了網(wǎng)頁(yè)設(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)該是最大的，始終不厭其煩地給我解釋一些很弱智的問(wèn)題，但是就因?yàn)檫@樣的精神，把我領(lǐng)進(jìn)了程序設(shè)計(jì)的大門(mén)，讓我受益終生！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：100829912br />
        br />
        1、假如你一直看到的是這個(gè)頁(yè)面，沒(méi)有任何內(nèi)容出現(xiàn)：br />
        br />
        請(qǐng)照步驟（工具 - Internet 選項(xiàng) - 安全 - 自定義級(jí)別 - 通過(guò)域訪問(wèn)數(shù)據(jù)資源 - 啟用）！br />
                因?yàn)檫@個(gè)作品是為了讓大家熟悉AJAX重點(diǎn)功能，所以會(huì)出現(xiàn)這個(gè)問(wèn)題。br />
        br />
        假如還是不行，那么你需要檢查一下你的瀏覽器，因?yàn)闀r(shí)間的原故，本人只在IE6 sp1上測(cè)試，其他瀏覽沒(méi)有試過(guò)，不過(guò)估計(jì)在其他瀏覽器上肯定會(huì)出現(xiàn)一些問(wèn)題，畢竟新技術(shù)還需要時(shí)間來(lái)支持。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 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 :

程序代碼 程序代碼

!--
//控制ID
function getId(objId){
    return document.getElementById(objId)
}
//鏈接對(duì)應(yīng)數(shù)組,請(qǐng)注明轉(zhuǎn)載自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
    }
}
//側(cè)邊欄控制,請(qǐng)注明自http://www.cnrui.cn/blog轉(zhuǎn)載
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 = "關(guān)閉側(cè)邊欄"
        }else{
            target.style.display = "none";
            main.style.width = "100%";
            objsty.innerHTML = "開(kāi)啟側(cè)邊欄"
        }
    }
}
//加載變灰,注明自http://www.cnrui.cn/blog轉(zhuǎn)載
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 += "."
}
//數(shù)據(jù)入口
function ent(urlName){
    window.location.hash = urlName
    var frmUrl = saveState(urlName);//寫(xiě)入信息到ifream
    var gamestart = loadrss(urlName);//AJAX數(shù)據(jù)過(guò)程
}
//XML數(shù)據(jù)綁定
var xmldoc = false;
function loadrss(urlName){
    var myurl = urlArrary(urlName)
    if(myurl){
        listen("mainbg2");
    //生成隨機(jī)數(shù)，同時(shí)限制刷新次數(shù)
        var Num=Math.floor(Math.random()*100);
    //定義往址參數(shù)
        url = myurl+"?id="+Num;
    //定義為異步傳輸模式
        xmldoc = false;
    //Mozill,Safari等瀏覽器時(shí)需要?jiǎng)?chuàng)建的XMLHttp類
        if(window.XMLHttpRequest){
            xmldoc = new XMLHttpRequest();
            if(xmldoc.overrideMimeType){
                    xmldoc.overrideMimeType('text/xml');
            }
        }
    //IE瀏覽器時(shí)創(chuàng)建的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){}
                }
            }
        }
    //不能創(chuàng)建XMLHTTP類時(shí)返回
        if(! xmldoc){
            return false;
        }
    //調(diào)用CheckState函數(shù)
        xmldoc.onreadystatechange = CheckState;
        xmldoc.open('GET',url,true);
        xmldoc.send(null);
    }else{
        getId("listnum").innerHTML = "您輸入的地址錯(cuò)誤，請(qǐng)重試！"
    }
}
//狀態(tài)檢測(cè)
function CheckState(){
    var response = xmldoc.responseXML.documentElement;
    btnSty("loadifo","block")
//收到完整的服務(wù)器響應(yīng)
    if(xmldoc.readyState == 1){
        getId("loadifo").innerHTML = "連接服務(wù)器"
        }
    else if(xmldoc.readyState == 2){
        getId("loadifo").innerHTML = "開(kāi)始加載數(shù)據(jù)"
        }
    else if(xmldoc.readyState == 3){
        getId("loadifo").innerHTML = "正在加載數(shù)據(jù)"
        settime(loadtime)
        }
    else if(xmldoc.readyState == 4){
//HTTP服務(wù)器響應(yīng)值成功
        if(xmldoc.status == 200){
//將服務(wù)器返回的字符串寫(xiě)到頁(yè)面中ID為showdiv的區(qū)域
     getId("loadifo").innerHTML = "加載完成"
         settime(ifodis)
         num(response)
        }
        else{
            getId("loadifo").innerHTML = "錯(cuò)誤"+xmldoc.status+"點(diǎn)這里刷新";
        }
    }
}
//檢查數(shù)據(jù)合法性
function trydata(nodeName,nodeName2){
    try{
        var nodeV = nodeName.firstChild.nodeValue;
    }catch(e){
        try{
            var nodeV = nodeName2.firstChild.nodeValue;
        }catch(e){
            var nodeV = "沒(méi)有可用信息"
        }
    }
    return nodeV;
}
//記錄集總數(shù)
function num(b){
    try{
        var titleNode = b.selectNodes("http://rss/channel/title");
        var a = b.getElementsByTagName("item").length
        titleV = trydata(titleNode(0));
        getId("listnum").innerHTML = "共有"+a+"篇文章　來(lái)源于："+titleV;
        setlist(a,b);
    }catch(e){}
}
if (top.location != self.location)top.location=self.location;

//節(jié)目列表顯示
//定義接收指向各個(gè)元素的節(jié)點(diǎn)信息的變量
var titleNode,linkNode,categoryNameNode,authorNode,pubDateNode,descriptionNode
//定義接收元素值的變量
var titleV,linkV,categoryNameV,authorV,pubDateV,descriptionV
//分類聚合
function setlist(a,b)
{
    var prograNode = b.getElementsByTagName("item");
    var adminlinkNode = b.selectNodes("http://rss/channel/link");
    var titleNode = b.selectNodes("http://rss/channel/item/title");
    var linkNode = b.selectNodes("http://rss/channel/item/link");
    var categoryNode = b.selectNodes("http://rss/channel/item/category");
    var authorNode = b.selectNodes("http://rss/channel/item/author");
    var pubDateNode = b.selectNodes("http://rss/channel/item/pubDate");
    var descriptionNode = b.selectNodes("http://rss/channel/item/description");
    var category2sNode = b.selectNodes("http://rss/channel/item/dc:subject");
    var author2sNode = b.selectNodes("http://rss/channel/item/dc:creator");
    var pubDate2sNode = b.selectNodes("http://rss/channel/item/dc:date");
    var listchar=""
//使用for循環(huán)，產(chǎn)生列表信息
    for (i=0; ia; 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))
        //將得到的元素值裝載到產(chǎn)生表格的字符串中
        listchar += "h5>a href='"+linkV+"' target='_blank'>"+titleV+"/a>/h5>span>發(fā)表時(shí)間："+pubDateV+"/span>div class='article'>"+descriptionV+"/div>div class='bottom'>文章分類："+categoryV+"　a href='"+adminlinkV+"' target='_blank'>作者："+authorV+"/a>/div>";
    }
    //將生成的表格輸出到頁(yè)面的DIV元素
    getId("prolist").innerHTML = listchar;
    listen("mainbg")
}
//瀏覽器回退部分
//重寫(xiě)IFREAM鏈接，瀏覽器回退重點(diǎn)
function saveState(message) {
    var hisFrm = getId("historyFrame")
    hisFrm.src = "blank.html?"+message
}
//檢測(cè)IFREAM
window.dhtmlHistory = {
    iframeLoaded:function(newLocation){
        var hash = new String(newLocation.search)
        if (hash.length >= 2 hash.charAt(0) == "?" hash.substring(1) !=delChar()){
            hash = hash.substring(1)
            window.location.hash = hash;
            var hisFrmdata = loadrss(hash)
        }
    }
}
//瀏覽器鏈接指向部分
//去除符號(hào),請(qǐng)注明http://www.cnrui.cn/blog轉(zhuǎn)載
function delChar(){
    var a = window.location.hash
    return     a.substring(1)
}
window.onload = function(){
    if(window.location.hash.length >= 2){
        ent(delChar())
    }
}
// -->
 點(diǎn)擊下載
您可能感興趣的文章:
  • 無(wú)框架 Ajax分頁(yè)(原創(chuàng))
  • jquery 框架使用教程 AJAX篇
  • Jquery AJAX 框架的使用方法
  • 基于JQuery框架的AJAX實(shí)例代碼
  • javascript之AJAX框架使用說(shuō)明
  • php的ajax框架xajax入門(mén)與試用介紹
  • 簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門(mén)篇)
  • 零基礎(chǔ)學(xué)習(xí)AJAX之AJAX框架

標(biāo)簽：棗莊 衡水 大理 江蘇 蚌埠 廣元 衢州 萍鄉(xiāng)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《國(guó)內(nèi)首發(fā) -- ajax完整功能框架》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266