Syndicate your articles with JavaScript

Sep 27 2006

Syndicate your articles with JavaScript

Note: the examples here and download solution are created using C# and ASP.NET 2.0, but if you are using .NET 1.1 - read on cause the basic ideas are pretty much the same.

Changed 2006-09-27: added instructions at the bottom if you get no results at your own system

While RSS or some type of XML flow sure is considered the proper way to syndicate content from a site or system, there are still some drawbacks with such a solution. Especially if you want people to be able to easily put it up on their own website (maybe showing your headlines and links to your site for reading the full article):

a) it puts some workload on the client (i.e the siteowner must write code to retrieve the RSS from your site, parse it and present it on his/her site). They must of course have the knowledge to do it - and also be prepared to spend the time needed for it.

b) you loose control of which content should be presented. They have the freedom to remove data/change data before showing it

What I will show in this article is a way to export data from your site in the form of a JavaScript - meaning the siteower just puts code like this

<h1>Some content before</h1>
<script src="http://www.yoursite.com/Syndicate/syndicate.ashx?d=supplier"></script>
<br>And some content after bla bla

into his webpage. The good thing about this method is it just takes the siteowner a few seconds to implement it - it's also possible for just about anyone to use it. Not only webmasters with some knowlegde in programming, but it can also be used from static html pages as well! Please run this demo to show you what I mean. Did you see any html tags for the suppliers in the source?

On the other side - the drawback is that JavaScript must be enabled for the client.

Anyway plus and minuses aside - that's your decision - I will just present how to do it. The basic idea is to create a ashx handler called syndicate.ashx which should serve the javascript. The secret is that it creates regular HTML - and then wraps it inside a document.write call.

To try to describe it closer - let's say syndicate.ashx retrieves the data <h1>hello</h1> from your database/system. Now if we put it inside document.write like this

document.write('<h1>hello</h1>');

and return it, to the browser it will end up just like if we have written

directly inside the html page. So that's the technology behind it - lets implement it.

The sample code included (and described here) is really simple, we will send in a fake parameter (d=supplier) and we will then retrieve 10 records from the famous Northwind database (table supplier) and create a html table from it.

This below is from a class I call SyndicateData (placed in app_code) and it simply reads from the database as described above and creates <table><tr><td> tags.




    public static string GetHtmlToSyndicate(string sWhat)
    {
        System.Text.StringBuilder oBuilder = new System.Text.StringBuilder();

        string sConnString = ConfigurationManager.ConnectionStrings["NorthwindConn"].ConnectionString;   

        if (sWhat == "supplier")
        {
            oBuilder.Append("<table>");
            DataSet ds = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(
                sConnString,
                CommandType.Text,
                "select top 10 * from suppliers order by supplierid");
            
            //First create a metadata row...
            oBuilder.Append("<tr>");
            foreach (DataColumn oCol in ds.Tables[0].Columns)
            {
                oBuilder.Append("<td>");
                oBuilder.Append( oCol.ColumnName );
                oBuilder.Append("</td>");
            }
            oBuilder.Append("</tr>");

            foreach (DataRow row in ds.Tables[0].Rows)
            {
                //Create html for it
                oBuilder.Append("<tr>");

                foreach (DataColumn oCol in ds.Tables[0].Columns)
                {
                    oBuilder.Append("<td>");
                    oBuilder.Append(row[oCol.ColumnName]);
                    oBuilder.Append("</td>");
                }


                oBuilder.Append("</tr>");
            }
            oBuilder.Append("</table>");
        }

        return oBuilder.ToString();

    }

So, when calling GetHtmlToSyndicate("supplier") we will get a HTML table as a string. Great, now lets look at the syndicate.ashx handler code:



        public void ProcessRequest(HttpContext context)
        {
            //We are gonna syndicate some really useful stuff from
            //the famous Northwind database

            string sDataToRetrieve = "";
            if (context.Request["d"] != null)
                sDataToRetrieve = context.Request["d"];
            if (sDataToRetrieve.Length == 0)
                sDataToRetrieve = "supplier";

            string sHtml = SyndicateData.GetHtmlToSyndicate( sDataToRetrieve );

            context.Response.ContentType = "application/x-javascript";
            sHtml = SyndicateData.MakeJava( sHtml );
            string sReturn = "document.write('" + sHtml + "');";
            context.Response.Write(sReturn);
        }

As you can see we call the GetHtmlToSyndicate function and retrieves the html string into our sHtml variable - but we have some more things after that to discuss:

context.Response.ContentType = "application/x-javascript";
This sets the contenttype to javascript - we are generating a javascript, remember - a Javascript which will contain one single document.write() call

string sReturn = "document.write('" + sHtml + "');";
Creates the document.write call, in essence we are feeding document.write with the html code for the table.

context.Response.Write(sReturn);
And we write it back to the browser.

Last - I didn't mention the SyndicateData.MakeJava. Lets look at the code:



    public static string MakeJava(string strIn)
    {
        strIn = strIn.Replace("\r", "");
        strIn = strIn.Replace("\\", "\\\\");
        strIn = strIn.Replace("\'", "\\'");
        strIn = strIn.Replace("\r", "");
        strIn = strIn.Replace("\n", "\\n");
        strIn = strIn.Replace("\t", "\\t");
        strIn = strIn.Replace("<", "<'+'");
        return strIn;
    }

The truth is that the call I presented above as my first example
document.write('<h1>hello</h1>');
would not work...The '<' characters must be modified otherwise the JavaScript execution simply will fail.

So we need that function (MakeJava) to modify the html so it could be accepted as a valid Javascript string. So we replace '\' with '\\' etc.

Anyway, download the solution and try it, it's not that hard and this might make a good foundation to create some really useful datasyndication scenarios for you, I hope.

Please make sure you change the script path from default.aspx - it is hardwired for my local settings. Just change it to



<script src="syndicate.ashx?d=supplier"></script>

and it should work

Attachments

Syndicate.zip

ASPCode.net

Free asp.net and asp scripts

Syndicate your articles with JavaScript

Attachments