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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
详细分析单线程JS执行问题
2017/11/22 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python 音频生成器的实现示例
2019/12/24 Python
python 等差数列末项计算方式
2020/05/03 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
工作表现自我评价
2014/02/08 职场文书
挂科检讨书范文
2014/02/20 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
新闻稿怎么写
2015/07/18 职场文书
运动会1000米加油稿
2015/07/21 职场文书