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 eval解析JSON中的注意点介绍
Aug 23 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
JavaScript实现音乐播放器
Aug 14 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
php Smarty 字符比较代码
2011/02/27 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Python读写配置文件的方法
2015/06/03 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
经销商会议欢迎词
2014/01/11 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
乳制品整治工作方案
2014/05/29 职场文书
消防标语大全
2014/06/07 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers