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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
vue实现简单的日历效果
Sep 24 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python编程中的反模式实例分析
2014/12/08 Python
python创建和删除目录的方法
2015/04/29 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python实现滑雪者小游戏
2020/02/22 Python
解决Python安装cryptography报错问题
2020/09/03 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
施工班组长岗位职责
2014/01/05 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
会议室管理制度范本
2015/08/06 职场文书
导游词之唐山景点
2019/12/18 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
python3操作redis实现List列表实例
2021/08/04 Python