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 environ.

Me : 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.

Comments

comments