Javascript Ajax异步读取RSS文档具体实现
2013-12-12 00:00
639 查看
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对象并将请求发送到服务器:
通过DOM操作对Rss文档进行遍历,得到需要的值:
调用createXHR(url)函数,传入参数,向服务器发送求:
得到响应:
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是如何实现继承的
- js使下拉列表框可编辑不止是选择
- javascript字符串替换及字符串分割示例代码
- js setTimeout()函数介绍及应用以倒计时为例
- 使用javascript读写本地文件的方法
- ExtJS4.2学习(10)分组表格控件--GroupingGrid 推荐
- 前台转为json格式,后台接收
- JavaScript HTML DOM 入门详解
- 超级实用且不花哨的js代码大全
- js获取日期
- JS编写简单的弹窗插件(含有demo和源码)
- 微软自家的.Net下的JavaScript引擎——ClearScript
- 2013-12-11 JSP开发
- C#实现json的序列化和反序列化
- JS小技巧
- javascript 提醒笔记
- arcgis api for javascript中使用proxy.jsp
- JS面向对象方法
- js客户端判断文件大小限制上传
- 如何在jsp中设置自动跳转