AJAX初级应用-RSS无刷新聚合器的代码与下载

ajax|rss|刷新|无刷新|下载

rss.js
[复制此代码]CODE:
<!--
//控制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())
    }
}
// -->

index.html文件
[复制此代码]CODE:
<!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" >关闭侧边栏</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" ></div>
<iframe id="historyFrame" style="display:none" src="blank.html"></iframe>
</body>
</html>

read.css
[复制此代码]CODE:
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;
}

blank.html
[复制此代码]CODE:
<html>
   <script language="JavaScript">
            function pageLoaded() {
               window.parent.dhtmlHistory.iframeLoaded(window.location);
            }
   </script>
   <body >
      <h1>blank.html - 这个东西很重要的，兄弟！</h1>
   </body>
</html>

 

时间： 2024-10-29 21:33:19

AJAX初级应用-RSS无刷新聚合器的代码与下载的相关文章

AJAX初级应用-RSS无刷新聚合器的代码与下载第1/3页_AJAX相关

rss.js 复制代码 代码如下: <!-- //控制ID function getId(objId){     return document.getElementById(objId) } //链接对应数组,请注明转载自http://www.cnrui.cn/blog function urlArrary(urlName){     switch(urlName){         case "clear":             return "http://w

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

SERVLET+AJAX如何按类别无刷新分页?请大侠赐教,在线等.

问题描述 SERVLET+AJAX如何按类别无刷新分页?请大侠赐教,在线等. 解决方案 public class Controller extends HttpServlet { protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String s = req.getParameter("a"); resp.setCo

浅谈Ajax技术实现页面无刷新_AJAX相关

ajax (ajax开发) AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新

用AJAX实现的无刷新的分页实现代码(asp.net)_AJAX相关

之前,服务器返回的数据都是用xml的形式传给客户端的,但是xml传一个类的对象的数据会很长,流量大,所以现在都是改用json来传数据,复杂数据用json,简单数据用string.所有AJAX中的x已经失去了它原来的意义. 大家都知道JQuery,是一个Javascript的封装库,当然JQuery也实现了对AJAX的封装,这里将分页就是直接用JQuery框架来讲哈,比较简单. 首先讲一下原理:分页有两个要点:1.有多少页,2.每页有多少条记录.总页数和每页数据都是要从服务器端返回的.所以我们就先

Ajax+FormData+javascript实现无刷新表单信息提交_javascript技巧

原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

ajax+php 无刷新文件上传代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

Ajax+smarty技术实现无刷新分页_AJAX相关

这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){ function $(id) { return document.getElementById(id); } $.init=function() { try{return new XMLHttpRequest();}catch(e){}; try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e

Ajax+smarty技术实现无刷新分页

这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){ function $(id) { return document.getElementById(id); } $.init=function() { try{return new XMLHttpRequest();}catch(e){}; try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e