Using AJAX to build dynamic asp pages.

This will show a way to get data on the site dynamically without the need to update the whole content of the page, updating just part of the website, in our example just a simple div on a asp page.First thing noted here: the page will be an asp page(not .NET) that will be hosted on IIS.

Creating the site`s design. In other words what I would like this thing to do.The site will be composed of 3 pages: test.asp, first.html and second.html .The pages first.html and second.html will just contain a div that we will eventually show on the test.asp page and will just contain the following text:

First.html

<div id="Content"> here is the first page content</div>

Second.html

<div id="Content"> here is the second page content</div>

Our main concern from now on will be the test.asp page. The first thing we will do is build the JavaScript that will handle our requests. This script can be anywhere on the page but usually it is either in the Head portion or after the end of the body. So, this is the JavaScript:

1 <script type="text/javascript">

2 function GetContent(Location,TheDiv)

{

3 ChangedDiv = TheDiv;

4 try

{

5 xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

}

6 catch(e)

{

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

}

8 xmlhttp.onreadystatechange = FinnishedRequest;

9 xmlhttp.open("GET", Location);

10 xmlhttp.send(null);

11 return true;

}

12 function FinnishedRequest()

{

13 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))

{

14 document.getElementById(ChangedDiv).innerHTML = xmlhttp.responseText;

}

}

15</script>

Our main function is GetContent(Location,TheDiv,event) (line 3). The function takes 3 parameters: Location – The location of the data that will be requested by the function. TheDiv – The div that will be changed every time the function is used.(in our case this will be ‘TestDiv’)

On line 3 we simply copy the TheDiv variable to a ChangecDiv variable that will be used further in the script.The try..catch statement the comes next is the part where we create the Xml Request object and in order for the script to work cross-browser this part of the script is harder to understand.xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");This is actually a compressed if statement that should be like this:

If (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

The script is like this because Microsoft did not natively implement the Xml Request object and just implemented it as an ActiveXObject while all the other browsers(that deserve attention) implement it natively. So what the if really does is this:

1. Test if the browser natively supports the XMLHttpRequest object (If (window.XMLHttpRequest) )
   
2. If this is true then create a new XMLHttpRequest object(native object)
   
3. Otherwise create a new ActiveXObject that is almost the same as a native object.
   

Lines 8,9 and 10 just handle the request itself, so it first(8) creates an event handler that will handle the onreadystatechange that occurs when the state of the request changes. Then(9) it creates the request itself using the GET method and the Location from where the date will be retrieved. The next thing to do(10) is to actually send the request that will be handled by the server.

When the request is sent our next job is to handle the data that will be retrieved by the request. Our handler will be FinnishedRequest() that will just check the state and the status of the request and will display the date in the given div. This is accomplished this way:

Line 13 – test the state of the request and if it is 4 then the request state is ok. Then test the status of the request that can be any status code known from the request object. We will only accept the request if the status if 200(OK).

Line 14 – we simply get the object that will be updated and write the received content in the innerHTML.

Next job: creating the buttons that will trigger the Xml Requests.

<input id="button1" type="button" value="First Content" onclick="return GetContent('first.html','TestDiv');" />

<input id="button1" type="button" value="Second Content" onclick="return GetContent('second.html','TestDiv');" />

<div ID="TestDiv">Initial text</div>

You can now test the script and start building some amazing things using this technology