Ajax Features Needed to Build Active Client Pages

This is the second part of my four-part series, Active Client Pages – Ajax Approach. In this part of the series, we continue our discussion of the Ajax features we will need to use with ACP, and then we look at the principles of the Ajax approach.

The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

Ajax Browsers

The keystone of AJAX is the XMLHttpRequest object. Different browsers use different methods to create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

All Ajax requests in JavaScript begin by making a call to the XMLHttpRequest constructor function:

new XMLHttpRequest() //IE7, Firefox, Safari etc;

new ActiveXObject("Msxml2.XMLHTTP") //newer versions of IE5+;

new ActiveXObject("Microsoft.XMLHTTP") //older versions of IE5+;

new XDomainRequest() //IE8+ only. A more "secure", versatile alternative to IE7′s XMLHttpRequest() object.

In IE6 and below, the XMLHttpRequest() is not supported, but instead relies on the proprietary ActiveXObject for Ajax requests. To create this object, and deal with different browsers, we are going to use a "try and catch" statement. This is a typical way to address the problem (the explanation is given below):


<html>

<body>

<script type="text/javascript">function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

}

}

}

}

</script>

</body>

</html>


Explanation

In this illustration, the function you write that handles Ajax request is called ajaxFunction.

First we need to create a variable xmlHttp to hold the XMLHttpRequest object in the function.

Then we try to create the object with XMLHttp=new XMLHttpRequest(). This is for Firefox, Opera, and Safari browsers. If that fails, we try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"), which is for Internet Explorer 6.0+. If that also fails, we try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"), which is for Internet Explorer 5.5+.

If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn’t support AJAX.

Note: The browser-specific code above is long and quite complex. However, you can use this code every time you need to create an XMLHttpRequest object. The code above is compatible with all of the popular browsers: Internet Explorer, Opera, Firefox, and Safari.

{mospagebreak title=More About the XMLHttpRequest Object}

Before sending data to the server, we have to explain four important properties of the XMLHttpRequest object.

The onreadystatechange Property

After a request to the server, we need a function that can receive the data that is returned by the server. The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:


xmlHttp.onreadystatechange=function()

{

//This function processes the response from the server

}


The readyState Property

The readyState property holds the status of the server’s response. Each time the readyState changes, the onreadystatechange function will be executed.

Here are the possible values for the readyState property:

 State

 Description

 0

The request is not initialized.

 1

The request has been set up.

 2

The request has been sent up. 

 3

The request is in process.

 4

The request is complete.

The status Property

This property returns the status code of the request (integer), for example, 404 for a failed request, 200 for a successful one, etc. When running your Ajax script online to test for a fully complete and successful Ajax request, look for a readyState value of 4 plus a status code of 200.

We are going to add two if-statements to the onreadystatechange function to test whether our response is complete (this means that we can get our data) or if an error occurred:


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

// Receive the data from the server and do whatever.

}

else

alert(There is a problem with the data at the server);

}

}


In this way you check whether the response is complete. The response may be complete, but there is an error. So inside the block, you check whether the request was successful. If it was not, you give a generalized error message concerning the page as I have given.

Unfortunately, “xmlHttp.status” may not work with your browser. If that is the case, you will not use this if-else condition. You will still need to receive the data here. The problem now is, how do you detect if an error has occurred?

Luckily the XMLHttpRequest has an abort() method and the DOM has a timer function. After sending the request, you can set the timer function that will abort the request if the readyState property does not indicate 4, after some expected time. For simplicity I will assume that the readyState property will indicate 4 within a reasonable amount of time and I will not address the error and timing issue anymore in this series.

{mospagebreak title=The responseText Property}

The data sent back from the server can be retrieved with the responseText property of the XMLHttpRequest object. This is a sample code.


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

Some HTML Value or JavaScript Property = xmlHttp.responseText;

//You may call another function to do initialization.

}

}


Sending a Request to the Server

To send off a request to the server, we use the open() method and the send() method.

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and the server executable file (e.g. sendText.pl that is called by the request) are in the same directory, the code would be:


xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);


The send method sends the request to the server with a "data" parameter specifying the body of the request. For "GET" requests, this parameter should be a value of null, while for "POST" requests, it should be the parameters of the request. This method typically should always be called last.

Now we must decide when the AJAX function should be executed. This is executed normally when an event is triggered. The following is a sample code that illustrates everything I have said about Ajax.

There is an HTML button. When you click it some text will be sent from the server. The value of the onclick attribute is “ajaxFunction();”. When this function is called, it declares the XMLHttpRequest Object (variable). It performs the trials to assign the object variable. Next it stores the function that will process the response to onreadystatechange property of the object.

This function is not executed at this point. It is executed only when the status of the readyState property changes. So it can only be executed after the open() and send() methods of the object have been called. Next, in the ajaxFunction() function, the open() and send() methods are called.


<html>

<head>

<script type="text/javascript">

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

}

}

}


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.getElementById(‘IDDIV’).innerHTML = xmlHttp.responseText;

}

}

xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);

}

</script>

</head>

<body>

<div id="IDDIV">

</div>

<button type="button" onclick="ajaxFunction();">Obtain Data from Server</button>

</body>

</html>


{mospagebreak title=Principles of the Ajax Approach}

Design your first page as you would normally for web design or web development. Let it not be long, so that it will download reasonably fast. This is your master page; it should not have a frameset. It has the store that keeps information necessary for the different pages.

All of the HTML contents of the first page are in a DIV element. The contents of the pages after the first one (second, third, fourth etc.) are downloaded in advance as texts (strings). When you want a new page, the content of the DIV element is replaced by one of the downloaded strings. When a string is downloaded, it is stored in the store.

The store is made up of JavaScript variables and/or JavaScript object properties and/or JavaScript arrays. The store should be in the script of the head element of the master page. When the page is downloaded, the size of the store should be small. The store grows as you download more data.

The Ajax script or function for downloading data (page contents) should be at the bottom of the page; that is, at the bottom of the DIV element. Only the first page comes directly from the server; the rest of the pages are downloaded as text in advance and kept in the store. When a page is needed, your JavaScript code simply replaces the content of the DIV element with the corresponding text from the store. The content of each page can include Ajax download functions. Your script can modify the text before displaying it.

The script in the HEAD element of the master page should be minimal. If you need more scripts, you can download them by putting an external script tag at the bottom of a page (the DIV) as follows:


<script src="scriptCode.js"></script>


The problem here is, when you replace the content of the DIV element, the script that was there will disappear, but you may need it again. Fortunately, there is a way you can add JavaScript statements, functions and objects to the script in the HEAD element by using the JavaScript top level function eval(); this is the subject of a different article, which will explain how you can use Ajax to download text, which will be converted to script.

With the Ajax Approach, calculations and analysis are done at the client by the overall JavaScript. This lets you design your master page in such a way that the content is rendered as it arrives at the browser.


I have given you the principles of the Ajax Approach. Let us stop here for now. We continue in the next part of the series.

Google+ Comments

Google+ Comments