| |
By Christopher
Alexander
Ajax Fundementals: A Revolutionary New Way to Look
at the Web
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
Tools:
Online demos and tutorial examples of Ajax
Web
development web sites at Surfwebtips web directory
Back to Webmaster
Resource Center |
|
|
|
