PSYCHOCODES

Simple AJAX based Navigation System

AJAX is catching up the fire in today's world because of its ability to provide versatility and speed to modern world's web application, In this article, we are going to build an AJAX-based navigation system but before that we are going to look at some basic terms which we are going to use in our code.

As we are working with AJAX it means we are directly going to use JavaScript as our main weapon because AJAX is just a method to use the JavaScript's XMLHttpRequest object to interact with the server so we recommend you to learn some basic Javascript before you go through this tutorial.

 JavaScript for beginners tutorials -  JavaScript tutorials for Beginners

Some important terms

  • onreadystatechange Used as an event handler for events that trigger upon the state change.
  • readyState Contains the current state of the object.
    0: uninitialised
    1: loading
    2: loaded
    3: interactive
    4: complete
  • responseText Return the response in string format.

We are going to create the following files

  • ajax.js
  • style.css
  • index.html
  • content.html
  • content1.html
  • content2.html

let's start writing the code

try{
	var xmlhttp = new XMLHttpRequest();
}
catch(e){
	alert("Not supported");
}
function getRequest(page,pageid,statusid){
	var id = document.getElementById(pageid);
	var status = document.getElementById(statusid);
	xmlhttp.open("GET",page);
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //if state is 4 and serverstatus is 200 or ok
			id.innerHTML = xmlhttp.responseText;
			status.innerHTML = xmlhttp.statusText;
		}
		
	}
	xmlhttp.send(null);
}

code for style.css

body{
	text-align:center;
}
.wrapper{
	max-width:700px;
	width:100%;
	padding:10px;
	border:1px solid black;
	margin:auto;
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Ajax Navigation</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="getRequest('content.html','home');">
<div class="wrapper">
<a href="#" onclick="getRequest('content.html','home','status');">Home</a> | <a href="#" onclick="getRequest('content1.html','home','status');">Page1</a> | <a href="#" onclick="getRequest('content2.html','home','status')">page2</a>
<div id="home"></div>
<div id="status"></div>
</div>
</body>
</html>

<!---code for content.html -->
<h1>Home Page</h1>
<p>This is a AJAX web page having a simple AJAX based Navigation</p>

<!--- code for content1.html -->
<h1>About page-1</h1>
<p>This is a new page and the page is loaded using AJAX</p>

<!-- code for content2.html -->
<h1>About page-2</h1>
<p>This is a new page and the page is loaded using AJAX</p>

Thank you for reading.

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.

Share your thoughts