Javascript Ajax异步读取RSS文档具体实现


Posted in Javascript onDecember 12, 2013

RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享。Ajax 是Asynchronous JavaScript and XML的缩写。通过 Ajax 技术可以经由超文本传输协议(Http) 向一个服务器发出请求并且在等待该响应时继续处理另外的数据。通过 Ajax 技术可以很容易实现读取远程 XML文件,因此,可以使用 Ajax技术实现远程访问依据 RSS 标准生成的摘要信息,甚至我们可以自己写一个 RSS 阅读器。

        Ajax 并不是一门新的语言或技术, 它实际上是几项技术按一定的方式组合在一起。共同在协作中发挥各自的作用, 它包括:使用XHTML 和CSS 标准化呈现; 使用DOM 实现动态显示和交互; 使用XML 和XSLT 进行数据交换与处理; 使用XMLHttpRequest进行异步数据读取; 最后用 JavaScript 绑定和处理所有数据。好了,对于理论就不在多说了,下面我们直接看代码吧。

        创建XMLHttpRequest对象并将请求发送到服务器:

function createXHR(url){
     if(window.XMLHttpRequest){
         xmlHttp = new XMLHttpRequest();
     }else{  
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlHttp.open("post",url,"false"); 
    xmlHttp.onreadystatechange = getResponse;     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlHttp.send(null);
 }

通过DOM操作对Rss文档进行遍历,得到需要的值:

function readDoc(doc){ 
    root = doc.getElementsByTagName("channel")[0]; 
    docTitle = root.getElementsByTagName("title")[0]; 
    docLink = root.getElementsByTagName("link")[0]; 
    docDescription = root.getElementsByTagName("description")[0]; 
    items = root.getElementsByTagName("item"); 
    for(var i=0;i<items.length;i++){ 
        itemTitle = items[i].getElementsByTagName("title")[0]; 
        itemLink = items[i].getElementsByTagName("link")[0]; 
        itemDescription = items[i].getElementsByTagName("description")[0]; 
        //itemPubDate = items[i].getElementsByTagName("pubDate")[0]; 
        document.getElementById("rssTitle").innerHTML = docTitle.firstChild.nodeValue; 
        temp = "</h1><h2><a href=""+itemLink.firstChild.nodeValue+"" target="_blank">"+itemTitle.firstChild.nodeValue+"</a></h2>"+"<p>"+itemDescription.firstChild.nodeValue+"</p><hr/>"; 
        document.getElementById("readRss").style.display = "none"; 
        document.getElementById("printRss").getElementsByTagName("span")[0].style.display = "none"; 
        document.getElementById("printRss").innerHTML = document.getElementById("printRss").innerHTML + temp; 
    } 
}

调用createXHR(url)函数,传入参数,向服务器发送求:

createXHR("http://www.apple.com.cn/hotnews/rss/hotnews.rss");

得到响应:

function getResponse(){ 
   if(xmlHttp.readyState == 4){      
        if(xmlHttp.status == 200){  
            rssDoc = xmlHttp.responseXML; 
            readDoc(rssDoc);//调用readDoc()函数 
        }else{ 
            document.getElementById("rssTitle").innerHTML = "读取异常!"; 
            //alert(xmlHttp.status); 
        } 
    } 
}
Javascript 相关文章推荐
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
javascript时间差插件分享
Jul 18 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
javascripit实现密码强度检测代码分享
Dec 12 #Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 #Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 #Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 #Javascript
js中typeof的用法汇总
Dec 12 #Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 #Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 #Javascript
You might like
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python中sys.argv函数精简概括
2018/07/08 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
文字自荐书范文
2014/02/10 职场文书
节能环保口号
2014/06/12 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
房屋过户委托书范本
2014/10/07 职场文书
廉政承诺书
2015/01/19 职场文书
旅行社计调工作总结
2015/08/12 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Python中super().__init__()测试以及理解
2021/12/06 Python