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 25 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
巧用canvas
Jan 21 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
layui的select联动实现代码
Sep 28 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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/06/05 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
教师远程培训感言
2014/03/06 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
企业挂职心得体会
2014/09/10 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js