Practical usage of AJAX on this website

I found a great CSS dropdown menu on a website http://www.cssplay.co.uk/menus/drop_variation.html

It allows you to include the dropdown menu as one you can see on the top of this website. One great advantage is that it's in a plain HTML with the usage of CSS styling and therefore no javascript coding is required.

Ok, so I made a module that generates the set of HTML links from the Joomla CMS which are then transformed into this nice menu.
Every page of my website usually contains less than 100 links (internal+external) because I want the pages to be the search engine friendly.  But using this feature the number of links on every webpage increased to 200 or so.

Then I got the idea. Why not to use the AJAX to modify the webpage when it's loaded ?

The principle is simple:

• The page loads with the empty <div id="menu"> </div> 

• After the page is loaded, there is a javascript executed that calls the menu.php serverside script and modifies the DOM (document object model) of this webpage - the content of empty <div> element.
• When you open the http://www.codegravity.com/menu.php manually, you can see what the content of the <div> element would be like

This way I can have the page optimized for the search engines and still use more than 100 links on every webpage. (Search engine bots usualy index a webpage as a single HTML and don't care about the javascript calls. They see your webpage as when you open it in a LYNX or another simple HTML text browser).

A CSS menu loaded by the AJAX approach

Here's the HTML code:

<div class="menu" id='ajaxmenu'></div> 
<!-- the div element where we want the menu to be loaded -->

<script> 

function execute() {

if (xmlHttp.readyState == 4) {

	if 	(xmlHttp.status == 200) { 
		//when there is the HTTP response code 200 (what means OK) 

		document.getElementById("ajaxmenu").innerHTML = xmlHttp.responseText;
			//this is the main "trick", we are searching for the "ajaxmenu" element  
			//and filling up it's content through the innerHTML function

	}

}

}

// this is a non-unified way how to obtain a XMLHttpRequest object 
// (the IE's got it's own way to do it) 

if (window.ActiveXObject) {

	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // for internet explorer

}

else if (window.XMLHttpRequest) {

	xmlHttp = new XMLHttpRequest(); // other browsers

}

xmlHttp.open("GET","http://www.codegravity.com/menu.php"); 
//here we are making a XMLHttpRequest to fetch the result of the 
//serverside menu.php script

xmlHttp.onreadystatechange = execute;  
//when it's completed, we call the function execute you can see above 

xmlHttp.send(null);

</script>

This approach is nothing new, the aim was just to show a simple example and to share my experiences with you.

I hope you enjoyed it and feel free to comment!

Thank you