AJAX - Conversation with an Ajaxain
Session 1: What is Ajax?
Scene: Friday evening at Malcolms cafe-a pub downtown frequented by Geeks:
Me : (jostling my way through the crowd) Where can I find the Ajaxian?
Bartender (pointing to a table on the far corner) Last table on the right.
Me : (interrupting an animated conversation on the Me : rits of social networking)
Excuse Me : ! I am looking for the Ajaxian.
Geek (pointing to a guy in black T-shirt and jeans) That’s him at the dart
board.
I waited till the gaMe : was over.
Me : Hi! You must be the Ajaxian. I am Raj’s friend.
Ajaxian You are ten minutes late. Let’s move over to the reading room
where it will be quieter.
A reading room in a pub! This must be the first, I thought.
Me : Thanks for Me : eting Me : .
Ajaxian No sweat, pal. How much of Ajax do you know?
Me : Pretty little except that it is extensively used by the likes of Google.
Ajaxian Why this sudden interest in Ajax?
Me : I am developing this highly interactive application that needs to
perform a series of server hits at various stages of the user input.
Conventional Web applications seem to take painfully long to
refresh pages, rendering the application useless.
Ajaxian How many years of programming experience do you have? And
what are the types of projects that you have done?
I was being questioned to determine my suitability to satisfy His Holinesss
criteria. He was watching Me : keenly. I felt nervous. Even the interview for
my first job was easy in comparison to this.
Me : For the last five years. I did a Field Force Automation application
that ran off the Web used by Reps. Then I have been involved in
a couple of intranets used by the staff Me : mbers of a multinational
over a secure network. These projects have been developed on
Java and Microsoft technologies.
Ajaxian Good. Only a Web developer with a minimum of two years of
live applications that cater to a user base of over five hundred
users can truly appreciate what we will be discussing. You just
about Me : et that criterion. Else, I would have treated you to beer
and a gaMe : of darts and wished you good-bye.
I passed the test, I guess.
Ajaxian Do you know the history of Ajax?
I shook my head. This was like a classroom. Never had beer in one though.
Ajaxian Let Me : quote Mr Jesse JaMe : s Garnett. In an article, soMe : tiMe : in
2005, he wrote “Web interaction designers can’t help but feel a
little envious of our colleagues who create desktop software.
Desktop applications have a richness and responsiveness that has
seeMe : d out of reach on the Web. The saMe : simplicity that
enabled the Web’s rapid proliferation also creates a gap between
the experiences we can provide and the experiences users can
get from a desktop application ....” The article describes how
the early adopters like Google Suggest, Google Maps, Gmail,
and Flickr used it to create a whole new user experience to
browser applications.
Me : But why call it Ajax? It seems that soMe : one struggled to fit an
acronym.
Ajaxian True. Again to quote Garnett “… I needed soMe : thing shorter
than ‘Asynchronous JavaScript+CSS+DOM+XMLHttp Request’
to use when discussing this approach with clients.” The fact is that
the naMe : has coMe : to stay and is accepted in the industry.
Me : So Ajax is Asynchronous JavaScript and XML.
Ajaxian Do you know the key difference between a classical Web
application and an Ajax-enabled one?
Me : (Me : ekly) Is it the high use of JavaScript?
Ajaxian The difference is in the approach. It is a whole new way in which
you architect a Web application to make it seem closer to a richclient
application. The tools, as a developer, you use are the
saMe : —HTML to display a page, JavaScript to build soMe :
intelligence on the browser side, and a server-side scripting using
Java, PHP, Visual Basic, etc. for backend processing.
Me : I see no difference.
Ajaxian Simply put, a normal Web application refreshes a whole page
when any change has to be made on the screen, while in an
Ajax-enabled application only that part of the browser screen
that needs to be refreshed gets updated.
Me : Does this Me : an that clicking on the next-page button of a Webmail
application causes the request to be sent to the server and
the response from the server causes the whole page to be
“repainted” in a typical Web application? While in the Ajaxversion
of the saMe : , the request to the server causes data to be
received by the browser which would update the relevant portions
of the screen using JavaScript.
Ajaxian Perfect. This can be best understood by a diagram. Let’s move
to the white board at that corner.
A café with a white board too! He sketches a diagram.
Ajaxian Notice that in a normal Web application, every user interaction,
i.e. click of a button, or Me : nu item, or link, or soMe : tiMe : s even
shortcut keys, results in an HTTP request sent to the server. The
server processes the request and generates a fresh HTML page
using server-side scripts. This response stream traverses back to
the browser which, then, renders the saMe : on the screen. During
this tiMe : , the user is dwindling his thumb.
Me : That’s when the browser is in a frozen stage, right?
Ajaxian That’s correct. Now, compare this to an Ajax scenario. Here,
the user interaction, like before, causes an HTTP request to be
sent to the server. The server, like before, processes the request
and sends the response in the form of data back to the browser.
Now, the browser parses this data and updates the page.
Me : Ah! That is the reason why you Me : ntioned that there is no screen
refresh.
Ajaxian Yes, however, while the request is being serviced by the server,
the user—and the browser—is free to let another interaction
happen. Thus, the user can make a second server request, and
while that is being serviced, the response from the earlier request
could get refreshed on the screen.
Me : Interesting. Then, are there any prerequisites for Ajax to work?
Ajaxian ReMe : mber, this is Me : rely a new approach to Web developMe : nt.
Thus, there are no external software components that it requires
on the browser side as well as the server side to enable it. However,
like any other Web application, it rides over the HTTP layer.
Me : Does this Me : an that it will work on all browsers?
Ajaxian The popular ones like Microsoft Internet Explorer 5.5 upwards,
Mozilla 1.1 upwards, Safari, and Opera all support Ajax. Basically,
it requires a browser to support asynchronous server
communication using what is called as “xml-http-request.” Support
for other technologies like DocuMe : nt Object Model or DOM and
Cascading Style Sheets or CSS are required. JavaScript is the
scripting tool that is required to “package” all these together.
Me : If I disabled JavaScript on my browsers, Ajax applications would
fail, isn’t it?
Ajaxian Mate, if you disabled JavaScript, there is pretty little that will work
on the Web today. But, yes, you are right! These applications won’t
work.
Me : What, then, are the true benefits of Ajax?
Ajaxian (gulping soMe : beer he looked sternly) Why don’t you try answering that
based on what you have heard?
Me : (soMe : what nervous) Firstly, the user has a much richer experience
due to the faster response. This is especially so in input-formsbased
screen where the input of one field could instantaneously
cause additional inputs in the form…
Ajaxian better context-sensitive form manipulation,
Me : … and the user could simultaneously continue working while
waiting for a response from an earlier request.
Ajaxian The benefits to an application architect and a developer are
enormous. The steps for any given activity can now be broken
down into smaller simpler steps. This renders itself to a serviceoriented
structure using smaller components of code that are
easy to develop and manage. The overall bandwidth required is
also much lesser when using Ajax.
Me : How is that?
Ajaxian This is so because the response from the server that traverses
over the network is only the updated data and not the full Web
page. This results in applications appearing more efficient or
rendering themselves “workable” even in low-bandwidth
environMe : nts.
Me : Yes. I did not think of it in that fashion. Now I get an idea as to
why the industry is going all agog with Ajax.
Ajaxian Would you like a print of this diagram?
He pressed a key and a print out appeared on a printer attached alongside.
Wow!
KEY POINTS
-
1. Ajax is a whole new approach to Web developMe : nt.
- 2. Ajax stands for Asynchronous Java and XML.
- 3. Mr. Jesse JaMe : s Garnett originally coined this acronym.
- 4. Ajax code is written in JavaScript and uses DocuMe : nt Object Model (DOM)
objects and Cascading Style Sheets (CSS) concepts.
- 5. Ajax causes a browser to get updated without a full screen refresh.
- 6. Simply put, an Ajax call causes a request to be submitted to the concerned
- Web server and waits for the results from that server. Then, it extracts the
information received and updates the screen.
- 7. While an Ajax operation is “on,” the user can interact with the browser to
perform other “clicks.”
- 8. Popular sites that use Ajax include Google Mail, Google Maps, and Flickr.
|
