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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
一实用的实现table排序的Javascript类库
Sep 12 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
Laravel框架表单验证详解
2014/09/04 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python读写文件操作示例程序
2013/12/02 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
对python中return和print的一些理解
2017/08/18 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
个人委托书怎么写
2014/04/04 职场文书
党员进社区活动总结
2015/05/07 职场文书
2016特色励志班级口号
2015/12/24 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python os和os.path模块详情
2022/04/02 Python