Fetching Data with Ajax for Beginners

What is Ajax?

Ajax stand for Asynchronous Javascript and XML, this is pronounced A-Jax. Ajax has been around for around 10 years but did not really catch on till about 2005 when some of the bigger companies such as google first put it to the test. Ajax is used in a number of ways to communicate to the server behind the scene's using what we call the XMLHttpRequest, more about this later. Using the XMLHttpRequest we can fetch data from the server and display them on our page without any http requests (without a page refresh). This drastically decreases the user's wait until the data arrives. Using ajax you only have to change the data you need to change instead of reloading the whole page..

First the html

First we are going to set up the html for the page you will need in this tutorial for fetching data with ajax.

<html>
<head>
<title>Fetching Data with Ajax</title>
</head>
<body>
<h1>Fetching Data with Ajax</h1>
<form>
<input type="button" value="Fetch data" onclick="getData('http://yourwebserver.com/data.txt', 'targetDiv')">
</form>
<div id="targetDiv">
<p>This is the text you will be replacing using ajax</p>
</div>
</body>
</html>

As you can see above we have created the html page with a button, the value of the button is the text displayed on the button. We then used the onclick function which tells us that when the button is clicked we will be using the javascript "getData" method. This is then passed two different strings. First the location of the file we want to fetch , and second the place on the page we want to display it which in this example is called targetDiv. You can also see we have set up the targetDiv with some text inside it already. Everything inside this targetDiv will be replaced with the data.txt file we bring from the server. Dont Forget to change the location of the Data.txt file relevant to your server.

Data.txt

You should also create a txt file called data.txt which contains the data we intend to fetch using ajax. If you wish to call this file something else be sure to change it in the html code above. If the text file is in the same directory as the html file you can use a relative url and just use ('data.txt', 'targetDiv')

Javascript and the XMLHttpRequest

All the javascript we are going to use we will put in between the <head> </head> sections of our html page. We start our javascript by first telling the browser that we are about to use javascript like so.

<script type="text/javascript">This is where all our javascript will go</script>

Now we start by creating a XMLHttpRequest object and putting it inside a variable. We set the variable's value to false so we can check later if the object was created. We also have to check if the current user's browser is cabable of handling this code so we check by using an if statement as shown below. The if statement first checks to see if the XMLHttpRequest is available and then creates the XMLHttpRequestObject variable. Should the If statement fail we then check to see if the ActiveX object is available for us to use which is what internet explorer 5+ uses. If found we create the XMLHttpRequestObject variable with the ActiveXObject inside.

<script type="text/javascript">

var XMLHttpRequestObject = false;

if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

Next we will create a function to make sure that there is a valid object inside our XMLHttpRequestObject variable with another if statement. We then have access to our XMLHttpRequestObject variable and we can tell it to open the url we want (which was specified in the html) using the open method. We also put the divID inside the obj variable which is inside the getData function which we will use later to put the data onto the web page.

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

Here we put the onreadystatechange object into a function on the fly. This means the function has not got a name but will be called every time the XMLHttpRequestObject changes in some way. There are two properties we are watching in this object. The readyState and the status property. We are looking for a 4 in the readystate property which tells us our data is downloaded. The status property holds the normal HTTP status codes and we are looking for 200 which means everything went ok.

XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

Now we have the text and just have to dislpay it on our page so we use the obj variable we created earlyer in the getData function along with the innerHTML property to write to the page. We assign the XMLHttpRequestObject which is where the data is stored along with the responseText object so we know to treat the data as standart text. You could also use the responseXML if the data has been formatted as XML.

obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

Finally we just have to connect to the server and using the send method which sends a value of null we can then request the data using our XMLHttpRequest object that we have just set up in this tutorial.

XMLHttpRequestObject.send(null);

}
}
</script>

<noscript>Your Browser does not support Ajax or you may have JavaScript disabled</noscript>

One last bit of code you can see ive added is the noscript tags, This will show the message inside the tags to people who may have javascript disabled. Very few people now have browsers that do not support JavaScript, but some people do disabe javascript because annoying pop up's etc.


Links.


Web Hosting

Security

Spyware & Adware

Pop-up Blockers!