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

• 1. 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.
• 2. 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.
• 3. 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.
• 4. 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.

Comments

comments