Search Engine Optimizable Friendly Ajax (SOFA)

One of the problems with pure ajax pages is the its not very search engine friendly. Since ajax is mainly DOM manipulation its imposible for th search engine to spot the changes in the page.
One of the ways to overcome this is to make the pages 'the old way' the manipulate the DOM to use ajax after the page has loaded. Search Engine Optimizable Friendly Ajax (SOFA) is an attempt to do just that.

The first thing to do is to add jQuery to your project.
Actually this should allways be the first thing you do no matter what webpage you wan't to make.
Then we add a 'scr' and 'dest' attribute to the the <a tag we want to use the SOFA on. The src attribute is the element on the page where <a points we wan't to use.
The dest attribute is the destination element on the current page. Both the src and dest attributes are in jQuery selector format.
What we wan't is to change the DOM for all <a tags so that the href don't redirect the user to another page.
This is done by the jQuery selectors magic.

Full source download
function ApplySOFA(domnode)
{
    var href;
    var $a;
    $(domnode).find("a").each(function(index)
    {
        $a = $(this);
        if ($a.attr("dest") == null || $a.attr("src") == null)
            return;
        href = $a.attr("href");

        $a.attr("href", "javascript:void(0)");
        $a.attr("hrefbak", href);
        $a.click(function()
        {
            var dest = $(this).attr("dest");
            var src = $(this).attr("src");
            var href = $(this).attr("hrefbak");
            if (src == null || dest == null)
            {
                window.location = href;
            }
            else
            {
                $.post(href, "",
                function(data)
                {
                    SetHtml(data, dest, src);
                },
                "html"
                );
            }
        });
    });
}

What this does is set javascript:void(0) to the href and add an onclick event where the href is used in a jQuery post.
The onclick postback goes to the SetHtml function where the src will be added to the dest 

		function SetHtml(data, dest, src)
		{
			var $dest = $(dest);
			var $data = $(data);
			
			//Apply SOFA to the src data
			ApplySOFA($data);

			$dest.html("");
			$dest.append($(src, $data));
		}

Ain't much magic in this one.
When this is implemented the DOM changes will make the page work like a pure ajax page, but if we view the source we will still see the <a href tags redirecting to the pages, thus make the search engines able to index the pages.