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 相关文章推荐
innerText和textContent对比及使用介绍
Feb 27 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
JS二分查找算法详解
Nov 01 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JS运算符简单用法示例
Jan 19 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 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
PHP文本操作类
2006/11/25 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vscode下的vue文件格式化问题
2018/11/28 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python实现简单字典树的方法
2016/04/29 Python
python中range()与xrange()用法分析
2016/09/21 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python中 map()函数的用法详解
2018/07/10 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
干部选拔任用方案
2014/05/26 职场文书
安全目标管理责任书
2014/07/25 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis