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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
js对象的复制继承实例
Jan 10 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
Vue页面刷新记住页面状态的实现
Dec 27 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中使用模板的方法
2008/05/24 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue router demo详解
2017/10/13 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python如何省略括号方法详解
2020/03/21 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python FTP编程基础入门
2021/02/27 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
给分销商的致歉信
2014/01/14 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
车辆转让协议书
2014/09/24 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
酒桌上的开场白
2015/06/01 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server