國內首發 -- 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">
<!--
@import url("read.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 :
程序代碼
<!--
//控制ID
function getId(objId){
return document.getElementById(objId)
}
//鏈接對應數組,請注明轉載自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
}
}
//側邊欄控制,請注明自http://www.cnrui.cn/blog轉載
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 = "關閉側邊欄"
}else{
target.style.display = "none";
main.style.width = "100%";
objsty.innerHTML = "開啟側邊欄"
}
}
}
//加載變灰,注明自http://www.cnrui.cn/blog轉載
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 += "."
}
//數據入口
function ent(urlName){
window.location.hash = urlName
var frmUrl = saveState(urlName);//寫入信息到ifream
var gamestart = loadrss(urlName);//AJAX數據過程
}
//XML數據綁定
var xmldoc = false;
function loadrss(urlName){
var myurl = urlArrary(urlName)
if(myurl){
listen("mainbg2");
//生成隨機數，同時限制刷新次數
var Num=Math.floor(Math.random()*100);
//定義往址參數
url = myurl+"?id="+Num;
//定義為異步傳輸模式
xmldoc = false;
//Mozill,Safari等浏覽器時需要創建的XMLHttp類
if(window.XMLHttpRequest){
xmldoc = new XMLHttpRequest();
if(xmldoc.overrideMimeType){
xmldoc.overrideMimeType('text/xml');
}
}
//IE浏覽器時創建的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){}
}
}
}
//不能創建XMLHTTP類時返回
if(! xmldoc){
return false;
}
//調用CheckState函數
xmldoc.onreadystatechange = CheckState;
xmldoc.open('GET',url,true);
xmldoc.send(null);
}else{
getId("listnum").innerHTML = "您輸入的地址錯誤，請重試！"
}
}
//狀態檢測
function CheckState(){
var response = xmldoc.responseXML.documentElement;
btnSty("loadifo","block")
//收到完整的服務器響應
if(xmldoc.readyState == 1){
getId("loadifo").innerHTML = "連接服務器"
}
else if(xmldoc.readyState == 2){
getId("loadifo").innerHTML = "開始加載數據"
}
else if(xmldoc.readyState == 3){
getId("loadifo").innerHTML = "正在加載數據"
settime(loadtime)
}
else if(xmldoc.readyState == 4){
//HTTP服務器響應值成功
if(xmldoc.status == 200){
//將服務器返回的字符串寫到頁面中ID為showdiv的區域
getId("loadifo").innerHTML = "加載完成"
settime(ifodis)
num(response)
}
else{
getId("loadifo").innerHTML = "錯誤"+xmldoc.status+"點這裡刷新";
}
}
}
//檢查數據合法性
function trydata(nodeName,nodeName2){
try{
var nodeV = nodeName.firstChild.nodeValue;
}catch(e){
try{
var nodeV = nodeName2.firstChild.nodeValue;
}catch(e){
var nodeV = "沒有可用信息"
}
}
return nodeV;
}
//記錄集總數
function num(b){
try{
var titleNode = b.selectNodes("//rss/channel/title");
var a = 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;
//節目列表顯示
//定義接收指向各個元素的節點信息的變量
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("//rss/channel/link");
var titleNode = b.selectNodes("//rss/channel/item/title");
var linkNode = b.selectNodes("//rss/channel/item/link");
var categoryNode = b.selectNodes("//rss/channel/item/category");
var authorNode = b.selectNodes("//rss/channel/item/author");
var pubDateNode = b.selectNodes("//rss/channel/item/pubDate");
var descriptionNode = b.selectNodes("//rss/channel/item/description");
var category2sNode = b.selectNodes("//rss/channel/item/dc:subject");
var author2sNode = b.selectNodes("//rss/channel/item/dc:creator");
var pubDate2sNode = b.selectNodes("//rss/channel/item/dc:date");
var listchar=""
//使用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><a href='"+linkV+"' target='_blank'>"+titleV+"</a></h5><span>發表時間："+pubDateV+"</span><div class='article'>"+descriptionV+"</div><div class='bottom'>文章分類："+categoryV+" <a href='"+adminlinkV+"' target='_blank'>作者："+authorV+"</a></div>";
}
//將生成的表格輸出到頁面的DIV元素
getId("prolist").innerHTML = listchar;
listen("mainbg")
}
//浏覽器回退部分
//重寫IFREAM鏈接，浏覽器回退重點
function saveState(message) {
var hisFrm = getId("historyFrame")
hisFrm.src = "blank.html?"+message
}
//檢測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)
}
}
}
//浏覽器鏈接指向部分
//去除符號,請注明http://www.cnrui.cn/blog轉載
function delChar(){
var a = window.location.hash
return a.substring(1)
}
window.onload = function(){
if(window.location.hash.length >= 2){
ent(delChar())
}
}
// -->
點擊下載
下面將給我源代碼,希望喜歡的朋友轉載的時候注明轉載出處,這樣不管對你自己,還是對本人,都是一種極大的尊重.
記得有篇文章數落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">
<!--
@import url("read.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 :
程序代碼
<!--
//控制ID
function getId(objId){
return document.getElementById(objId)
}
//鏈接對應數組,請注明轉載自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
}
}
//側邊欄控制,請注明自http://www.cnrui.cn/blog轉載
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 = "關閉側邊欄"
}else{
target.style.display = "none";
main.style.width = "100%";
objsty.innerHTML = "開啟側邊欄"
}
}
}
//加載變灰,注明自http://www.cnrui.cn/blog轉載
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 += "."
}
//數據入口
function ent(urlName){
window.location.hash = urlName
var frmUrl = saveState(urlName);//寫入信息到ifream
var gamestart = loadrss(urlName);//AJAX數據過程
}
//XML數據綁定
var xmldoc = false;
function loadrss(urlName){
var myurl = urlArrary(urlName)
if(myurl){
listen("mainbg2");
//生成隨機數，同時限制刷新次數
var Num=Math.floor(Math.random()*100);
//定義往址參數
url = myurl+"?id="+Num;
//定義為異步傳輸模式
xmldoc = false;
//Mozill,Safari等浏覽器時需要創建的XMLHttp類
if(window.XMLHttpRequest){
xmldoc = new XMLHttpRequest();
if(xmldoc.overrideMimeType){
xmldoc.overrideMimeType('text/xml');
}
}
//IE浏覽器時創建的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){}
}
}
}
//不能創建XMLHTTP類時返回
if(! xmldoc){
return false;
}
//調用CheckState函數
xmldoc.onreadystatechange = CheckState;
xmldoc.open('GET',url,true);
xmldoc.send(null);
}else{
getId("listnum").innerHTML = "您輸入的地址錯誤，請重試！"
}
}
//狀態檢測
function CheckState(){
var response = xmldoc.responseXML.documentElement;
btnSty("loadifo","block")
//收到完整的服務器響應
if(xmldoc.readyState == 1){
getId("loadifo").innerHTML = "連接服務器"
}
else if(xmldoc.readyState == 2){
getId("loadifo").innerHTML = "開始加載數據"
}
else if(xmldoc.readyState == 3){
getId("loadifo").innerHTML = "正在加載數據"
settime(loadtime)
}
else if(xmldoc.readyState == 4){
//HTTP服務器響應值成功
if(xmldoc.status == 200){
//將服務器返回的字符串寫到頁面中ID為showdiv的區域
getId("loadifo").innerHTML = "加載完成"
settime(ifodis)
num(response)
}
else{
getId("loadifo").innerHTML = "錯誤"+xmldoc.status+"點這裡刷新";
}
}
}
//檢查數據合法性
function trydata(nodeName,nodeName2){
try{
var nodeV = nodeName.firstChild.nodeValue;
}catch(e){
try{
var nodeV = nodeName2.firstChild.nodeValue;
}catch(e){
var nodeV = "沒有可用信息"
}
}
return nodeV;
}
//記錄集總數
function num(b){
try{
var titleNode = b.selectNodes("//rss/channel/title");
var a = 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;
//節目列表顯示
//定義接收指向各個元素的節點信息的變量
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("//rss/channel/link");
var titleNode = b.selectNodes("//rss/channel/item/title");
var linkNode = b.selectNodes("//rss/channel/item/link");
var categoryNode = b.selectNodes("//rss/channel/item/category");
var authorNode = b.selectNodes("//rss/channel/item/author");
var pubDateNode = b.selectNodes("//rss/channel/item/pubDate");
var descriptionNode = b.selectNodes("//rss/channel/item/description");
var category2sNode = b.selectNodes("//rss/channel/item/dc:subject");
var author2sNode = b.selectNodes("//rss/channel/item/dc:creator");
var pubDate2sNode = b.selectNodes("//rss/channel/item/dc:date");
var listchar=""
//使用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><a href='"+linkV+"' target='_blank'>"+titleV+"</a></h5><span>發表時間："+pubDateV+"</span><div class='article'>"+descriptionV+"</div><div class='bottom'>文章分類："+categoryV+" <a href='"+adminlinkV+"' target='_blank'>作者："+authorV+"</a></div>";
}
//將生成的表格輸出到頁面的DIV元素
getId("prolist").innerHTML = listchar;
listen("mainbg")
}
//浏覽器回退部分
//重寫IFREAM鏈接，浏覽器回退重點
function saveState(message) {
var hisFrm = getId("historyFrame")
hisFrm.src = "blank.html?"+message
}
//檢測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)
}
}
}
//浏覽器鏈接指向部分
//去除符號,請注明http://www.cnrui.cn/blog轉載
function delChar(){
var a = window.location.hash
return a.substring(1)
}
window.onload = function(){
if(window.location.hash.length >= 2){
ent(delChar())
}
}
// -->
點擊下載
小編推薦
熱門推薦