AJAX What is it? How to AJAX Pt. 2

In the last article, I explained what AJAX is and showed you how to dynamically change the text in DIV’s and SPAN’s without reloading the page. In this article I’ll show you how to place text from your server in DIV’s and SPAN’s, without reloading the page.

All About Events

Most of the time you will bring data onto your web page when an event has been triggered. So I thought it would make sense to list all of the events you can monitor:

• onabort: Event thrown when a user aborts an action
• onblur: Event thrown when an element on your page loses focus. Ex. If your cursor is in a text input box and then you click outside of that input box, an onblur event occurs.
• onchange: When the visitor changes a value on the page, this event is thrown.
• onclick: Event thrown when an element is clicked
• ondblclick: Event thrown when the visitor double clicks an element.
• ondragdrop: Event thrown when an element is dragged and dropped
• onerror: Event thrown when a JavaScript error occurs
• onfocus: Event thrown when an element gains focus. Ex. You click in a text input box.
• onkeydown: Event thrown when a key is pressed on the keyboard
• onkeypress: Event thrown when the user both presses down and then up on a key on the keyboard.
• onkeyup: Event thrown when the user releases a key on the keyboard.
• onload: Event thrown when the web page loads.
• onmousedown: Event thrown when a mouse button is pressed down.
• onmousemove: Event thrown when the mouse is moved.
• onmouseout: Event thrown when the user moves their cursor off an element on the page.
• onmouseover: Event thrown when the user moves their cursor over an element
• onmouseup: Event thrown when the user releases the mouse button
• onreset: Event thrown when the user clicks a reset button
• onresize: Event thrown when the user resizes an element or the whole web page
• onsubmit: Occurs when the user clicks on a submit button
• onunload: Event triggered when a user moves to another page

What is XMLHttpRequest

XMLHttpRequest, is a object in the OOP sense, that you will use to communicate with the server without reloading the page. You can create this object with the following lines of code:

var XMLHttpRequestObject = false;

XMLHttpRequestObject = new XMLHttpRequest();

This works in every browser instead of Internet Explorer of course. With Internet Explorer you must replace these 2 lines of code with:

var XMLHttpRequestObject = false;

XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);

Creating an XMLHttpRequest Object

Because Microsoft has to be difficult, you have to check what browser your AJAX (JavaScript) code is running in. So the code will look like this with the additional checks:

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {

XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);

}

These if statements are checking whether XMLHttpRequest is available for use. If it is we use it, meaning our code is running in a none Microsoft Browser. If that object is not available, we know we are running code in Internet Explorer, and instead use the Microsoft.XMLHTTP object.

Both objects have almost identical methods, so this will pretty much end this portion of the browser wars.

Getting Text from the Server

After you create the object, you can use all of it’s defined functions and access it’s built in variables. If you wanted to pull some information over from the server you would use this objects function open(), like this:

XMLHttpRequestObject.open(“GET”, locationOfData);

Yes the GET option is the same we refer to when passing data with HTML. With AJAX, you will normally use the option GET, to receive information and POST, when you want to send information.

Let’s now create a function that will accept the HTTP Method for opening a connection and the location of the text.

Is your Text Ready to Display

The problem with writing directly to the screen with text from the server, is when do you know you have all the text to display? XMLHttpRequest has a variable named readystate. This variable can alert you every time it changes. It has the following possible values:

0: Means it hasn’t been set

1: Means that it is loading data

2: Means all the data has been loaded in the object, but it is not ready for you to use

3: Means some of the data has been received by your script

4: Means everything has been loaded and is ready for use.

The XMLHttpRequest Object also has another variable named status. Will inform you on the status of the download itself. It has the following potential values:

• 200: OK
• 201: Created
• 204: No Content
• 205: Reset Content
• 206: Partial Content
• 400: Bad Request
• 401: Unauthorized
• 403: Forbidden
• 404: Not Found
• 405: Method Not Allowed
• 406: Not Acceptable
• 407: Proxy Authentication Required
• 408: Request Timeout
• 411: Length Required
• 413: Requested Entity Too Large
• 414: Requested URL to Long
• 415: Unsupported Media Type
• 500: Internal Server Error
• 501: Not Implemented
• 502: Bad Gateway
• 503: Service Unavailable
• 504: Gateway Timeout
• 505: HTTP Version Not Supported

We want to check that XMLHttpRequest.readystate is equal to 4 and XMLHttpRequest.status equals 200. If both of those values are set, we know we can write the text to the screen. This is the code needed for the function to work:

function getText(locationOfData, id)

{

getText() is being passed the location of the text and the id name for the node we are going to be inputing the text.

if(XMLHttpRequestObject) {

var node = document.getElementById(id);

Above I gave the object XMLHttpRequestObject the value of false above. If it hasn’t been changed, meaning it hasn’t been assigned a new value, it would still have the value false.

Then I’m assigning a reference to the node we will be writing text into.

XMLHttpRequestObject.open(“GET”, locationOfData);

I’m requesting the text be sent to the script from the server.

XMLHttpRequestObject.onreadystatechange = function()

{

if ((XMLHttpRequest.readystate == 4) && (XMLHttpRequest.status == 200)) {

This function checks if all of the information has been sent, without errors and is ready to print.

while (node.firstChild)
node.removeChild(node.firstChild);

node.appendChild(document.createTextNode(newText));

}

}

This code writes the new text into the node on screen, without reloading the web page. If it doesn’t make sense see my JavaScript Scripting Tutorial.

XMLHttpRequestObject.send(null);

}

}

The send function connects to the server to receive the response and download the text.

That’s All Folks

Now you know how to update a page with text in your script and text on the server. I’ll see you next time for more on what AJAX can do for you.

– Think Tank