How to Write an Ajax RSS Script
Asynchronous JavaScript and XML, AJAX, is a technique using several web technologies to develop interactive client-side web applications. JavaScript is used to read an XML file, and display formatted content on the Web page using Dynamic HTML (DHTML) and Document Object Model (DOM). Really Simple Syndication (RSS) feed files are XML formatted files containing information and links for news stories, blog posts, and even podcast information. Fetching and displaying an RSS feed is a great way to get started with AJAX.
Other People Are Reading
Instructions
-
-
1
Create a new JavaScript file. Save it with the file name "rss.js".
-
2
Add the following function. The function intializes and returns an XMLHttpRequest object. XMLHttpRequest is the core of AJAX programming. Older versions of Internet Explorer initialize an XMLHttpRequest using an ActiveX instead of the window.
function initXmlHttpReq() {
var x ;
if (window.XMLHttpRequest) {
x = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
x = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
alert("Your browser does not support this feature.");
return ;
}return x ;
} -
-
3
Add the following function to handle the action of parsing and displaying the RSS feed when the file is fetched. readyState indicates the status of the file fetch, and is equal to 4 when the file was fetched successfully. The document will have a DIV tag with the id "rss." The script will write the RSS into this DIV.
function stateChange() {
if (xmlreq.readyState==4) {
var data = xmlreq.responseXML;
var elem = document.getElementById("rss");
parseRss(data, elem);
}
} -
4
Add the following two functions for parsing and writing the RSS data stored in the data object. Each RSS headline is contained in the "item" element, which contains the title, link, and other information in child elements. parseRss builds an unordered list, populates it with the information from the RSS feed, and writes it to a DIV with the id "rss" in the web page using your script. getVal is used to pull data from the child nodes, and keeps the parseRss function a little more neat and readable.
function parseRss(data, elem) {
elem.innerHTML = "<h2>Feed<h2>";
var items = data.getElementsByTagName("item");
var list = document.createElement("ul");
for (var i = 0 ; i < items.length ; i++) {
var listItem = document.createElement("li");
var linkItem = document.createElement("a");
linkItem.setAttribute("href", getVal(items[i],"link"));
linkItem.appendChild(document.createTextNode(getVal(items[i],"title")));
listItem.appendChild(linkItem);
list.appendChild(listItem);
}
elem.appendChild(list);
}function getVal(obj, tag) {
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
} -
5
Add the following function that opens the RSS feed, triggering the parsing and writing of the contents to the web page.
function makeRequest () {
xmlreq.open("GET", url, true);
xmlreq.send(null);
} -
6
Add the following lines at the end of the script. These lines will execute when the page loads. Change the URL "rss.xml" to the URL for your RSS feed.
var xmlreq = initXmlHttpReq();
var url = "rss.xml" ;
xmlreq.onreadystatechange=stateChange; -
7
Use the script by including the script in your web page's head area:
<script type="text/javascript" src="rss.js"/>and adding the call to "makeRequest()" to the BODY tag's onload attribute:
<body onload="makeRequest();">
-
1
Tips & Warnings
Customize the formatting by modifying the parseRSS function or creating a style in your CSS file for "div.rss", "div.rss ul", and "div.rss ul li". Update the RSS automatically by creating a timer event in your JavaScript to call the makeRequest function every few minutes. Create a ticker that displays one headline at a time by modifying the for loop in parseRSS to wait a few seconds before replacing the contents of the DIV with the next headline in the list.
AJAX can only be used to fetch XML files from servers on your own network domain. To use external RSS feeds, use a server-side scheduler to fetch copies to your Web server, or a server-side web application to fetch and deliver feeds to your AJAX script. Also see the "MDC: HTTP Access Control" link in the References for additional information about implementing cross-site HTTP requests.
