Next Prev

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.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!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/ajax/ajax-feed/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>XMLHttpRequest() demo</title>


<style type="text/css">
  body {
    background-color: #52616F;
    color: white;
  }
  a {
    color: pink;
  }
    #feed {
        background: #52616F;
        border: 1px dotted #ccc;
        height: 400px;
        overflow: auto;
        width: 400px
    }

</style></head><body>

<script language="javascript" type="text/javascript">

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;   
}

function ajaxFunction()
  {
  var xmlHttp;
   
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    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>

<center><div id="feed"></div></center>

</body></html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Mike

2007-06-15 00:31:00

it's very simple

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Ajax Feed

Comment on this example