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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
vue组件系列之TagsInput详解
May 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
php array_map()函数实例用法
2021/03/03 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
微信小程序实现批量倒计时功能
2020/11/01 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python实现删除文件与目录的方法
2014/11/10 Python
python引用DLL文件的方法
2015/05/11 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python读大数据txt
2016/03/28 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
英文自荐信
2013/12/15 职场文书
火车的故事教学反思
2014/02/11 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
转让协议书范本
2014/09/13 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL