I wrote about this earlier, although I didn't post the code due to an extension of the deadline. Now everyone seems to have delivered, and in a year or two we might get to know if we did well. Meanwhile, since this works and seems to be a good example, I'll post my work here:
Our assignment was to fetch an external RSS feed, and handle and present it locally by using only HTML and JavaScript (more specifically, by using XMLHttpRequest).
The one we used is
this one. Bear in mind that it's in Norwegian.
An RSS feed is XML-formatted, and feeds are similar enough that this script should work on all feeds. Unless I'm terribly wrong, in which case I need to be berated.
The first snag, which actually took quite some time to figure out (I know, this is your cue to laugh at us. We were young and didn't know better.), was that we couldn't seem to access the feed through JavaScript alone. It turned out, after quite some time of googling, to be a security issue with XmlHttpRequest: One isn't allowed to fetch content from a domain different from the one running the script. After consulting the lecturer, we were allowed to find alternative means of doing it, and to use php to support the script.
My result is a really simple php script, followed by a somewhat less simple javascript:
By the way, showing code here is more of a hassle that it's worth, so you might as well just check out the scripts
here and
here. Seriously, posting code here is such a pain.
Here's the simple php file, getxml.php:
<![CDATA[ <br />
<?php
$xml = simplexml_load_file('http://www.oslo.kommune.no/rss.php');
echo($xml->asXML()); <br />
?> <br />
]]>
I don't see any way to explain this script more easily than it already is, it fetches the external content and shows this file(the php-file) as a pure XML-formatted document.
Next up is the annoying part, because it's longer. I'm also transcribing this from my laptop to my desktop computer by hand, because file transfer is for sissies.
<![CDATA[ <br />
<html> <br />
<head> <br />
<br />
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
ajaxRequest.overrideMimeType("text/xml");
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Browser unable to handle AJAX.");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var xmlDoc = ajaxRequest.responseXML;
var textToPage = "";
for(var i=1;i<3;i++){
textToPage += "<h3>
"+xmlDoc.getElementsByTagName('title')[i].childNodes[0].nodeValue+"</h3>"
+"<p>
"+xmlDoc.getElementsByTagName('description')[i].childNodes[0].nodeValue+"</p>"
+"<p>
<font size='2'>"+xmlDoc.getElementsByTagName('pubDate')[i].childNodes[0].nodeValue+"</font></p>";
}
document.getElementById('swapthis').innerHTML = textToPage;
}
}
ajaxRequest.open("GET", "getxml.php", true);
ajaxRequest.send(null);
}
</script> <br />
</head> <br />
<body onLoad="ajaxFunction()"> <br />
<h1>XML/RSS Fetched Via JavaScript</h1><p><br />
<div id="swapthis"></div><br />
</body> <br />
</html> <br />
]]>
0 comments:
Post a Comment