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.

AJAX TUTORIAL : Sending a Request to the Server

First of all, you should already know how to create XMLHttpRequest object. If you already know how to create it skip this. To make a new XMLHttpRequest object please follow my this blog content - Creating XMLHttpRequest object

Now that you have your shiny, new XMLHttpRequest object ready for use, the natural next step is to use it to submit a request to the server. This can be done in a number of ways, but the key aspect to remember is that you must validate for a proper response, and you must decide whether to use the GET or POST method to do so. It should be noted that if you are using Ajax to retrieve information from the server, the GET method is likely the way to go. If you are sending information to the server, POST is the best way to handle this. I’ll go into more depth with this later in the book, but for now, note that GET does not serve very well to send information due to its inherent size limitations.
  In order to make a request to the server, you need to confirm a few basic functionality based questions. First off, you need to decide what page (or script) you want to connect to, and then what area to load the page or script into. Consider the following function, which receives as arguments the page (or script) that you want to load and the div (or other object) that you want to load the content into.

function makerequest(serverPage, objID) {

  var obj = document.getElementById(objID);
  xmlhttp.open("GET", serverPage);

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      obj.innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}

Basically, the code here is taking in the HTML element ID and server page. It then attempts to open a connection to the server page using the open() method of the XMLHttpRequest object. If the readyState property returns a 4 (complete) code and the status property returns a 200 (OK) code, then you can load the response from the requested page (or script) into the innerHTML element of the passed-in object after you send the request.
  Basically, what is accomplished here is a means to create a new XMLHttpRequest object and then use it to fire a script or page and load it into the appropriate element on the page. Now you can begin thinking of new and exciting ways to use this extremely simple concept.

Creating AJAX Crossbrowser XMLHttpRequest Object Instance

Although at the time of this writing, Microsoft’s Internet Explorer continues to dominate the browser market, competitors such as Firefox have been making significant headway. Therefore, it is as important as ever to make sure your Ajax applications are crossbrowser compatible. One of the most important aspects of the Ajax functionality is that it can be deployed across browsers rather seamlessly, with only a small amount of work required to make it function across most browsers (the exception being rather old versions of the current browsers). Consider the following code snippet, which instantiates an instance of the XMLHttpRequest object, and works within any browser that supports XMLHttpRequest.

  
//Create a boolean variable to check for a 
//valid Internet Explorer instance.
 var xmlhttp = false;
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }  
 

Click below button to check your browser.

The XMLHttpRequest Object

Ajax is really just a concept used to describe the interaction of the client-side XMLHttpRequest object with server-based scripts. In order to make a request to the server through Ajax, an object must be created that can be used for different forms of functionality. It should be noted that the XMLHttpRequest object is both instantiated and handled a tad differently across the browser gamut. Of particular note is that Microsoft Internet Explorer creates the object as an ActiveX control, whereas browsers such as Firefox and Safari use a basic JavaScript object. This is rather crucial in running cross-browser code as it is imperative to be able to run Ajax in any type of browser configuration.

XMLHttpRequest Methods

Once an instance of the XMLHttpRequest object has been created, there are a number of methods available to the user. These methods are expanded upon in further detail in Table below. Depending on how you want to use the object, different methods may become more important than others.

Table: XMLHttpRequest Object Methods

Method	Description
abort()	Cancels the current request
getAllResponseHeaders()	Returns all HTTP headers as a String type variable
getResponseHeader()	Returns the value of the HTTP header specified in the method
open()	Specifies the different attributes necessary to make a connection to the server; allows you to make selections such as GET or POST (more on that later), whether to connect asynchronously, and which URL to connect to
setRequestHeader()	Adds a label/value pair to the header when sent
500 Internal Server Error	This code will be returned if the server that is being contacted has a problem.
send()	Sends the current request

XMLHttpRequest Properties

Of course, any object has a complete set of properties that can be used and manipulated in order for it work to its fullest. A complete list of the XMLHttpRequest object properties is presented in Table below. It is important to take note of these properties you will be making use of them as you move into the more advanced functionality of the object.

Table: XMLHttpRequest Object Properties

Property	Description
onreadystatechange	Cancels the current request
readyState	Contains the current state of the object (0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete)
responseText	Returns the response in string format
responseXML	Returns the response in proper XML format
status	Returns the status of the request in numerical format (regular page errors are returned, such as the number 404, which refers to a not found error)
statusText	Returns the status of the request, but in string format (e.g., a 404 error would return the string Not Found)

AJAX HTTP Request and Response

In order to understand exactly how Ajax concepts are put together, it is important to know how a web site processes a request and receives a response from a web server. The current standard that browsers use to acquire information from a web server is the HTTP (HyperText Transfer Protocol) method (currently at version HTTP/1.1). This is the means a web browser uses to send out a request from a web site and then receive a response from the web server that is currently in charge of returning the response.
HTTP requests work somewhat like e-mail. That is to say that when a request is sent, certain headers are passed along that allow the web server to know exactly what it is to be serving and how to handle the request. While most headers are optional, there is one header that is absolutely required (provided you want more than just the default page on the server): the host header. This header is crucial in that it lets the server know what to serve up.
Once a request has been received, the server then decides what response to return. There are many different response codes. Table below has a listing of some of the most common ones.

Table: Common HTTP Response Codes

Code	Description
200 OK	This response code is returned if the document or file in question is found and served correctly.
304 Not Modified	This response code is returned if a browser has indicated that it has a local, cached copy, and the server’s copy has not changed from this cached copy.
401 Unauthorized	This response code is generated if the request in question requires authorization to access the requested document.
403 Forbidden	This response code is returned if the requested document does not have proper permissions to be accessed by the requestor.
404 Not Found	This response code is sent back if the file that is attempting to be accessed could not be found (e.g., if it doesn’t exist).
500 Internal Server Error	This code will be returned if the server that is being contacted has a problem.
503 Service Unavailable	This response code is generated if the server is too overwhelmed to handle the request.

It should be noted that there are various forms of request methods available. A few of them, like GET and POST, will probably sound quite familiar. Table below lists the available request methods (although generally only the GET and POST methods are used).

Table: HTTP Request Methods

Method	Description
GET	The most common means of sending a request; simply requests a specific resource from the server
HEAD	Similar to a GET request, except that the response will come back without the response body; useful for retrieving headers
POST	Allows a request to send along user-submitted data (ideal for web-based forms)
PUT	Transfers a version of the file request in question
DELETE	Sends a request to remove the specified document
TRACE	Sends back a copy of the request in order to monitor its progress
OPTIONS	Returns a full list of available methods; useful for checking on what methods a server supports
CONNECT	A proxy-based request used for SSL tunneling

Now that you have a basic understanding of how a request is sent from a browser to a server and then has a response sent back, it will be simpler to understand how the XMLHttpRequest object works. It is actually quite similar, but operates in the background without the prerequisite page refresh.

REQUIREMENTS FOR AJAX

Before starting I would like to mention few words about the post, this content was collected form the book named "Beginning Ajax with PHP - From Novice to Professional". Basically according to the blog title, this is my notebook. I am not a professional developer, I am student and I am just sharing what I am learning with my fellow learners. If somehow this content is a cause of violation please ping, I will be glad to know if there is any problem.

AJAX REQUIREMENT

Since Ajax is based upon JavaScript technology, it goes without saying that JavaScript must be enabled in the user’s browser in order for it to work. That being said, most people do allow their browsers to use JavaScript, and it is not really that much of a security issue to have it in place. It must be noted, however, that the user does have the ability to effectively “disable” Ajax, so it is important to make sure, when programming an Ajax application, that other means are available to handle maneuvering through the web site; or alternatively, that the user of the web site is kept properly informed of what is necessary to operate the application.
  Ajax is a fairly widely supported concept across browsers, and can be invoked on Firefox (all available versions), Internet Explorer (4.0 and higher), Apple Safari (1.2 and higher), Konqueror, Netscape (7.1 and higher), and Opera (7.6 and higher). Therefore, most browsers across the widely used gamut have a means for handling Ajax and its respective technologies.
  At this point, the only real requirement for making use of Ajax in an efficient and productive manner is the creativity of going against what the standard has been telling us for years, and creating something truly revolutionary and functional.