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

所属分类: 网络编程 / JavaScript 阅读数: 1908
收藏 0 赞 0 分享

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);
        }
    }
}

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多