Part 1 of AJAX Demystified we discussed what is AJAX and gave a high level overview of how it all works.
Part 2 we are going to get into more detail and actually show you some examples of how it all works.
No more reloading the page!
Let’s say we have a site that contains a list of all clients. We may have a search page that uses AJAX to select the clients from the list.
When the company name is entered we don’t want to reload the entire web page again. Instead we will make an AJAX call to retrieve the clients that match the search criteria. When the request comes back from the server, instead of reloading the page again, we only render the results under the search input area.
The way this all works is by updating the content of placed div tags within the HTML. We’ll get into the details in a second.
This image shows before the call is made and where we have the div tag placed
And after the callback is made back to the page:
AJAX: Do it yourself (DIY)
OK enough you say. Show us how to make an AJAX Call. That sounds fair. You could use one of the frameworks available, but I think to truly understand AJAX, you need to at least understand how to do it yourself without using a framework. Once you feel comfortable with this, I do suggest using one of the frameworks because the “heavy lifting” will be handled for you. By understanding the core of AJAX, I believe you will be less likely to make big mistakes with an AJAX framework.
There are a couple of things that I won’t cover while explaining how to use AJAX:
HTML: If you don’t understand the basics of HTML, this will be beyond your expertise. I would recommend getting a good handle of HTML first. I would recommend the Visual Start Guide.
JavaScript: I don’t expect you to be an expert, but you need to know some of the basics of the scripting language.
Document Object Model (DOM): I won’t go much into the DOM, but I will be using some of the DOM to find Elements of the HTML.
Server side Development. The example will use PHP for the server side. I will try to explain what is going on the back end. It’s not necessary to understand PHP, but if you’ve done any server side development, you’ll probably understand what is going on.
The Request Object (XMLHTTPRequest) – The core object of AJAX
Most modern browsers have the ability to do AJAX development through the request object. Without the request object we’re not able to do AJAX development. This request object is responsible for the calls between the browser and the server.
On the other hand I wish life was that simple. The JavaScript function will need to determine which version to use. Internet Explorer 6 requires the ActiveX request object, but the other browsers don’t understand ActiveX, so they require making use of XMLHTTPRequest object. The good news is that JavaScript has a nice feature: the try…catch exception handling commands. If the browser fails trying to create one, we can try initializing the request object with another call.
NOTE:
The actual name of the object is XMLHTTPRequest. To keep it simple I am going to call it the request object. This refers to the XMLHTTPRequest object in FireFox, Safari and Opera. If the browser is Microsoft’s Internet Explorer, then I am referring to the Msxml2.XMLHTTP or the Microsoft.XMLHTTP ActiveX Controls.
For this example let’s start by inserting some JavaScript into a normal HTML page. We’re going to create a JavaScript function called initRequest(). Add this in the HEAD Tag of the HTML
<head>
<title>My First AJAX App</title>
<script>
var requestObj = null;
function initRequest ()
{
try
{
requestObj = new XMLHttpRequest();
}
catch (failedNoramlRequest)
{
try
{
requestObj = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (tryotherObject)
{
try
{
requestObj = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (failed)
{
requestObj = null;
}
}
}
if (requestObj == null)
alert(“You’re browser does not support AJAX!”);
}
</script>
</head>
The first variable that is created is the request object outside of the function. This is a global variable. It’s global because we’ll be using the same object when receiving data back from the server in a different function. The function needs to initialize the request object. The correct XMLHttpRequest object needs to be initialized based on the user’s browser they are using.
If an exception is thrown, the code checks to see if it can use the Msxml2.XMLHTTP ActiveX control from Microsoft. (This object only works on Microsoft browsers running on Microsoft Windows) If that fails, then our last resort is to try the older Microsoft.XMLHTTP object.
Finally if the last exception is thrown, the user is out of luck! On the other hand this will be VERY unlikely. Their browser would have been several years old and probably could not use most of the websites created today. One solution you could offer is the ability to redirect them to the Molliza or Microsoft website to download the latest browser.
Calling the Request Object
Now that the function has created the Request object, it’s time to try it out and make a request to the server. Let’s start by creating a new JavaScript function that we will call from a hyperlink. Add the following code after the initRequest() function: (make sure it’s still within the script tag of the HTML Page.)
function getServerDateTime()
{
initRequest();
if (requestObj != null)
{
var sUrl = “ajax_getServerDateTime.php”;
requestObj.open(“GET”,sUrl,true);
requestObj.onreadystatechange = updateDateTime;
requestObj.send(null);
}
}
The first line in the function takes care of creating the new Request object.
If the request object is not null then the request object can be used. Next a variable is created that contains the URL string. The URL must point to the server page that will be receiving the request from the browser.
This concludes Part 2.
Part 3 wraps up our series on Ajax Demystified.
2 comments ↓
[...] AJAX Demystified Part 2 of 3 → [...]
[...] Part 2 we discussed in more detail on how to use the xmlhttprequest object and how to dynamically load content onto the web page without the round trip. Part 3 we’ll get into some more detail that will give you a really good understanding on AJAX and its plumbing. [...]
Leave a Comment