Ajax Feed

Using javascript to talk to the server can be useful for complex applications that need to make multiple small requests to the server and make it fast. By doing this you can keep most of the logic on the server where it belongs. So it can help prevent the complex client anti-pattern (even worse ishaving basicaly the same code on the client and server side). Doesn't work on Internet Explorer 6 or 7. Thumbs down for this script.

Download code Visit demo

Tags: feed

<< jQuery Carousel Dynamic content >>

Ajax Feed demo

Changes to the code below will update the demo above in real time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/ajax-feed/ajax-feed/" />

function showFeed(xmlUrl, xslUrl) {
    var feed = document.getElementById('feed');
    //clear feed div
    while(feed.hasChildNodes()){
        feed.removeChild(feed.childNodes[0]);
    }
    //append new htmlfragment
    feed.appendChild(getHtmlFragment(xmlUrl, xslUrl));     
}

function getHtmlFragment(xmlUrl, xslUrl) {
    var xslStylesheet;
    var xsltProcessor = new XSLTProcessor();

//load the xml file
    var xmlSource = getResponseXml(xmlUrl).responseXML;

//load the xsl file into the xslt Processor
    xslStylesheet = getResponseXml(xslUrl).responseXML;      
    xsltProcessor.importStylesheet(xslStylesheet);
    
    return xsltProcessor.transformToFragment(xmlSource, document);
}

function getResponseXml(xmlUrl) {
    var xmlHttp = ajaxFunction();
    xmlHttp.open("GET", xmlUrl, false);
    xmlHttp.send(null);
    return xmlHttp;   
}

</script>
<p>Retrieves an xml rss feed and xsl stylesheet with XMLHttpRequest().
Applies the stylesheet to the xml. Adds the fragment to the div.</p>

<a href="#" onclick="showFeed('rss.xml', 'rsscontents.xsl'); return false;">table of contents</a> -
<a href="#" onclick="showFeed('rss.xml', 'rsscomplete.xsl'); return false;">complete entries</a>

</body></html>

June 15, 2007, 12:31 a.m. - mike: it's very simple
June 5, 2008, 12:08 p.m. - Kevin: I used Google Ajax API for the rss feed mess-up... they are very handy and simple
Jan. 19, 2012, 1:52 a.m. - natsu dragneel: I love FAIRYTAIL!!!