AJAX – Web Applications
Posted On September 11, 2015 by Shruthi S filed under Enterprise
When you write an application today, you have two basic choices:
- Desktop applications
- Web applications
These are both familiar; desktop applications usually come on a CD and install completely on your computer. They might use the Internet to download updates, but the code that runs these applications resides on your desktop. Web applications -- and there's no surprise here -- run on a Web server somewhere and you access the application with your Web browser.
On the other hand, Web applications are usually up-to-the-second current and they provide services you could never get on your desktop (think about Amazon.com and eBay). However, with the power of the Web comes waiting -- waiting for a server to respond, waiting for a screen to refresh, waiting for a request to come back and generate a new page.
Obviously this is a bit of an oversimplification, but you get the basic idea. As you might already be suspecting, Ajax attempts to bridge the gap between the functionality and interactivity of a desktop application and the always-updated Web application. You can use dynamic user interfaces and fancier controls like you'd find on a desktop application, but it's available to you on a Web application.
2. Technologies related to AJAX
When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill down into several different technologies. Here are the basic technologies involved in Ajax applications:
- HTML is used to build Web forms and identify fields for use in the rest of your application.
- DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML.
- Asynchronous data retrieval using XMLHttpRequest.
- Data interchange and manipulation using XML and XSLT.
The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.
Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).
This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.
3. How AJAX is Different
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
4. How Does AJAX Work
By performing screen updates on the client, you have a great amount of flexibility when it comes to creating your Web site. Here are some ideas for what you can accomplish with Ajax:
- Dynamically update the totals on your shopping cart without forcing the user to click Update and wait for the server to resend the entire page.
- Increase site performance by reducing the amount of data downloaded from the server. For example, on Amazon's shopping cart page, when I update the quantity of an item in my basket, the entire page is reloaded, which forces 32K of data to be downloaded. If you use Ajax to calculate the new total, the server can respond with just the new total value, thereby reducing the required bandwidth 100 fold.
- Eliminate page refreshes every time there is user input. For example, if the user clicks Next on a paginated list, Ajax allows you to just refresh the list with the server data, instead of redrawing the entire page.
- Edit table data directly in place, without requiring the user to navigate to a new page to edit the data. With Ajax, when the user clicks Edit, you can redraw the static table into a table with editable contents. Once the user clicks Done, you can spawn an Ajax request to update the server, and redraw the table to have static, display-only data.
The possibilities are endless! Hopefully you are excited to get started developing your own Ajax-based site. Before we start, however, let's review an existing Web site that follows the old paradigm of submit/wait/redisplay and discuss how Ajax can improve the user's experience.
4.1. The XMLHttpRequest object
Table 1. Create a new XMLHttpRequest object
- Change values on the form: It's also simple to update a form, from setting field values to replacing images on the fly.
For those first two items, you want to be very familiar with the getElementById() method as shown in Table 2.
// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response;
4.3. Finishing off with the DOM
Last but not least, there's the DOM, the Document Object Model. We will find the DOM in use a lot is in heavy-duty Java and C/C++ programs; in fact, that's probably where the DOM got a bit of its reputation for being difficult or hard to learn.
5. Where AJAX used
Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.
These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.
6. AJAX Frameworks
6.1. Types of AJAX Frameworks
Ajax frameworks can be loosely grouped into categories according to the features they offer and the skills required of the user.
6.1.1. Direct Ajax frameworks
These frameworks require HTML, CSS and Ajax expertise: a developer is expected to author pages directly in HTML, and framework APIs deal directly with HTML elements. Cross-browser APIs are provided for a variety of purposes, commonly including communications, DOM manipulation, event handling, and sizing/moving/animating HTML elements.
These frameworks are generally smaller. They are commonly used for a web site such as a shopping experience, but not for a web application such as web-based email, at least not without further frameworks layered on top.
6.1.2. Ajax component frameworks
Ajax component frameworks can enable more rapid development than direct Ajax frameworks, but with less control, hence it is key that an Ajax component framework provides;
- customization APIs, eg, an event that fires when the user stops editing within a grid
- skinning facilities, where appearance can be changed without affecting behavior or layout
- programmatic control, eg, dynamically adding tabs, or dynamically creating components based on user data
- extensibility, ideally, creation of new components based on other components, so that the benefits of a component-based framework aren't lost
6.1.3. Server-driven Ajax frameworks
Several frameworks offer a server-side component-based development model with some degree of Ajax support.
Components are generally created and manipulated on the server using a server-side programming language. Pages are then rendered by a combination of server-side and client-side HTML generation and manipulation. User actions are communicated to the server via Ajax techniques, server-side code manipulates a server-side component model, and changes to the server component model are reflected on the client automatically.
These frameworks offer familiarity for server-side developers at the expense of some degree of power and performance. Ajax frameworks that handle presentation completely within the browser are more scalable because they do not run presentation code on the server at all. In a server-driven model, some UI interactions can become chatty, for example, an input field that is dynamically enabled or disabled based on server-side code may cause many network requests. Still, this approach is popular, especially in situations where the benefits of a full Ajax architecture can't be captured anyway.
Extending such a framework may require the developer to understand which parts of the presentation are handled on the client vs on the server, and to write a mixture of Ajax and server-side code. Examples include frameworks that offer Ajax for JSF, and Google's GWT.
6.2. Example AJAX Frameworks
6.2.2 C++ API
C++ Toolkits are interfaces to AJAX technology.
- WT, WT(witty) is a WebToolkit, allowing programmers to write code in C++ (without knowledge of real AJAX), generating content rich AJAX GUI. OpenSource Licence.
6.2.3 Java Frameworks
Such frameworks permit the use of Java web services interactively with web pages. The most common Ajax specific frameworks are;
- DWR, a remoting toolkit and DHTML library.
- IT Mill Toolkit, a user interface library for developing Ajax -based web applications in plain Java run in server.
- ZK, an AJAX/XUL Web Application Framework.
- ThinWire, open source Swing like AJAX framework for developing web applications
6.2.4 .Net Frameworks
These tools run only on the .NET platform, and thus under Windows and perhaps some compatible ports as Mono and others.
- Ajax.NET Professional serialize .NET data to the JSON format.
6.2.5 PHP Framework:
A PHP framework is able to deal with database, search data, and build pages or parts of page and publish the page or return data to the XMLHttpRequest object. PHP 5 specifically, thanks to its SimpleXML class, is able to create XML files that may be returned to the object. However, it is better to use a predefined library that performs the various tasks.
- Xajax uses only the XML format, on the server side
At Adaptive Path, the web developers have been doing their own work with Ajax over the last several months, and they were realizing that they have only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.
The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.
For now, though, spend some time thinking about just how powerful Ajax applications can be.
It’s going to be fun.
A.Adham Sheriff, MCA., M.Phil.,
R. Senthil Kumar, MCA., M.Phil.,
A.Abdul Rahman, MCA., M.E.,