Why Do Cool Kids Chose PHP to Build Websites?

PHP Developer's Journal

Subscribe to PHP Developer's Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get PHP Developer's Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


PHP Authors: Hovhannes Avoyan, AppDynamics Blog, Trevor Parsons, Andreas Grabner, Harald Zeitlhofer

Related Topics: RIA Developer's Journal, XML Magazine, AJAX World RIA Conference, PHP Developer's Journal

RIA & Ajax: Article

AJAX and Atlas

Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent

One of the big buzzwords that rose to fame in 2005 was "Ajax." The term "Ajax" was first coined by Jesse James Garrett in his essay "Ajax: A New Approach to Web Applications" (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

Since Ajax has taken off among Web developers, there have undoubtedly been many frameworks, APIs, and libraries to allow people to leverage Ajax with ease. I'd like to take a look at two of these Ajax packages for ASP.NET and show the differences and similarities of them. I will compare one of the earliest libraries available: Ajax.NET and Microsoft's ASP.NET 2.0 product, code-named Atlas.

As I started doing my research for this article, I wanted to make a grid in Excel that would compare these two products side by side, to see where they were similar and where the differed. I found out rather quickly (and against my assumptions) that they were really not as similar as I had thought. I had tinkered around with Ajax.NET last summer when it wasn't quite as mature as it has become, and I thought it was awesome. It made our Ajax development so much easier by hiding many of the tedious details involved. Since Ajax.NET worked so easily, I had assumed that Atlas would be implemented in much the same way, but boy was I wrong!

Ajax.NET is a simple installation. When you download the library, you get a .NET assembly and a Word document that describes how it works, known issues, etc. In order to use Ajax.NET you include a reference to the assembly, aptly named Ajax.dll, for each project or add the assembly to the GAC if you are going to be using it in many projects.

The way that Ajax.NET works is also rather simple. There are classes in the assembly that are Attributes designed to be placed on your server-side methods in ASP.NET, of which the most important Attribute is the "AjaxMethod." When you apply this Attribute to your methods, the Ajax.NET library will then mirror that method in your resulting JavaScript code on the client side. For instance, if you have a method with this signature "int Add(int x, int y)," and you decorate that with the AjaxMethod attribute, there will be a resulting JavaScript method on the client side called "Add(x, y)." This is really all you need to know in order to use this library to start making Ajax-enabled Web applications. The library contains the JavaScript necessary to communicate to the server to call the appropriate method on the server, and then when the call returns to the client-side page, it will execute a JavaScript callback method of your choice that contains the return value from the server-side method call. Getting up and running with the Ajax.NET library is incredibly easy - you can practically get it working by mistake.

An interesting side note about Ajax.NET is that it actually uses very little XML to work. Instead of returning XML to the client and then converting the XML into the appropriate object form, Ajax.NET uses the JavaScript Object Notation (JSON) to send the results to the browser. JSON is kind of like shorthand JavaScript - it's a syntax of JavaScript that allows you to dynamically define objects in your code. Ajax.NET simply returns a string as JSON code that gets run as a script on the client side, and presto! - you have your objects. The benefit of using JSON is that it needs no parsing or serializing on the client side because it's already in code form, and it can also be less cumbersome than XML, meaning the requests/responses can be that much more efficient. The only downside that I can see is that it makes your requests locked into a JavaScript implementation; that is, you can't easily call a Web service that returns JavaScript code from a C# windows application, but that's a small price to pay for practicality.

The Ajax.NET library was under some hot-and-heavy development late last summer and early fall. It was created by Michael Schwarz and he continued to improve it as the year went on, eventually adding support for special controls that would make use of Ajax, JavaScript namespaces, and a whole JavaScript client library that gives you much more power on the client side. One of the key features of Ajax.NET is its ability to return complex types from the server to the client-side code; rather than being limited to ints and strings, you can return built-in classes to the .NET framework like DataSets and Arrays, or even your own custom object types. This makes it extremely easy to transfer data to the client and leave the burden of rendering up to the browser. To change the filtering or paging of a list on your Web page, for instance, all you need to do is return an array of list items to the browser and it can loop over the items and write the appropriate HTML code. By having your custom objects on the client side, it allows you to program your JavaScript in a more object-oriented fashion, and it also allows you to leverage the code you've already written on the server side.

Therefore what the Ajax.NET library boils down to is that it exposes your server-side methods and objects to the browser so that you can use them in your JavaScript, and use them asynchronously to give your users a quicker, richer experience on your Web sites. It is a lightweight library with little barrier to entry, and as I've described above it's easy to install and integrate it into your applications.

Microsoft's Ajax product, code-named Atlas, is currently in pre-beta stages and the most recent release is the December CTP. Atlas is more than just a library that makes Ajax Web applications easier - it's really a framework that sits on top of ASP.NET 2.0 to provide built-in support for Ajax applications in ASP.NET. This is a key difference between Ajax.NET and Atlas: Atlas will only work in ASP.NET 2.0 because it leverages many of the changes that have been made, while Ajax.NET can be used in ASP.NET 1 or 2, because of its simplicity.

Atlas consists of server- and client-side components to en-able Web developers to add Ajax to their projects. These pieces all work together to make Atlas feel very much at home in ASP.NET. Since Atlas was introduced at this year's PDC conference in September it has already undergone significant improvement. I tried to use one of the starter kits soon after Atlas was announced, but I could not get it to work (this could certainly be a case of developer ignorance as well). More recently, I found a great sample Atlas application at Scott Guthrie's blog (http://weblogs.asp.net/scottgu/archive/2005/12/26/433997.aspx). The sample application that Scott has created is a simple to-do list application that tracks your tasks. The sample is actually pretty full featured with paged, sorted lists and inline item editing, with no page postbacks. What's even more impressive is that Scott claims to have written the app in 15 minutes on a plane! I highly recommend downloading Scott's sample if you are interested in playing around with Atlas - it's simple enough to comprehend and it shows the different kinds of functionality in Atlas.

The client-side component of Atlas has several JavaScript files that get included that provide base functionality for Atlas to run in your browser. There is a browser-compatibility layer to abstract the differences in browsers' JavaScript implementations. This ensures that Atlas users aren't restricted to Internet Explorer. Atlas currently works in IE, Firefox, and Safari. Another client script mimics the .NET Framework base class library with classes like "WebRequest" and "WebResponse," Atlas also comes with built-in UI functionality such as data-binding support, so you can bind the results of server calls to client side controls in much the same way you would in your ASP.NET codebehind. The goal of Atlas is to allow you to write your code in the same way, except that it will now run on the client instead of the browser.

Due to the tight integration with ASP.NET, you really won't need to type that much JavaScript code. Because Microsoft has built special server controls that you can drag and drop in the designer, a whole lot of the monotonous script code has been taken care of, and is usually abstracted even in the resulting HTML. If you download the sample app mentioned above and take a look at the HTML source of some of the pages, you'll see that there's really not much JavaScript code at all, save some typical __doPostbacks; still, Scott has managed to have Ajax-paging, Ajax-editing, and Ajax-filtering on his lists! The beauty of this is in the server controls working together with the client-side Atlas run time. If you do some digging (and it can be a lot of digging) you can locate a piece of Atlas code that does what many of us have done before, except that we always thought it was a hack; Atlas hijacks the __doPostBack JavaScript method. By overwriting the __doPostBack method, Atlas can intercept any control that would normally do a page post and instead posts the page asynchronously using Ajax; however, it can also retain all of the good stuff that ASP.NET needs to run on the server side, such as event targets and event arguments.

A key ingredient to Atlas working so well is the addition of the ScriptManager and UpdatePanel server controls.

The ScriptManager control is a pretty smart control. It will detect that a page is using Atlas and will override the page's HTML rendering. Instead of rendering the entire page in response to an Atlas call, the ScriptManager will send only the HTML that corresponds to what needs to change on the page. This leads us to the UpdatePanel control. UpdatePanels are used in the HTML markup to separate areas of the page that can be dynamically updated in isolation. The ScriptManager knows which UpdatePanel of the page should be updated and only gets that HTML, rather than the whole page. When that HTML is received on the client side, the HTML is inserted into the UpdatePanel using JavaScript. So instead of passing complex data types to the client for processing, as Ajax.NET does, Atlas does all of the processing on the server side and still renders HTML - just not complete HTML pages - and then lets the client code determine where to put the partial HTML.

Ajax.NET and Atlas are both viable solutions for adding Ajax functionality to your Web applications - you just need to pick the right tool for the job. If you are creating a new Web application using ASP.NET 2.0 and it's not going to be released for a while, maybe you can use Atlas and the seamless integration with ASP.NET 2.0. Suppose you have an existing ASP.NET Web site and you want to incorporate some little Ajax widgets here and there. In that case you would certainly want to consider using Ajax.NET because it is lightweight and works with .NET 1.1. I personally like the fact that I can bolt Ajax.NET onto just about anything very quickly and with little fuss, whereas with Atlas you get the feeling that once you start using it you're kind of locked into the Atlas world because of how it takes over the client-side code.

More Stories By Ben Reichelt

Ben Reichelt is a software developer for Magenic Technologies Inc., a software consulting company based in Minneapolis that specializes in Microsoft solutions. He has been working in software for three years and lives in Saint Paul, MN with his wife Erin. You can catch up with Ben by reading his blog at http://codebetter.com/blogs/ben.reichelt.

Comments (25) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
wowgold 12/03/06 11:55:33 PM EST

World of Warcraft is a best-selling Massively Multiplayer Online Game (MMOG) set in Blizzard's Warcraft universe. Players assume the roles of heroes as they adventure, explore, and quest together across a vast world. World of Warcraft sell wow gold ships simultaneously for Mac and Windows on hybrid CD.

JDJ News Desk 11/17/06 02:35:14 PM EST

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web

SYS-CON Australia News Desk 10/22/06 04:39:57 PM EDT

This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

SEO/SEM Journal News Desk 10/19/06 04:45:56 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web

SYS-CON Australia News Desk 10/19/06 01:47:08 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications'

SYS-CON Belgium News Desk 09/14/06 05:00:28 PM EDT

AJAX and Atlas

SYS-CON India News Desk 09/14/06 03:13:21 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

SYS-CON Australia News Desk 09/14/06 01:52:35 PM EDT

AJAX and Atlas: An Overview of Two AJAX Implementations

SYS-CON Italy News Desk 09/14/06 01:08:41 PM EDT

AJAX and Atlas: An Overview of Two AJAX Implementations

SYS-CON Australia News Desk 09/13/06 05:36:52 PM EDT

manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in

n d 09/13/06 03:15:55 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

n d 09/12/06 06:59:05 PM EDT

AJAX and Atlas: An Overview of Two AJAX Implementations

n d 09/12/06 06:43:11 PM EDT

AJAX and Atlas: An Overview of Two AJAX Implementations

AJAXWorld News Desk 08/03/06 12:29:41 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

AJAXWorld News Desk 08/03/06 12:29:28 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

SYS-CON Belgium News Desk 08/03/06 12:02:16 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

SYS-CON India News Desk 08/03/06 11:33:51 AM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

AJAXWorld News Desk 08/03/06 10:52:38 AM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

hj 08/03/06 04:39:53 AM EDT

hjgh

chuck 04/29/06 08:10:58 PM EDT

The biggest thing about Atlas is that it's essentially IE only. They did get most, but not all, the controls to work with Firefox. The other browswers, pretty much nothing works.

Bertrand Le Roy 04/14/06 04:51:53 PM EDT

It's an interestig comparison but I think you only touched the tip of the Atlas iceberg: the server-side controls. Atlas also does web-service invocation in pretty much the same way as Ajax.NET and also has a large client-side component infrastructure and library that enables you to do client-side declarative development. You should check it out!

AJAX News Desk 04/13/06 02:02:10 PM EDT

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.

Ben Reichelt 02/15/06 08:58:25 PM EST

Timo, thanks for the comments. I wrote this article in the first week of January, so the December CTP was the most current at the time of writing, I guess I should have mentioned that :)

Timo Kiander 02/15/06 04:23:07 PM EST

Nice article.

However you mentioned that "Microsoft's Ajax product, code-named Atlas, is currently in pre-beta stages and the most recent release is the December CTP"

Actually the latest release came out on January:

http://www.asp.net/default.aspx?tabindex=9&tabid=47

SYS-CON Australia News Desk 02/15/06 12:28:53 PM EST

One of the big buzzwords that rose to fame in 2005 was 'Ajax.' The term 'Ajax' was first coined by Jesse James Garrett in his essay 'Ajax: A New Approach to Web Applications' (www.adaptivepath.com/publications/essays/archives/000385.php), and it refers to the use of asynchronous JavaScript and XML to drive Web applications. Rather than reloading the entire Web page every time data needs to be transmitted, only small, necessary chunks are sent and received, with JavaScript manipulating the UI in response to the data received. This gives the look and feel of a regular client application while still being hosted inside of your Web browser. While Ajax methodologies have been used for years - most notably in Microsoft's Outlook Web Access - they have just recently become incredibly popular via services such Google's Gmail and Google Maps.