Beginners AJAX Tutorial Series Part 3

Posted on December 11, 2007 by Andy Bailey

Ajax Avenue Street Sign
This is part 3 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

In this part of the tutorial series we will open the object that you created in the last tutorial. So far, we have created an object to handle the data and made sure it is created in whatever browser you are using. Now, if we want to work with the created object, we need to open it…

Open The XMLHttpRequest Object

Opening the object prepares it for use to fetch the data from a server, the act of opening the object doesn’t actually fetch any data yet.

The FiddyP amazing analogy :- Imagine you created a page to collect a box of oranges from the local AJAX fruit shop. In the last tutorial, you created the box (object), now you need to open it so the AJAX oranges can fit inside…

The open comand: [square brackets] = optional arguments.

open("method", "url" [, asyncFlag[, "username"[, "password"]]])

Explanation:

  • method is the HTTP method to use when opening the connection. It can be ‘GET’, ‘POST’, ‘PUT’ or ‘HEAD’
  • url is the URL you want to download from
  • asyncFlag is a Boolean (one or the other) value used to indicate that the call is asynchronous. (no waiting for it to finish)
    This defaults to TRUE or 1 so is not needed unless you want to specify that the page waits for completion.
  • username is if you need a username to access the page identified by URL
  • password is for a password if it’s required.

Make sense? lol, maybe not. Here’s how it looks in use:

XMLHttpRequestObject.open("GET","oranges.txt");

We just add the open bit of code on to the end of the name of the object we created. Here’s an example page where we create a form in HTML and add a button for the user to click to open a remote file on the server with AJAX. Because AJAX uses CSS to change elements of the page, we need to create a <div> on the page to show the data we retrieve from the remote file. We’ll also have to create a function to take action when the button is clicked (we can’t do it the normal way with the <form> action because that would cause the page to reload).

Here’s the form and div html:
[html]

The oranges box will go here.

[/html]

You can see that the button has an ‘onclick’ event. That’s the javascript bit that calls the function when the button is clicked. The <div> has an id so the function will know where to put the collected data.

The javascript function is held in the <head> part of the document;
[javascript]function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(”GET”, dataSource);

obj.innerHTML=”Oranges Box Opened!”;
}
}[/javascript]

The function is called with the name of the data file we want (dataSource) and where to put the output (divID)
The first line checks if the XMLHttpRequestObject was created (we did that last time so you know it should get to this point)
If it finds that the object was created, it moves on to set the variable obj to the <div> we created by using getElementByID
Next, we use the open command on the object we created earlier, set the option to GET and point it to the external data file we specified when calling the function.
Once that is done, we can output a message to the <div> we assigned to the variable obj by using .innerHTML=

We’ll just put this function in place of the “hello world” message that we put in the last tutorial..

The whole code looks like this…
[html]

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

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(”GET”, dataSource);
obj.innerHTML=”Oranges Box Opened!”;
}
}

Fetching data with Ajax

The Oranges box will go here.

[/html]

You can copy the contents of the HTML shown above and save it as a HTML file, you can also create a file called oranges.txt and put it in the same directory as the HTML file. (it doesn’t matter what is in the text file as we wont be doing anything with it other than to open it). Open the HTML file in your browser and try it yourself or click here to see it in action if you can’t wait.

That’s it for this week, we’re still not doing anything major yet but, be happy! we have so far, created an object and opened it. YEY! come back for part 4 where we will prepare to download information from the file we opened. (oh, I bet you can’t wait!!)

beep beep w00t!

Filed under: Code, ajax | Tagged: , , , , , ,

« An outsourcing experiment.. Its cold thinking outside the box »