Ajax Fundamentals

By Christopher Alexander

The Ajax framework has introduced a novel way to look at the basics of a web application and has been touted by the likes of Google, Yahoo, and Amazon.com, but is it really worth investing the time to learn more about it? By the fact that you are reading this article, that question most likely has been answered, at least in part, beforehand. Hopefully, this article will help to confirm that answer, as Ajax really is that “next great thing” to hit the web development industry. In it, I will share the basic fundamentals of Ajax and the ideas we developed while undertaking a massive research project in Ajax late last year.

Ajax Fundamentals
Probably the most revolutionary aspect of any Ajax web application is its treatment of website pages, or more appropriately a lack thereof. You see, the end goal in any Ajax application is to mimic the functionality, speed, and efficiency of a desktop application on the web. This involves immediate response when a user clicks on a button, link, submits text, and interacts in other ways with the site. Customarily, we are all used to having the page reload essentially whenever the user interacts with a site. Ajax wishes to change this for good. Using JavaScript, Ajax applications dynamically change the website on the Client (which is key for speed and not reloading the page) in response to user input, without going back to the server.

JavaScript and Ajax
Given that Ajax applications attempt to reduce calls to the server to just data requests, much more of any Ajax system resides on the client, with JavaScript as the main language used to manipulate the web page, respond to user input, and communicate with the server. Despite the treatment of JavaScript as a trivial if not annoying aspect of web development and design in the past, Ajax has completely revitalized this language as a novel if not revolutionary way to develop applications for the web. Several key aspects of the JavaScript language provide the core functionality in any Ajax application: JavaScript’s manipulation of the web page DOM (Document Object Model, think XML), JavaScript’s XMLHttpRequest (how JS communicates with the server), and the existence of JavaScript on nearly every modern browser.

In order to truly understand how JavaScript is capable of manipulating the web page on-the-fly in response to user input, one must look at the layout of any web page as an XML document. The parent node is referred to as ‘document’, and is referred to by JavaScript as such, and every other part of the HTML document is a child node of the document node. To get a better idea of what I am talking about, take a look at Firefox’s DOM inspector (under the ‘tools’ menu). Using JavaScript’s ability to parse XML, one can edit, add, or delete elements from the web page on-the-fly. This becomes a crucial aspect of the Ajax application with respect to its goal of reducing page reloads, as the page can essentially redraw itself when necessary without receiving HTML from the server.

Within an Ajax application, communication with the server is typically limited to the exchange of data, usually in XML (or more recently JSON, JavaScript Object Notation). Using JavaScript’s remote scripting capabilities with the XMLHttpRequest, the application can communicate with the server asynchronously (the A in Ajax), allowing other parts of the application to function as normal while the application sends and receives data. This aspect of JavaScript is key to providing desktop-like functionality on the web, as user interaction with other parts of the site is not interrupted by the application’s communication with the server. Another important aspect of the XMLHttpRequest is that it can implement server-side scripts written in any server-side language, like PHP, ColdFusion, or VB.NET. This allows JavaScript to gain the functionality of server-side code right on the client.

Finally, probably the most important factor in JavaScript’s centrality to Ajax is the portability of a JavaScript program to nearly every modern browser, occasionally with some cross-browser fixes necessary to achieve full portability. With proposed changes to Internet Explorer in IE7, these cross-browser fixes will likely become less and less necessary.

Tools you’ll want (and need) to develop Ajax applications Probably the most important tool that you’ll want to develop Ajax application is your favorite web developing software, whether it be something as complex as Macromedia Dreamweaver or as simple as Notepad. In order to test your JavaScript in your application, you’ll probably want something like Firefox’s JavaScript Console (in the ‘tools’ menu) to view any errors that the browser gives you. Additionally, any tool that shows you the webpage DOM is key in getting a visual reference of how JavaScript manipulates the page. Finally, a multitude of JavaScript libraries, specifically geared towards Ajax, are beginning to pop up all over the web. These libraries make it much easier to do both page manipulation and remote scripting. Simply do a search for ‘Ajax libraries’ or ‘JavaScript libraries’ to check out a few.

Some ideas for developing an Ajax application
Although Ajax’s presence on the web is still limited, one can already see how it is improving web functionality on several high-profile sites. Google has been the company that has seemingly invested the most time and money into this new technology. With Google Maps, Gmail, Google Suggest, and other Google products, Ajax is being utilized in full force by providing the user with instantaneous response from the application without annoying page reloads. Additionally, Yahoo and Amazon.com have begun to develop web portals using Ajax, which leads us to our first idea for an Ajax application: the web site portal. With JavaScript’s capacity to create windows, contextual menus, and movable elements, an Ajax application can mimic a desktop UI rather easily. As such, the Ajax web portal provides the user with a desktop-like interface to assemble information from a variety of sources (much like the same goal of the classic web portal).

Ajax can also be used to ease the portability of any desktop application to the web, such as online banking software, word processors, graphics programs, RSS aggregators, or industrial order processing software. With the ability to change the web page on the fly and communicate with the server asynchronously, the bounds are limitless when developing web applications using Ajax.

Christopher Alexander is a lead developer at CE InterWeb Solutions and a Managing Partner at Consolidated Energies.

He has been developing advanced web applications using a variety of frameworks since 2000.

Article Source: http://EzineArticles.com/?expert=Christopher_Alexander