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之一
Apr 27 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
JS异步处理的进化史深入讲解
Aug 25 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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
onpropertypchange
2006/07/01 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python 绘制场景热力图的示例
2020/09/23 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
公司离职证明范本
2014/01/13 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫