In one of my ASP.NET 1.1 projects, I had to update two different controls on a page through asynchronous AJAX calls at different time intervals.
As a sample to simulate this type of behavior, I decided to create a web page with two labels having Date/Time stamp. One of those labels should be updated every second and another one should be updated every 5 seconds.
In my sample I have the base page with two labels that calls HTML data from two other pages to populate the labels with the current Date/Time at different time intervals through asynchronous AJAX calls.
This article is an attempt to provide a good working sample of such an approach.
To implement an AJAX call, you actually need to have two web pages: the one that is visible to the end user and the second one that actually generated the required content for the first web page. The first page calls the second one through
Using the Code
In the sample below, we will have three web pages:
- default.aspx - The page that will be shown to the end user
- StreamPage1.aspx - This will provide the content to the section of default.aspx page that will be updated every second
- StreamPage2.aspx - This will provide the content to the section of default.aspx page that will be updated every 5 seconds.
In the provided sample, StreamPage1.aspx and StreamPage2.aspx web pages are the same and just have one label -
Label1 that shows the current date/time on
private void Page_Load(object sender, System.EventArgs e)
doCall2() and the
<DIV id='panel1'></DIV> and
<DIV id='panel2'></DIV> sections that will actually accept the HTML return by StreamPage1.aspx or StreamPage2.aspx through
Let's consider in more detail the major part of the project - AJAX.js.
client = new XMLHttpRequest();
else if (window.ActiveXObject)
client = new ActiveXObject("Microsoft.XMLHTTP");
url=url+'?d='+datenow client.open("GET", url);
client.onreadystatechange = callBack1;
if(client.readyState == 4 && client.status == 200)
doCall2() works the same, but it is called on the 5 seconds interval:
Points of Interest
Using the above technique, it is possible to update various parts of the page with different data asynchronously. This can be useful when working with data that should be refreshed to the user not only when the user posts back the page, but rather at certain time intervals.