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 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
javascript中indexOf技术详解
May 07 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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/05/24 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
vue实现拖拽效果
2019/12/23 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
详解Python with/as使用说明
2018/12/13 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
车间操作工岗位职责
2013/12/19 职场文书
外贸专业求职信
2014/03/09 职场文书
化工操作工岗位职责
2014/04/29 职场文书
文明市民先进事迹
2014/05/15 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
人事聘任通知
2015/04/21 职场文书
员工旷工检讨书
2015/08/15 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
Python实现数据的序列化操作详解
2022/07/07 Python