AJAX power

This month, Mark has been experimenting with new ways to develop user interfaces for the Web, and has had quite a battle to get some of the technologies to work. What started all the grief was the desire to build a new front end for an existing website, perhaps using AJAX technology. If you recall previous columns, AJAX gets rid of that annoying blanking that occurs as each new page is downloaded from the server and rendered by the browser (a horrid effect that we’re all familiar with on websites but would never tolerate in a desktop application).

AJAX power

The first ‘blankless’ technology arrived back in the days of IE 3 – Microsoft’s Remote Scripting, which enabled the Exchange web interface to work like a real application for the first time. The problem was that it was confined to IE 3 and so was ignored by most web developers. The key to getting a blankless effect is a browser’s ability to update a defined screen area without performing a page refresh, achieved via an XmlHttpRequest, which has been in IE since version 4 and is now also supported by Safari, Opera and Mozilla. You can now consider AJAX for public websites where there’s no control over what browser your visitors will be using, rather than just for intranets where you can force them to use IE.

You don’t need any fancy tools to develop in AJAX, as the client-side code is basically JavaScript, while the server-side stuff is whatever you prefer to code in, so you can use all your favourite tools. However, there are some dedicated AJAX development tools available, and the one we’ve been using provides lots of syntax help, and is free. The product in question is Microsoft’s Visual Web Developer 2005 Express Edition (VWD2005EE), a cut-down version of the latest Visual Studio. It’s somewhat restricted, but most developers will still find it a very powerful environment, with syntax help and a built-in object browser, as well as a debugger for web applications. It does require the .NET Framework to be installed on your machine, and it comes with the free version of SQL Server 2005 for your database requirements. This latest incarnation of Visual Studio is certainly worth the sizeable download and, in Mark’s opinion, rates as one of the best web-design environments; Macromedia’s Dreamweaver is great for designing and maintaining many websites, but for pure coding and ease of debugging you’d be pushed to beat VS 2005.

Due to time pressures, we’ve used some sample code from an extremely good book on the subject of AJAX called Foundations of Ajax by Ryan Asleson and Nathaniel T Schutta (ISBN 1-59059-582-3). We found that the code examples in this book differ from much of the code currently on the Web in one respect; namely, that the code in the book works! Many of the code examples on the Web we tried had mistakes in them, and to describe the process of writing this article as at times frustrating would be a major understatement. In all, it’s taken a couple of weeks to get a firm grip on this technology, with only a few distractions in the form of eBay getting in the way of work.

The example we’ll be showing you displays a button on a web page, which when pressed will return a table of data. To make the code easier to understand, and to concentrate attention on the AJAX part, we’re using a simple text file on the server to provide the data source, but obviously this would, in real life, be a link to a database, or better still to a web service.

Start by creating a normal web page and at the top of it put the normal declarations for an XHTML-compliant web page, which look a little like this:

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
How to See Google Search History
how to download photos from google photos