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?
also read:
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
- Ajax is a whole new approach to Web developMe : nt.
- Ajax stands for Asynchronous Java and XML.
- Mr. Jesse JaMe : s Garnett originally coined this acronym.
- Ajax code is written in JavaScript and uses DocuMe : nt Object Model (DOM)
objects and Cascading Style Sheets (CSS) concepts. - Ajax causes a browser to get updated without a full screen refresh.
- 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. - While an Ajax operation is “on,” the user can interact with the browser to
perform other “clicks.” - Popular sites that use Ajax include Google Mail, Google Maps, and Flickr.
AJAX – Conversation with an Ajaxain
Session 2: How Does it Work?
Scene: Late night at hoMe : ,browsing the Web
Me : (over internet chat) Hi A! got soMe : momnts 2 spare?
Ajaxian Yup, shoot.
Me : Let’s do voice.
Ajaxian In a momnt, will rch 4 my hdset
Me : (over voice) I was thinking more about Ajax after our last Me : eting. It’s a pretty cool technology coMe : to think of it.
Ajaxian Yes, but you need to understand it well. It’s not one of those oneshirt- fit-all strategies. There are soMe : limitations but we will deal with it later.
Me : Can we go through an example to get a better grip on this?
Ajaxian Sure. Let Me : whiteboard my screen so that I can show you soMe :
simple stuff. I hope you have sufficient bandwidth to support whiteboarding?
Me : (gulp, never tried it before) Yes.
Ajaxian OK. I have just pulled up a screen that shows a page from what looks like a University’s course site. Notice you have two buttons “Show Subjects” and “Show Schedule.”
Me : (This is brilliant, e-learning! ) Yes, pretty normal Web stuff so far.
Ajaxian True. In a regular Web application, clicking on “Show Subjects” would send the request to the server which would return a new page with the list of subjects under a new table. Right?
Me : Yes.
Ajaxian And similarly clicking on “Show Schedule” would send another similar request.
Me : Except it is different in Ajax.
Ajaxian Yes. In Ajax they still remain two different requests but with each request the page does not get refreshed.
Me : You earlier Me : ntioned that soMe : area of the page gets refreshed.
Ajaxian That’s correct. Notice the two sections below—Subjects and Schedule. This is the part where the screen would get updated by the Ajax request. Also, notice that the whole screen does not get refreshed when I click on the button “Show Subjects.”
Me : That was quick!
Ajaxian Two reasons. Firstly, this is running of my own PC so it better be quick. More importantly, what traverses between the server and the client is only subject information. And finally, the browser Me : rely renders this subject information on to the desired part of the screen.
Me : Yes, I am understanding this well.
Ajaxian Can you tell Me : how would you identify a part of the HTML page for updation?
Me : You Me : an which HTML tag I would use to create sections? I
guess it’s the DIV tag.
Ajaxian Correct. Are there other tags that would give Me : the ability to sectionize the page?
Me : There used to be the LAYER tag … Ajaxian That’s history. Not supported in the W3C specifications though many browsers support it for backward compatibility. Any other tag that you can think of ?
Me : Nothing else strikes Me : . We popularly have used DIVs in the
past.
Ajaxian What most developers do not realize is that every tag that has a content or label associated with it can be updated dynamically.
Me : Using JavaScript?
Ajaxian Yes, but by using the DocuMe : nt Object Model or DOM in short. Just as DIV is a popular tag, the contents of a cell, viz., the TD tag is the next most popular tag whose contents can be dynamically
updated using Ajax.
Me : Wow! So you Me : an that if I have a page where values are stored in different cells of a table, on receipt of an Ajax response I could take the values and update the respective cells of the table?
Ajaxian Well put.
Me : ( praise from the master, ahem! ) That Me : ans Ajax could change the way in which I design applications.
Ajaxian More appropriate would be it changes the way in which you design user interfaces since you have more dynamic ways to define behavior in comparison to the conventional navigation of Web pages.
Me : You were Me : ntioning that when I click on one server request, say on “Show Subjects,” the user is free to perform soMe : other operation.
Ajaxian Yes, like clicking on the “Show Schedule” button. Let Me : ask you a question. Which request is processed first?
Me : Logically, the one you clicked first. I would presuMe : that the server maintains soMe : sort of a stack of server requests and processes them in order.
Ajaxian You are wrong about this. Let Me : give you an example from the world of raMe : s. You know the support of fraMe : s has been around for quite soMe : tiMe : . AssuMe : you have a page with three fraMe : s. In what order would they get displayed?
Me : If it is a top-left-right styled page I guess first the top, then left and finally the right. That’s because that’s the order in which we define the tags.
Ajaxian Wrong. You are right about the order of tag definition but the order of the display is a pure function of the tiMe : it takes to refresh each fraMe : . Thus if the top part—which is often soMe : advertiseMe : nt in many sites—has to be retrieved from soMe : complex database, and if the rendering of the page is again
complex involving multiple images, you may well find that the left and right fraMe : of the page has appeared a few seconds before the top appears.
Me : Yes, yes. I have noticed it in many Web sites.
Ajaxian That is so because each fraMe : is a separate Web request that is processed and there is no such thing as an order of servicing Web requests by the server. In a similar fashion, each Ajaxian
request is a separate Web request that is processed by the server and the response is sent back to the browser page.
Me : So, in theory, the first request could be received after the response of the second request.
Ajaxian Yes, based on how complex the processing of the request is…
Me : Wouldn’t that cause confusion at the browser end? How would it know which request is being satisfied?
Ajaxian Good thinking son, but you are jumping the gun. Lets leave that for another day. An important thing to understand at this moMe : nt is that each request is a separate request and they are
asynchronous—Me : aning that the browser is free to be used by the user while it waits for the response.
Me : All this sounds exciting. So what are the advantages of using Ajax?
Ajaxian Based on what you understood why don’t you guess?
Me : Firstly, no page refreshes so I guess its quicker.
Ajaxian Its quicker for two reasons. One is that the processing on the server side is just working on the part to be refreshed. Using our example of Show Subjects, the code would Me : rely retrieve
the subjects from-say a database-and send it to the browser. Second, the JavaScript on the browser side would accept this data and update only the relevant part of the page.
Me : In applications where one input value needs to change the pick list of another value, this functionality would be useful.
Ajaxian Right. Like choosing a country to display the list of States, or choosing an area to display the list of restaurants.
Me : An outcoMe : of this is also that now our server-side code is a number of small snippets of code rather than one large amalgamation of small codes that go into a page.
Ajaxian Yes, that gives us two benefits. One is the reduced ripple effect
Me : (never heard of that) What’s that?
Ajaxian Where changes in one code affect other code. The second is that we are moving towards a more service-oriented approach to developMe : nt. Though I must admit that not all Ajax code is written as a service but the approach and design considerations are the saMe : .
Me : This has really got Me : thinking. I think its tiMe : to look at a sample code.
Ajaxian Not in this session, mate. Ciao.
KEY POINTS
- Ajax calls are used to submit a request to the server which sends the response back to the browser. The browser, then, parses the response and updates relevant portions of the screen using DOM objects defined by HTML.
- Ajax-based sites perform better for two reasons. One, being that on the server side, only the relevant data that need to be retrieved or updated are processed. In classical Web applications, other extraneous information on the page has to be refetched by server-side scripts. The second major advantage is that only that portion of the screen that needs to be updated is changed. Both help in better performance.
- In the past, fraMe : s has been an approach that the developers have taken to
separate a Web page into distinct parts. However, this is an outdated concept and has inconsistent performances across browsers. - Ajax has been found to be particularly useful when Web forms need a behavior where an input from the user on one field affects the values in another field; and these values have to be retrieved from the server. An example being, after selecting a country, the list of states in that country needs to be listed.
also read: