JavaScript通过AJAX获取博客RSS源示例

作者:闭包旅人时间:2026-10-28 10:12:12浏览:178

本文提供使用JavaScript和AJAX技术读取博客RSS源的完整示例。代码涵盖XMLHttpRequest对象的跨浏览器创建、异步GET请求发送,以及通过DOM解析XML响应并动态渲染标题与链接至页面的过程。适用于学习前端数据抓取与RSS聚合的基础实现。

JavaScript AJAX读取RSS源完整代码

具体实现代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>this is test</title>
<script type="text/javascript"> 
var xmlHttp;
function createXMLHttpRequest() { 
 if (window.ActiveXObject) { 
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 } 
 else if (window.XMLHttpRequest) { 
 xmlHttp = new XMLHttpRequest(); 
 }
}
function readRSS(url) { 
 createXMLHttpRequest(); 
 xmlHttp.onreadystatechange = handleStateChange; 
 xmlHttp.open("GET", url, true); 
 xmlHttp.send(null); 
 
} 
function handleStateChange() { 
 if(xmlHttp.readyState == 4) { 
 if(xmlHttp.status == 200) { 
 ResultSet(); 
 } 
 }
}
function ResultSet() { 
 var results = xmlHttp.responseXML; 
 var title = null; 
 var item = null; 
 var link=null; 
 //得到channel 
 var ccc=results.getElementsByTagName("channel"); 
 var headtitle=ccc[0].getElementsByTagName("title")[0].firstChild.nodeValue; 
 var headlink=ccc[0].getElementsByTagName("link")[0].firstChild.nodeValue; 
 var cell = document.createElement("div"); 
 cell.innerHTML="<h1><a href="+headlink+" target=_blank>"+headtitle+"</a></h1>
"; 
 document.getElementById("result").appendChild(cell); 
 //得到items 
 var items = results.getElementsByTagName("item"); 
 for(var i = 0; i < items.length; i++) { 
 item = items[i]; 
 link=item.getElementsByTagName("link")[0].firstChild.nodeValue; 
 title = item.getElementsByTagName("title")[0].firstChild.nodeValue; 
 var cell = document.createElement("div"); 
 cell.innerHTML="<a href="+link+" target=_blank>"+title+"</a>
"; 
 document.getElementById("result").appendChild(cell); 
}
}
function readrss1() 
{
 var url=document.getElementById("txturl").value; 
 if(url=="") 
 {
 alert("请输入RSS地址"); 
 } 
 else 
 {
 readRSS(url); 
 }
 }
</script> 
</head>
<body">
 <h1>ajax读rss示例</h1> 
 <form >
 <a href="javascript:readRSS('http://www.blogjava.net/rss.aspx')">blogjava原创区 </a> 
 <a href="javascript:readRSS('http://beginner.blogjava.net/rss.aspx')">blogjava新手区 </a> 
 <a href="javascript:readRSS('http://life.blogjava.net/rss.aspx')">blogjava非技术区 </a> 
 <a href="javascript:readRSS('http://general.blogjava.net/rss.aspx')">综合区 </a>
 
 输入一个RSS地址:<input type="text" value="http://www.blogjava.net/wujun/rss.aspx" size=50 id="txturl"> 
 <input type="button" value="查 看" onclick="readrss1()">
 </form> 
 <div id="result"></div> 
</body> 
</html>
作者最新文章