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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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
如何去掉文章里的 html 语法
2006/10/09 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python获取当前时间的方法
2014/01/14 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
高三生物教学反思
2014/01/25 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
岗位聘任报告
2015/03/02 职场文书
2015安全保卫工作总结
2015/04/25 职场文书