If you’ve been reading the series of articles about the Ajax approach to building Web applications, here’s another! In this article, I’m going to show you how to poll the Web server at regular intervals with the XMLHttpRequest object. In other words, we’ll use an Ajax approach to request information from the server and load it into a Web interface. Then we’ll refresh the data regularly, so you can see updates.
If you haven’t been following the articles, Ajax is a Web 2.0 approach to building Web applications. It allows you to load data from the server asynchronously by using JavaScript and the XMLHttpRequest object. Asynchronous means that the loading takes place in the background so that the user can carry on working with the Web application.
In this tutorial, we’ll load a simple RSS 2.0 feed containing useful links into a Web page. We’ll update the list regularly using the setInterval command in JavaScript. We’ll also address the topic of multi-dimensional arrays in JavaScript. If you want to find out more about the RSS 2.0 specification and the XML tags that are used, check out http://www.rssboard.org/rss-specification.
In a real world application, we’d probably load data from an RSS feed locatedatan external Web site. However, for simplicity we’ll load it from a local XML file. Because of the Ajax security sandbox, you’d need to use a proxy file written in a server-side language to create a local copy of any externally located feeds. That’s a little beyond the scope of today’s article but you can find lots of articles on the Web about this topic.
If we wanted to create a Web 1.0 version of this application, we’d have to rely on a Meta refresh directive to reload the page at regular intervals. If the feed was included in a page along with other information, the user would have to wait until the entire page reloaded to see the other content. For example, if they were filling in a form, they could easily lose their place and have to start again. The Web 2.0 approach allows the user to reload only the area containing the links, without refreshing the remaining page content.
As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it to make it work correctly.
I tested this example in IE 6, Opera 9 and Firefox 1.5 so my screen shots will show different browsers. You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.
Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.
Read More