Very Basic AJAX

Ajax the Great

In Homer's Iliad he is described as of great stature, colossal frame, the tallest and strongest of all the Achaeans, second only to Achilles in skill-at-arms, and Diomedes to whom he lost a sparring competition as well as the 'bulwark of the Mycenaeans'. He was trained by the centaur Chiron (who had trained his father, Telamon, and Achilles' father Peleus), at the same time as Achilles. Apart from Achilles, Ajax is the most valuable warrior in Agamemnon's army (along with Diomedes), though he is not as cunning as Nestor, Diomedes, Idomeneus, or Odysseus. He commands his army wielding a huge shield made of seven cow-hides with a layer of bronze.

Ajax the Lesser

Ajax (Greek: Αἴας) was a Greek mythological hero, son of Oileus, the king of Locris. He was called the "lesser" or "Locrian" Ajax, to distinguish him from Ajax the Great, son of Telamon. He was the leader of the Locrian contingent during the Trojan War. He is a significant figure in Homer's Iliad and is also mentioned in the Odyssey. In Etruscan legend, he was known as Aivas Vilates.

Ajax cleanser (or Ajax brand cleanser with bleach) is a powdered household and industrial cleaner introduced by Colgate-Palmolive in 1947. Its slogan was "Stronger than dirt!", a reference to the mythical character Ajax. The slogan would be used again for its Ajax Laundry Detergent, when introduced in the early-1960s, with an armed knight riding a white horse.

Ajax

(shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications.

With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

AJAX breaks down into 3 basic pieces of code. If you look around at various AJAX engines you will find they vary greatly, but they all perform these three basic functions. But it's important to understand the basics to begin with.

Ultimately what you are doing is asking the server for information that will be used to update your web site. You typically want this information to show up based on a user event (like a click) or automatically.

We use something called the XMLHttpRequest() function to do all this. The XMLHttpRequest() is actually an (API) application program interface, that allows Javascript to transfer data from a server to a web page using the HTTP protocol. We're just having it happen after the page has already loaded - we're making a new request to the server for more data.

To do this we must go through 3 basic steps. All AJAX boils down to these steps.

1. Make the request2. Get the response from the server3. Use the data the server just sent you

Understanding the AJAX Engine:

function getRequest() { try{ req = new XMLHttpRequest(); } catch(err1){ try{ req = new ActiveXObject("Msxml2.XMLHTTP"); }catch(err2){try {req = new ActiveXObject("Microsoft.XMLHTTP");}catch(err3){req = false; }}}return req;}

This first function is used to make a request from the server. The good news is, once you have this function, you can just use it. You never have to alter it.

Basically you are creating a variable called req. This variable will hold a connection object to the server. The problem is this works differently in different browsers, so we have to use the try structure to find the right one that works for the browser we are using.

If successful, we have a request object waiting for us to do something with it.

Here is what it should look like when formatted correctly…

function getData(){ thereq = getRequest(); var url = this.href; thereq.onreadystatechange = useResponse; thereq.open("GET", url, true); thereq.send(null); return false;}

This function will change the most, depending on what you are doing with it. Essentially what is going on here is we are creating a variable called thereq, which is holding the connection object we created with the previous function. It is global in scope here because we will need it in the next function.

For demonstration purposes, this version of this function is going to be used when a link is clicked. So the next line sets a variable to hold the URL.

Then I am going to attach an event handler to my request object. When the state of that object changes, we will run the third function, which we have not looked at yet called useResponse.

Using GET we open the url. True means that this can happen asynchronously. Then we send the request and return false so that the link is not followed normally.

function useResponse(){if(thereq.readyState == 4){ if(thereq.status == 200){document.getElementById("contents").innerHTML = thereq.responseText;}}else {document.getElementById("contents").innerHTML = '<img src="loading.gif" />';}}

When this function runs, it checks the ready state of our request object. There are four possible states:

0 -- hasn't been called yet. 1 -- loading but not ready2 -- loading but not ready save for header and status3 -- in process 4 -- Completed - Finished with all operations.

We are looking for number 4.

Once readyState returns a 4 that means everything is ready to go. Then we have to check if the server returns a status of 200, which means the request was successful.

About server status: All the time we see 401 status when a file is not found. We never see the 200 status, but it is there, when the file is found and returned.

Once it returns a 200, we can actually make the change to our page.

That's it. Those are the basics of AJAX!