As we all know AJAX is rocking the Web World all around, just I had a thought to developer a simple AJAX website which has got possible links to navigate to the respective page. To built this simple AJAX website I have used Nifty Cube Layouts for better look and feel, as we all know Nifty Cubes are rocking with their simple and robust layouts by providing us excellent features which are developed using simple JavaScript and CSS Techniques. After going through this article you might know how we can create a simple awesome AJAX website.

If you see this layout, the sections are rendered in rounded corners as Nifty Cubes are famous for Rounded Corners without images.

Basically the one which I have developed is a static website using some simple concepts of AJAX, this will depicts the concepts of AJAX and those who are new to AJAX can learn some simple concepts of AJAX. In this article, if you are interested can download the code and can learn some tips.

You can download the entire code here - download , and if you want to see live preview - here is the link to visit - SimpleAJAXWebsite

Steps to develop simple AJAX Website:

1. After downloading, just open index.html page in to your favorite html editors, once you have done that, if you can see some styles has been used in that page like below screen shot, those are related to Nifty Cubes (This has been used for Rounded Corners). And below <styles> some JavaScript stuff is used for Rounded Corners.

<script type="text/javascript" src="js/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#content,div#nav","same-height");
}
</script>

2. After the above script, you can see a <script> tag in which we are calling one external JavaScript file (ajax.js )

<script type="text/javascript" src="js/ajax.js" language="JavaScript"></script>

3. After the above <script> tag, actual body content starts here, where in which you can see some tags and unordered lists used in the respective content code.

4. If you watch carefully,  for menu we are using <ul> unordered lists like below

<ul>
<li onClick="activeLink('home.html')"><a href="javascript:void(0);" id="home">Home</a></li>
<li onClick="activeLink('about.html')"><a href="javascript:void(0);" id="about">About</a></li>
<li onClick="activeLink('downloads.html')"><a href="javascript:void(0);" id="downloads">Download</a></li>
<li onClick="activeLink('webresources.html')"><a href="javascript:void(0);" id="webresources">Web Resources</a></li>
<li onClick="activeLink('techvideobytes.html')"><a href="javascript:void(0);" id="techvideobytes">Tech Video Bytes</a></li>
</ul>

For each link we are calling one JavaScript function like “activeLink()”, when user clicks on the respective links provided this link loads the respective page in the container provided. That is, here container is the “pagecontent”. Search for “pagecontent” in the respective file you can see this is as a div “Id”.

5. Now just open “ajax.js ” file, and search for the function activeLink(linkId) , here “linkId ” is the parameter we are passing to this function. This will holds the respective page file name like activeLink(’about.html’) , here we are passing about.html as a parameter to the function activeLink. From there we are passing this parameter to another function named “loadPage() ”.

function activeLink(linkId)
{
loadPage(linkId, 'pagecontent', '<p><img src=\"images/loading.gif\" /> Content is loading, Please Wait...</p>', '<p>Error in Loading page <img src=\"images/error_caution.png\" /></p>');
}

6. loadPage() has got more parameters like pageURL , divElementId , loadingMessage , pageErrorMessage .

loadPage(pageUrl, divElementId, loadinglMessage, pageErrorMessage)

Description of  the above parameters are depicted below:

pageURL – this is the parameter where in which we are passing the respective page URL that is respective filename, here we are passing respective file names as “home.html”, “about.html”, “downloads.html”, “webresources.html”, “techvideobytes.html”.

divElementId – here we are giving the container id, that is when user clicks on the respective links the respective page will be called into that container.

loadingMessage – this parameter is used for showing the user a message while loading the page.

pageErrorMessage – this parameter is used when there is error in loading a respective page .

7. In loadPage() function we are creating respective HTTP request objects for different browsers.

8. Once the request is success then we are calling one function named “responsefromServer() ” where in which we are sending two parameters one is “divElementId” and the other is “pageErrorMessage”.

9. Once the request is success, it will load the page into the respective container using open function with get method.

var req;
function loadPage(pageUrl, divElementId, loadinglMessage, pageErrorMessage) {
document.getElementById(divElementId).innerHTML = loadinglMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responsefromServer(divElementId, pageErrorMessage);};
req.open("GET",pageUrl,true);
req.send(null);
}function responsefromServer(divElementId, pageErrorMessage) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(divElementId).innerHTML = output;
} else {
document.getElementById(divElementId).innerHTML = pageErrorMessage+"\n"+output;
}
}
}

If you want to know more information regarding the concepts of AJAX, and need to know more about the HTTP request objects then need to visit this page once - Ajax: A New Approach to Web Applications , this is a very powerful page where you can learn the actual concept of AJAX and at the bottom of the page you can see some Question and Answers section, where you can get most of the Answers for your questions.

Hope the above steps help us a lot in developing robust web applications using AJAX.

Download and Live Preview:
You can download the entire code here - download , and if you want to see live preview - here is the link to visit - SimpleAJAXWebsite

You may like to read this:

1. Snippet Code for Simple Ajax Tabs with cool CSS Styles

2. Using XMLHttpRequest, reading XML data (Adobe AIR Application)