Return to DNJ Online home page

 

The .NET Platform
Development Tools
COM & COM+
Data Access
Web Development
XML Technologies
Windows Servers
Wireless & Mobile
Security issues
Design & Process
Career Development
Analysis & Comment
Disposable Objects

Subscribe to our RSS feed to receive notification of new articles as they are published.

Events Diary
Software Update

About Us
Advertisers

 

You are not logged in: login here to access all areas.


Microsoft makes AJAX easier

Microsoft 'Atlas' aims to make AJAX development much easier for the Visual Studio developer, thanks to client-side Javascript code and AJAX-enabled controls on the server. Matt Nicholson finds out more from Microsoft's Mike Ormond and Ian Moulster.

Author: Matt Nicholson

Last updated: Sep 2006

Matt: Can you explain what AJAX is?

Mike: AJAX is a mechanism that allows you to build much more interactive Web applications. It allows you to move away from the standard Web ‘post-back’ model where you fill in some data on a Web page and post it back to the server where the server processes it, renders another HTML page and sends it to the client. AJAX enables you to send smaller amounts of data ‘behind-the-scenes’ as asynchronous requests back to the server which the server can process and send back to the client, which then does a dynamic update. As a result you get a much more responsive application as much less data is being transferred, and the user interface is being updated dynamically in front of the user.
      So think of applications like Windows Live Local, or what was MSN Virtual Earth, where you are presented with a map that you can drag around, and you can request to have all the Starbucks in your area superimposed as a set of push-pins, along with all their addresses. Thanks to AJAX all of that can be done without the usual post-back delay of a new page being rendered down to the client. You get much more of the feel of a desktop application where there’s lots of communication going on behind the scenes that’s not visible to the user.

Windows Live Local is an example of an AJAX application.

Matt: So it’s just updating the part of the screen that needs to be refreshed.

Mike: It’s doing a number of things. One aspect is partial updates of the screen, but there’s also the asynchronous communication. Taking the example of Live Local: when you drag the map to the right, then behind the scenes the AJAX ‘engine’ knows that it needs to be getting map data from locations to the left in order to be able to refresh the page promptly when the user gets there. It’s pre-empting user action to make sure the data is available to present to them when required.

Matt: So the AJAX engine sits on the client.

Mike: Yes – I call it the AJAX ‘engine’, but there is some code on the client that is essentially doing two things. Firstly it understands how to make these asynchronous call-backs to the server, which it does through a mechanism called the XMLHttpRequest object.

Matt: That is a JavaScript object?

Mike: That object is implemented slightly differently in different browsers. It is supported across all the major browsers, and it’s either an ActiveX object or a JavaScript API that I can call to make a request to the server, without going through the standard post-back mechanism. With Internet Explorer the ActiveX object has been built in to the browser since IE5. In Firefox it’s implemented as part of the Firefox API and you can call it through JavaScript.
      The second function of this client-side code comes into play when it gets a response from the server, and involves updating the user interface in whatever way is appropriate. The client-side code is responsible for both making the call to the server and updating the display when it gets a response.

Matt: So the normal way you would code an AJAX application is using JavaScript?

Mike: AJAX stands for Asynchronous JavaScript and XML and is an acronym coined by Jesse James Garrett of Adaptive Path in early 2005. AJAX essentially wraps up JavaScript; the XMLHttpRequest object; CSS and XHTML to do the user interface and the layout side of things; and XML or some sort of serialisation mechanism that allows you to pass data back and forth to the server. The client-side code is in JavaScript, and you’re using CSS and XHTML to control the layout. You’re using JavaScript to manipulate the DOM so you can update the user interface, and to make the calls which typically pass the data in XML or some sort of serialisation format back to the server using the XMLHttpRequest object.

Matt: So how does Atlas fit into that?

Mike: Atlas is Microsoft’s framework for taking the pain out of AJAX development. As you can see there’s quite a number of technologies that you need to grasp very solidly if you are going to start building AJAX applications from scratch. In ASP.NET 2.0 we offered some assistance to help build AJAX-type applications, but Atlas takes that further.
      Atlas provides a number of things from the server perspective and a number of things from the client perspective. In the simplest but perhaps most powerful case, we provide a set of Atlas server controls. These parallel standard ASP.NET server controls, but implement their functionality using AJAX technology.
      So these controls render themselves down to the client with the ability to do things like partial updates and call-backs to the server that don’t involve a full-blown post-back. Some of the ASP.NET 2.0 controls already do that, but Atlas will provide a series of additional controls that implement that type of AJAX functionality.
      Possibly the most important of those is the Atlas UpdatePanel control, which is essentially a wrapper. I can drag it onto my page, much as I can any ASP.NET server control, and use it to wrap existing content on my page, so indicating to Atlas that I want that content to be part of an AJAX partial refresh.
      So if I have an existing page with, for example, a text box, a button and a GridView control that gets updated as a result of a query, I can wrap these controls in an UpdatePanel so that when the user clicks the button, instead of a post-back occurring and a new page being rendered down to the browser, the user gets a partial update of just that GridView. I did not have to write any JavaScript, I’ve not had to manipulate the DOM – the Atlas UpdatePanel control takes care of all that for me.

Matt: Are you saying that if you simply put an Atlas UpdatePanel on an ordinary ASP.NET page, and then put standard ASP.NET controls into the UpdatePanel, then that would become a local area that is refreshed?

Mike: That’s right, but there are a couple of pre-requisites. For example there’s a DLL that sits on the server that is the fundamental Atlas framework, and I need to put some references on my page to give me Atlas functionality. But once I’ve done these – and it simply involves specifying a ScriptManager control to indicate that the page is to be Atlas-enabled – I can then drag an Atlas UpdatePanel control onto my page, put my GridView within that UpdatePanel, and get partial refresh on the GridView control.

Matt: One problem I can see is the considerable differences between the way that Firefox handles JavaScript and the way that IE does. Quite often you can write something that works in IE but doesn’t work in Firefox, and vice versa. How does your technology cope with that?

Mike: As these are server controls we are fully in control of the JavaScript they render, so we can build the controls to be compatible with all the major browsers. Certainly the UpdatePanel control works perfectly well in Firefox, as it does in IE6 and IE7, and all the major browsers will be supported in the Atlas framework.
      But if you’re building really rich AJAX-type applications then the UpdatePanel is not going to be enough. If you’re building your own version of Live Local with all its drag-n-drop functionality and push-pins appearing then you inevitably have to write JavaScript on the client. Here Atlas provides a browser compatibility layer which abstracts you from the differences in the DOMs and the various browser implementations. Going through that browser compatibility layer means that Atlas takes care of those differences for you, and you can write one set of JavaScript that will work against all the major browsers.

Matt: Is that something that sits on the server?

Mike: There’s a DLL on the server that renders the necessary JavaScript libraries, including the browser compatibility layer, down to the client. When you add a ScriptManager control to a page you can also specify which aspect of Atlas you’re using and the appropriate JavaScript will be rendered down to the client for you. This is essentially the ‘engine’ that I talked about earlier. Atlas is rendering down to the client the JavaScript necessary to make it all work.

The Atlas architecture, showing the client-side JavaScript and the Atlas Server Extensions.

Matt: What is the developer’s experience of Atlas?

Mike: I expect most people will primarily be using the Atlas UpdatePanel server control, and some of the other server controls that we ship, so the experience is much the same as with ASP.NET development today.
      Atlas has a family of Extender controls which extend the functionality of normal ASP.NET server controls with some additional feature. For example, you can drop one of these Extender controls on your page, target a Textbox and give it auto-complete functionality, or make sure it moves so that it’s always visible within the browser window. We have a whole family of these Extender controls.
      So I expect most people will be using the UpdatePanel to get the benefit of partial refresh, and using the Extender controls to enhance the functionality of existing ASP.NET server controls. All of that is a drag-n-drop experience for the developer, followed by modifying a property on the Extender control to target a particular control.
      However if you’re doing intensive client-side development that involves writing a lot of JavaScript, because you’re building Live Local or some big aggregation-type application that’s calling in to lots of services, then at the moment you’ll be writing most of that code by hand in Visual Studio. You will get assistance through things like IntelliSense, but the drag-n-drop model is really associated with server development: once you get on to client-side it’s much more akin to what you’re doing today.
      That said, Atlas does provide you with a bunch of scripts that make it much easier. We talked about the browser compatibility layer earlier. We also provide you with a very easy mechanism for calling out to external services – Web services for example. Atlas ‘wraps that up’ for you, making it very easy to call them by generating the necessary proxies and taking care of the serialisation for you – you don’t have to worry about any of that because Atlas just does that for you. As a result you have to write much less code, but Visual Studio itself doesn’t provide you with much more than IntelliSense – for today at least. We’re still at a Community Technology Preview stage, so we’ll see enhancements as we move forward.

Matt: What’s the timescale for Atlas?

Ian: You can currently download the Community Technology Preview and there is a Go-Live licence with that. We’re not currently saying anything about the final release date, although I understand we are committed to shipping a version of Atlas with the ‘Orcas’ release of Visual Studio.

Matt: Will there be Atlas support for the Expression Web Designer?

Ian: I don’t know the answer to that, but I’d be very surprised if not. It would be the obvious place to put it. The Expression Web Designer is the designer tool for developing Web sites, whereas Visual Studio is the developer tool for developing Web sites, so I would be very surprised not to see it in Expression Web Designer.


Update (12 Sept 2006)
Microsoft has now announced the official branding for the 'Atlas' technology. The server-side functionality will be called the ASP.NET 2.0 AJAX Extensions, while the client-side functionality will be known as the Microsoft AJAX Library. The 'Atlas' Control Toolkit becomes the ASP.NET AJAX Control Toolkit.
     Microsoft had planned to ship 'Atlas' with Visual Studio 'Orcas', but has now said it will be released by the end of 2006, and that it will support Visual Studio 2005. Visual Studio 'Orcas' will add JavaScript Intellisense, and full debugging and designer support for the ASP.NET AJAX Extensions.

Send to a friend

Top of page

Click here for our Privacy Statement. Copyright © Matt Publishing. All rights reserved. No part of this site may be reproduced without the prior consent of the copyright holder.

Send to a friend

‘Ajax: A New Approach to Web Applications’ by Jesse James Garrett of Adaptive Path

The official Atlas site