In this article, my goal is to provide you with a thorough AJAX primer and give you a real-world illustration of its usefulness.
Later, I’ll demonstrate the benefits of AJAX using a test case application for a chemical sales company. First, I’ll illustrate the immediate advantages by using an application that I built for a medical insurance company a few years ago that allowed customers to proximity search for medical providers near their homes.
The application was built with ASP.NET (C#) and SQL Server, and worked by triangulating medical providers out of a database near a specific address. Customers could pick from a list of search options and build queries like “I’d like to find cardiologists within 15 miles of 01824” or “I’d like to find cardiologists within 15 miles of 01824 that have practiced medicine for at least 13 years and graduated from XYZ College”, etc Any time customers would refine their search options, my code would locate medical providers and update a list in their browser.
The problem with this application is that it was slow and not very responsive. When a customer would select more specific search options, the request was routed to the server, the database would go through the triangulation algorithm, and eventually the list of medical providers would get displayed in the user’s browser. Often times, a complex query could take over a minute to complete.
Furthermore, when our company would sign a contract with an employer they would pick a specific day to customize medical insurance plans with their employees. This meant that many employees would configure their healthcare options at the same time. Considering that our application was running on only one server, and we only had one database server, this would generally cause our application to slow down exponentially. Sometimes, this bottleneck would cause our application to crash or would cause our customer’s requests to time-out.
This is where AJAX would have been useful. AJAX is an acronym for Asynchronous JavaScript and XML and is a technology for using client-side JavaScript to interact with a Web Server to manage Data and User Interface. The idea is to move some of the processing within a web application from the server, to the client.
Today, the average home PC comes standard with 512 Mb of RAM, and a 3 GHz CPU. Clearly, you can see the benefit to taking advantage of that client-side processing power in building our web applications. This is possible because most of today’s web browsers are capable of using JavaScript (ECMAScript) and more importantly, XML.
This browser support allows our web applications to essentially “pass” the data to the client in XML where it can be manipulated using JavaScript.
The benefits to building applications using AJAX are as follows:
* Alleviates server resources
* Makes applications more responsive and dynamic
* Makes applications faster
* Decreases bandwidth requirements
* Reduces number of steps for a user to complete a task
* Allows for a more “Windows-Like” user interface
Surprisingly, although there is a lot of clear cut benefits with this approach, there is very little information about the applicability to business. It’s important for developers to be able to explain the benefits of AJAX to other business stakeholders in these terms so that they are speaking the language of business, which is universally understood.
The Technology of AJAX
Technically, AJAX is just JavaScript performing some XML interaction between the client and the server. This interaction is accomplished with an XmlHttpRequest object and is fairly simple if you’re familiar with XML and JavaScript. The problem that most web developers face is that the model is quite different from what they’re used to. Many web developers are referring to this new style of interactive development as “Web 2.0″ because it’s so radically different from the traditional client-server request-response style application development.
I believe that standards will soon be adopted for exactly how AJAX applications are to be built, and what functions should exist within your JavaScript code in order to provide optimized interaction with the server and the XmlHttpRequest object.
Until that happens, web developers are struggling through building AJAX applications and making common mistakes like:
* Not giving visual cues for widget clicking
* Breaking the browswers back’ button
* Blinking and changing parts of the page unexpectedly
* Losing URL context
* Inventing new (and unconventional) UI conventions
* Scrolling the page and making me lose my place
AJAX has a lot of maturing to do, and definitely needs some standardization.
The AJAX Test Case
To explore the potential for cost savings, look at a sample application that was built to study the differences between the traditional Web architectures and AJAX. I call this application the “United Chemicals Sales Tool (UCST).” United Chemicals is a fictional company that sells household chemicals. The UCST allows sales personnel to transact sales and maintain a general database of customers. The application is written in ASP, and is connected to a database of roughly 10,000 customer records, 60,000 sales records, and a catalogue of about 600 products. This is meant to represent a controlled version of a scenario you might see in the real world.
Two versions of the UCST application were written. One version was developed using a traditional architecture. The user interface resembled one you might see if you had used the Microsoft Data grid to display and edit records. The other version used AJAX to edit data in an Excel-like interface. In almost every other respect, these applications function identically. For this to be a fair comparison, several guidelines were used in the execution of the test case:
* Five test users were required to enter exactly the same amount of data in each application for each task.
* The traditional architecture version would only post back to the server when absolutely necessary.
* All HTML, JavaScript, and image overhead was included in the calculations with no pre-cached elements.
* Microsoft Fiddler and a stopwatch were used to gather relevant metrics.
* Test users had at least a moderate level of computer knowledge.
* Test users received the same training in both versions of the application beforehand.
The United Chemicals Sales Tool test application can be found here.
Traditional vs. AJAX-The Results
The metrics taken for this study were bytes transferred, total time consumed by the task, and Microsoft Fiddler’s estimation of the time it would take to transfer the same data in the same number of HTTP requests to a location on the US West Coast from our position.
Traditional (Average) AJAX (Average) Performance Increase Performance Increase (%) Bytes Transferred: 1,737,607 460,799 1,276,809 73% Time (seconds): 115 78 36 32% Estimated Transmission time to US West Coast (56k) (seconds) 293.45 94.44 199.01 68%
As expected, in every test there were significant performance improvements across the board in the AJAX version. The greatest improvements were in bandwidth and network traffic efficiency gains. This resulted in improved responsiveness, allowing the user to move more quickly through the application. Overall, there was a 73% improvement in the number of bytes transferred in the AJAX application over the traditional version. This was due to the fact that that server requests were made only for the data that was needed, not for the entire page. Microsoft Fiddler also predicted that there would be a 68% overall time improvement in transferring that information to a location on the US West Coast given the number of HTTP requests, bytes transferred, the latency of that connection, and the bandwidth afforded by a simple 56k modem.
More importantly than bandwidth considerations was the direct benefit to users who saved on average 32% of the time required to complete the tasks in the AJAX version. Had those users been connecting to a remote location instead of a local server, Fiddler predicted the time savings could have been much more dramatic (around 68%). We could take these numbers now and extrapolate to see how large enterprises could be affected when these actions are repeated over and over.
Conclusion
Although every new technology should be greeted with a healthy amount of skepticism, there are clearly demonstrable, quantifiable advantages to using an AJAX architecture in a Web application. The cost savings originate primarily from time savings, but also from reductions in bandwidth requirements.
Here’s a list of additional resources and sample AJAX applications:
* Real Time HTML Editor (Note the broken back button!)
* BackBase’s AJAX Example Page
* ClearNova’s AJAX Example Page
* Google’s Page Maker
Thanks to Alexei White for the test case conducted in this article.
Add to document.write(“Del.icio.us”) | DiggThis | Yahoo! My Web
Technorati:
Justin Schultz is an educator and public speaker with over 7 years of software development experience. Hes delivered private Java, C#, ASP.NET and XML training to a client list including Wells Fargo, Pennzoil, and the U.S. Airforce.
http://www.FunWithJustin.com/
