Using AJAX as Navigational Tool [ Basic Ajax Example ]

Following example shows a generic web page that loads in content via Ajax to display different information based on the link that has been clicked.
  Before you start, first you should go through these two content to understand how to use Ajax to create a XMLHttpRequest object and how to send a request to the server.
1 - Creating AJAX XMLHttpRequest Object
2 - Sending a Request to the Server

The home page or the base page where we will show our sub-pages using the magic of AJAX:

Place it inside your 'head' tag

Place inside the body tag:

P.S.: Please note that you have to call the function makerequest() once when the page is loading -

  
It's My Ajax Page
  
            Home 
         | 
  
            Page 2
         | 
  
            Page 3
         | 
  
            Page 4
        
        
  

Make other sub-pages in the same folder like following -

content1.html

Page 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 enim ad minimveniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

content2.html

Page 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 enim ad minimveniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

content3.html

Page 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 enim ad minimveniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

content4.html

Page 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
 enim ad minimveniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse cillum dolore eu
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum.

Note: If you are working on you local machine, you have install and enable your local apache server, and you should run the page using localhost. There are so many server application pack out there, most popular for windows - XAMPP, WAMP, for mac MAMP. Use whichever you comfort with.
Check out the demo from here

As you can see, by making use of Ajax, you can create a fully functional, Ajax navigation–driven site in a manner of minutes. You include the JavaScript required to process the links into <script> tags in the head, and can then make use of the makerequest() function at any time to send a server-side request to the web server without refreshing the page. You can call the makerequest() function on any event (you are using onclick() here) to load content into the respective object that is passed to the function.