Ok, so here is a quick guide to how I produced the mobile AJAX RSS news reader at-
http://www.binaryrefinery.com/mobile
The design goal was to present a quick summary of my news feed so that it can be easily browsed from a mobile device. I figured AJAX would make a good choice as it allowed the relatively large file size (compared to the home page) of the RSS feed to load in the background while still presenting the home page to the user.
OK first up, I wrote this AJAX feed reader with notepad (well actually I used Textpad , which is a great editor), so this is literally simplicity itself. The AJAX feed reader is just one single HTML page and a single GIF89 for the feed loading icon (i.e 
).
So lets walk through the code behind the page -
Step 1 - this is the top part of the page, note when the page loads in the onload it calls the function to go abd pull out the RSS feed. Also see at the bottom we have a variable g_request to store the AJAX request. g_feedXML will store the XML document that is the RSS feed.
<html>
<head>
<title>Richard Jones</title>
</head>
<body onload='requestRSSFromServer()'>
<script type="text/javascript">
var g_request; // XMLHTTP request object
var g_feedXML; // XML document object
Steb 2 - So this is where the action all happens. The first step, is we work out the URL of the RSS feed. This URL is derived from window.location.href . This variable gives the fulll path of the page you are requesting, i.e the mobile home page. The reason I do this is that when I'm debugging I'm using a different URL to the one that will go into production. This means that I don't have to change any code when I roll out into live (a good move in my book).
With me so far? Next bit is to actually go and asynchronously get the RSS feed at the URL, we have just established. Just before this we set a couple of controls on the main page to invisible until the feed has been downloaded. Interestingly to switch form elements on and off, you have to resort to programmatically setting their style, like -
document.all.morelink.style.visibility = 'hidden'; // or 'visible'
The next line is where the action is, is -
g_request.onreadystatechange = processResponseArticles;
this is the event handler that will fire, when we get some form of response back from sending our request for the RSS feed. processResponseArticles is where we handle asynchronously when we get the page back.
function requestRSSFromServer()
{
var feedurl = "";
var sPage=window.location.href;
sPage = sPage.substring(0,sPage.lastIndexOf('/') );
sPage = sPage.substring(0,sPage.lastIndexOf('/') );
feedurl=sPage+"/main/SyndicationService.asmx/GetRss" ; // RSS feed url
document.all.articleList.style.visibility = 'hidden'; // Hide some controls on the form until we get the feed
document.all.morelink.style.visibility = 'hidden';
// Cancel any outstanding requests.
if (g_request)
{
g_request.abort();
}
g_request = new ActiveXObject("Msxml2.XMLHTTP");
g_request.onreadystatechange = processResponseArticles; // go asynchronously get the feed
g_request.open("GET", feedurl, true);
g_request.send();
}
Step 3 - This bit handles receiving the response back, when we get something back from requesting the RSS feed. I think this is fairly self explanatory.
Note that when we have got the full document downloaded we can go, populate the drop down list of available news articles.
function processResponseArticles()
{
// Done getting response.
if (g_request.readystate == 4)
{
// Success.
if (g_request.status == 200)
{
// Treat as a plain-text reply.
g_feedXML = new ActiveXObject("Msxml2.DOMDocument");
g_feedXML.loadXML(g_request.responseText);
// Display the list of articles.
loadarticleList();
// display our selected article
populatearticlebox();
}
else
{
alert("Could not get requested feed from server.");
}
}
}
</script>
Step 4 (almost there) - this is the function that populates the dropdown list from the XML RSS feed we have downloaded. Note it also switches on, the forms controls to indicate that the feed has loaded (and switches off the spinner graphic). We loop around the 'item' XML elements in our RSS feed. The title of each feed is held in an XML element called 'title'.
// Initialize the first dropdown (categories) from the XML.
function loadarticleList()
{
// Get all the categories.
items = g_feedXML.getElementsByTagName('item');
document.all.articleList.length = 0;
for (g = 0; g < items.length; g++)
{
titles=items[g].getElementsByTagName('title')
option = new Option();
var ourtext=titles[0].text;
option.text = ourtext;
option.value = ourtext;
document.all.articleList.options.add(option);
}
document.all.statustext.innerHTML='Latest Articles:'; // this also switches off spinner image
document.all.articleList.style.visibility = 'visible';
document.all.morelink.style.visibility = 'visible';
}
Step 5 - This is the body of the HTML page itself. Note how minimal it is. When a user makes a selection from the dropdown list, we populate our article.
<body>
<b>R i c h a r d J o n e s</b><br>
-- Mobile Lob Blog --
<form id='myForm'>
<div id='statustext'><img src='images/spinner.gif'> Loading Feeds...</div>
<select id='articleList' onchange='populatearticlebox()'></select>
<hr>
<div id='bodytext'></div>
<a href="" id='morelink'>More...</a>
</form>
</body>
</html>
Step 6 (final bit, honest) - Here we paint the body of the article onto the web-form. We pull out the relevant bit of the XML RSS feed based on which line we have selected on our drop down list of articles. We also set the 'more' link to the source URL of the article
function populatearticlebox()
{
selectedIndex = document.all.articleList.options.selectedIndex;
categoryName = document.all.articleList.options[selectedIndex].value;
// Search the XML for the selected category.
items = g_feedXML.getElementsByTagName('item');
descriptions = items[selectedIndex].getElementsByTagName('description');
document.all.bodytext.innerHTML ="<strong>"+categoryName+"</strong><br>"+descriptions[0].text;
try
{
links = items[selectedIndex].getElementsByTagName('link');
document.all.morelink.href=links[0].text;
}
catch(e)
{
}
}
So that's just about it. Obviously this is a fairly simple sample. The write up took way longer than actually writing the code (the usual story). Next week we'll have a go at using this for some real Mobile LOB work pulling business information in realtime out of a database or somethink like that 