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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js获取class的所有元素
Mar 28 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
德劲1103二次变频版的打磨
2021/03/02 无线电
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
php源码的使用方法讲解
2019/09/26 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
node.js监听文件变化的实现方法
2019/04/17 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
vue模块移动组件的实现示例
2020/05/20 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python生成器表达式和列表解析
2016/03/10 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
酒店管理专业学生求职信
2013/09/27 职场文书
专业毕业生个性的自我评价
2013/10/03 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
小学生安全保证书
2015/05/09 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技