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:
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:
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
Leave a Reply