日期:2014-4-16 浏览次数:20316次 点赞次数:20

前段时间参加了第一届AJAX大赛,结果差了几分,第一轮都没过,郁闷中~~~

其中一题是用AJAX 技术读取RSS种子,感觉对学习AJAX技术很有启发意义,如今把本人的实现代码发布,以供大家学习交流!

题目:
使用XMLHttpRequest读取ajaxcn.org的RSS Feed(http://ajaxcn.org/exec/rss),并用HTML的列表标签(UL/OL/LI)列出获取的的Blog条目.

代码实现:

<!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>RSS Reader</title>
<!--copyright Turkeycock-->
<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() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "http://ajaxcn.org/exec/rss", true);
    xmlHttp.send(null);
}
   
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            clearPreviousResults();
            parseResults();
        }
    }
}

function clearPreviousResults() {
    var ListBody = document.getElementById("resultsTitle");
    while(ListBody.childNodes.length > 0) {
        ListBody.removeChild(ListBody.childNodes[0]);
    }
}

function parseResults() {
    var results = xmlHttp.responseXML;
    var title = null;
    var item = null;

    var items = results.getElementsByTagName("item");
    for(var i = 0; i < items.length; i++) {
        item = items[i];
        title = item.getElementsByTagName("title")[0].firstChild.nodeValue;

        addListRow(title);
    }

}


function addListRow(title) {
    var row = document.createElement("ul");
    var cell = createCellWithText(title);
    row.appendChild(cell);
   
    document.getElementById("resultsTitle").appendChild(row);
}

function createCellWithText(text) {
    var cell = document.createElement("li");
    var textNode = document.createTextNode(text);
    cell.appendChild(textNode);
   
    return cell;
}
</script>
</head>

<body>
  <h2>Blog文章列表</h2>
  <form action="#">
    <input type="button" value="搜索" />   
  </form>
    <div id="resultsTitle"></div>
</body>
</html>

部署到web容器中就可以运转,我是在Tomcat 5.5中运转的,可以正确读取RSS种子!