AJAX for beginners - what it is and how it evolved

Today's websites or web pages are very complex structures involving several components. It can be daunting for a beginner to understand it all at once. To ease the process let's break things down and see how the various pieces fit together.

At the core of web pages is the HTML. It is the language that browsers understand and it is what web developers use to showcase rich content. Without HTML all our web pages would have been simple text files. Now I assume that you are aware of HTML and how it is used in web pages. Another critical piece that works closely with HTML is CSS, but we can skip that one for now.

Plain HTML web pages are pretty dull. They are not really interactive. What they mainly have apart from text are :

1. Some formatting information which tells the browser how to show the contents.
2. Some media content like images or videos.
3. A bunch of hyperlinks which lead to other similar web pages.
4. In slightly evolved pages there would be forms which allowed a user to send data back to the servers.

It is the third one which helped form this "web" of pages which we call the Internet. How do these links work? Pretty simple actually. Each link typically points to a web page on a server. Whenever a user clicked on a link, the browser would fetch that page, remove the existing page and show the newly downloaded one. Some times the link could point back to the same page in which case clicking on it would just "refresh" the existing page. We all know about the refresh/reload button in the browsers don't we?

There are a few things to note here.

1. These basic web pages were dull in the sense that they were not interactive. They did not respond to user actions except for clicks on links, in which case the existing web page goes away and a fresh page is loaded.
2. When a link was clicked the browser would decide to send a request to the server. The web page itself did not have much control on when the request should be made.
3. When the browser was making a request in response to a link click, there was pretty much nothing you could do with the web page until the request completed. Every request to the server blocked the entire page and if there were multiple requests that had to be made it had to be sequential, one after the other. A fancy technical word to describe this would be "synchronous".
4. An obvious observation is that the data that came from server in response to request from a browser was HTML, as in the data and information on how to display that data were sent back from the server all the time.

While the fourth point appears as not such a big problem, the first three are definitely limitations.

To work around the first problem browser developers came up with JavaScript. Browser folks told web developers that they can make their web pages interactive and responsive to user actions by writing code to handle those interactions in this new language called JavaScript and including it in the web pages. Web developers could now write different pieces of code to handle different user actions. The browser provided a few functions (aka APIs) in JavaScript which the web developers could use to make changes to the web page. This API is called DOM (Document Object Model). Thus web pages became interactive and responsive.

The second and third limitations still existed however. The only way to request data from server was through links or in case of evolved pages through forms. Also the web page was one single unit. Whenever something had to change the whole page had to be reloaded. Imagine something like that with your gmail page. How would it be if the page refreshed every time you received a chat message or worse every time one of your contacts logged in or out of chat? That would be disastrous. The fate would be similar of something like a sports website in which the small corner showing the score needs to be updated a lot more frequently than the rest.

To solve this some people thought of iframes as a solution. Iframe is a HTML tag inside which you can put another HTML page. Now with this arrangement the inner page could be reloaded without affecting the outer page. So the sports website could now put the score part in an iframe and refresh it without affecting the rest of the page. Similarly gmail could break up its page into multiple iframes (It actually does this in reality, but it also does a lot more than this).

With iframes the "synchronous" problem was somewhat solved. Multiple requests could now be made in parallel from a single web page. However the method of making the request largely remained the same, using links or forms. It was either not seamless or almost impossible to make requests in any other manner, like say whenever user typed something (like Google search). Now let's see what all capabilities we have on top of the basic web pages.

1. Web pages can respond to user actions. Some code can be executed on various user actions made on different parts of the page.
2. This code can modify the web page using DOM.
3. Browsers are now capable of making multiple requests in parallel without blocking the web page.

The browser folks now combined these abilities thereby allowing web developers to make requests to servers in response to user actions using JavaScript. These requests could be made in parallel without blocking the page i.e. Asynchronously. Now when the response came back the same JavaScript code could add the HTML received in the response to the existing page using DOM.

The developers went a step ahead and said "why receive HTML every time? In most cases the formatting or presentation information is already there in the web page. What is needed is only new data or content (For example, in the sports website example, all that is needed is the updated score. Information on how to show that score is already present in the web page). So instead of fetching HTML every time let's just fetch data to make things much faster and efficient". And back then the most popular way of representing data in a structured manner was XML. So developers started receiving data in XML format from the server and using that to update the web page. XML was so popular that browsers added support for automatically parsing XML data received in response to these requests.

This approach of making requests and updating parts of web pages became very popular and was much widely used. Since this was predominantly used to make requests over HTTP (The protocol of the web) to fetch XML data this technology was called "XMLHttpRequest" (Internet explorer called it something different, it probably still does).

What all does this XHR offer?

1. Making requests "Asynchronously"
2. Making requests from "JavaScript"
3. Making requests for "XML"

Put together it forms "AJAX - Asynchronous JavaScript and XML".

Notes :

1. Several things have been simplified here as this is aimed at people new to web development and Ajax in particular. This should nevertheless give a good starting point.
2. References to XML should be read as " something other than HTML". Nowadays XML has been largely replaced by JSON because of several advantages.
3. XMLHttpRequest does not necessarily mean making asynchronous request. It supports making synchronous requests also. But I don't know if there is a good reason to do it. Making a sync xhr will block the entire page until that request is complete. Really don't do that.

Aren't you proud to be a programmer?!

Read this: Lucky to be a Programmer : Gustavo Duarte

This blog was circulated in my organization and it is really awesome. This is something every programmer/software engineer must read and really be proud about the work they do. Of course everyone must be proud about the work they do, if they are really doing what they love. Now that's a totally different argument about following one's passion and doing something else for money. May be someday I will have a write up about that. As of now, the blog post linked here in itself is pretty long and I do not want readers to be tired by the time they finish my "introduction" ;-).

Go ahead and read that one.

Regards,
Brahmana.

Learning from others project --- One big opportunity at VTU

VTU students are very aware of the way final year projects are done. I having completed my bachelors, am fully aware of the practices for the 8th sem project. But it appears that the same thing happens with our post-graduate students also. And this realization was made possible by none other than loafer Sethji . It was his brother's (elder of course) M.Tech final sem project. Sethji arranged (bought, actually) for a network based project. The project was about "Frame Relay Networks". The people who sold the project are not some scientists. So there document also had a lot of similarity with Wikipedia (no wonder). The code wasn't really that complex as it was Java (managed programming). Its not these technicals because of which I am writing here. Its the learning that the project gave me in course of me trying to stuff the concepts through the heads of setu, so he could eventually pass on the knowledge to his brother.

Not that Setu is a bad or slow learner, but the process took more time than I initially expected. Initial explanations by him made me think that things are pretty simple. Some of my initial assumptions about a few things being hard-coded did turn out to be true. But I never understood why anything like this was required. After some 3 hours of googling, reading and other eye/brain straining exercises I finally got some things stuffed into my head first, which were subsequently passed on to setu. As of now I assume that he has got hold of the concept, but I am not entirely sure what he will explain to his brother as he already seems to be pissed off with working on his brother's project (which is totally fair considering that fact that he himself worked for 3 days on his own final sem project).

Whatever the story or the background or the future might be, I must be thankful to Setu's brother for having made Setu get a project without which probably I would never have know what a "Frame Relay" is. Now about the technicals of the concept/project I have another post on another blog with a set of links to articles/documents from where I read about it and a bit of my own documentation for the laymen (aka me).

Now whats interesting about such practices is the opportunity that it provides for opportunists. In this case I happen to learn about this technology when I was no where near it from any angle. There will be many such opportunities, its just a matter of cashing them. This dialog from a Hindi movie makes perfect sense here: "Har minute ek bakra paida hota, aur two usko halaal kane ke liye" which essentially means for every dumb guy out there there will two others ready to exploit.

If there are guys waiting for someone to help them, there will be someone ready to make him a cash cow. So quickly decide what you want to be.

Need of Exposure To Open Source Community

Ever since I have been associated with Mozilla community I have been interacting with a lot of people involved in the development of the Mozilla products, mainly Firefox web browser. I have learnt so many things from the community and have interacted with several extremely modest people who despite being extremely knowledgable and busy too, often helped me with my stupid questions. And in several occasions I see people younger than me who are so bright and have contributed much more than what I have done. All these situations just keep reminding me that no matter how much of Computer Science I know, how much of coding and design I have done there is still so much to learn and there are a lot of people who are simply better than me. The second part especially motivates me and always keeps ringing in my head in case I start thinking big of myself. Not that I am boasting about myself, but it’s true that I was a pretty good programmer back in the college. I was one guy who did a few things others did not do or others did not consider doing, though there were several who were way ahead of me in knowledge and intelligence and had much more capacity than me. Basically I am trying to say that I was somewhat good amongst the guys in the college. And this had given me a feeling of satisfaction (to some extent) that I have indeed learnt something and achieved something. I knew that a lot of real good punters lurked around in the open source community through my frequent visits to IRC. That to some extent kept me glued to earth and prevented me from being complacent. But I always carried around a thought that I am some good.

That was clearly a crappy thought. And it became more and more clear when I was formally involved with an open source community and interacted with the folks there more and more. I, like any beginner in the community (Mozilla community), had several things to learn during the initial stages and always had a lot of questions. Probably in my case it was a little more than any other beginner. Luckily I had several people in the community helping me out and always ready to answer my questions. Whenever I came across a new nickname in any channel I am observing I would just try and find out more about the person. That way I got to know about different people pretty well. I came across people who have been there right from the time Mozilla originated or even before when it was still NetScape. But none of them carried any air of pride and were very modest all the time. The credentials of the person answering my question used to be so high that I often feared asking anything thinking that I would just get some scolding for putting in a silly question. But such a thing never happened. Be it a regular developer or QA guy, employed or a volunteer, young or old, they all helped me. It’s not just the modesty, but their technical knowledge also is worth speaking. They were so precise, they considered situations that never occurred to me, they thought of performance, usability and several such things simultaneously and every word of theirs carried weight, every bit of it was informative. Sometimes things went way above my head and I had to ask them to explain the same things again and again and in simpler words. They did that almost every time. If I was not ready to understand what they were talking about someone would point me to a nice document which would clearly explain me the basics, after reading which I could understand the discussion easily.

All these things always told me one thing: World is really big and it has some really big people, so be modest and be ever receptive. This means that there are a lot of heights yet to be scaled by anyone and hence one should never stop learning because there is always something new to learn. It is in this OPEN SOURCE COMMUNITY that I realized what computer science and programming is. It is because of the PEOPLE IN THIS COMMUNITY I realized that there is so much to learn. If not for this community I would probably have been a complacent guy who would have shut his doors for new knowledge and considered himself a "GOOD PROGRAMMER". Thank you OSS.

That is why I would say that exposure to the open source community and affiliation with one of those is mandatory for any computer science student who aims at being a successful and worthy programmer. It is here people will get a look of the ocean named programming and the several software applications that are churned out continuously. I hope this becomes the order of the day very soon and every computer science student will learn programming real world applications right when he/she is in college. This would also lead several success stories coming from our Indian academic institutions and we will be leaders, intellectually, once again.

Jai Shree Yalaguresh Prasanna.
Hari Om.

IBM Internship: Part I: The Interview

This is the second post regarding my internship at IBM. Since the prologue did not contain any information about my interview here is a bit about it. It was my first corporate interview and I guess I did fairly well. Before the interview I went out with a buddy to get print outs of my resume. He was one of the volunteers coordinating the selection procedure. He revealed to me that the IBM folks were selecting just about 3 or 4 students. This was certainly not welcoming information and it brought some concerns.

I did not top the written test and hence I was later in the list. So I watched people go in and come out at an interval close to 20 minutes. Pals like SI shared questions and even suggested answers. A couple of those finished their interview came out jumping, literally, and were totally sure that they were in. This raised certain doubts in my mind. I started imagining scenes where I and a few others would be just sent back without even being interviewed. Luckily IBMers were pretty patient and nothing like that happened. And then came my turn. I went into that same interview hall, which our senior Harish Bhai had shown as a place where he got his job.

A person named Suresh interviewed me. He started with typical questions which SI had told us earlier outside. The first one was the television and the remote control question, where in I was asked to design a system which will enable interaction between the two devices, just the object oriented (OO) software (no hardware details). My design was a little ok I guess. Then he went on to as me about some other design questions closely related to OO. Then it was my college and CSI senior Gautham Pai, who in a way is one of my gurus, who interviewed me. He looked at my CV and started asking me about the paper that I and my friend Ashwin had presented. We divulged into several discussions regarding authentication and authorization and how they differ and all that. It was all good and smooth. Then finally I was asked about the UNIX style access control system.

With this came an end to my first interview and nearly a 45 minutes wait to the next candidate. It was a good experience for me as my performance was satisfactory to me. This was confirmed when the list of selected students was announced and my name was the first. The first thing I did was, obviously, to run to the phone booth and inform my parents. Well I had officially started earning and 12K per month was a good enough deal to be happy. :-) After that I called Doddappa and a few others to inform them about the beginning of this success.

After this followed verbatim recitation of my interview and casual talks and finally the PARTY. More about the party and other happenings in another post. After all, Success Story has just started. ;-)

IBM Internship -- The Prolouge

Internship @IBM - The first productive period of my Engg student life.

THE PROLOUGE

The title clearly states that till this internship I have not done anything productive. On the academic front it was bound to happen considering the way college was being run, the competence of the people who imparted knowledge and the way exams were conducted. Had I been dependent just on these things then probably all that I would have been is a book-worm. But thank god, there is this world of open-source software which saved me. Thanks to a few seniors, a few peers and partly also my ego, a fire to learn things beyond the books was kindled and I started "wasting" my time on things not present in our textbooks. But it was all learning, a one-way traffic. It was never reflected back in any achievement. Though I and my friend Ashwin Biyani came up with a paper, we both know what research (re-search) we did for that paper.

I do not know what held me from doing anything. It was my laziness or probably lack guidance. But neither of these are reasons worth mentioning. All that matters is the outcome and what can be present in "white and black" and there was no such thing in my case. We did have certain failed attempts though. After our 4th sem we stayed back in holidays and learnt HTML. Of course the plan was to further continue it and come up with a project which of course did not succeed. Then probably in 5th sem, we tried joining GNOME, Bangalore with projects like Mono or Evolution. Again that too failed. We did try to knock the doors of Novell but backed out later, just because of laziness and lack of josh and passion.

It was so until the middle of 6th sem. I was at our university hockey tournament at Tumkur (I guess it was Tumkur). At the end of first half of first day we had won our first match against PESIT and were to play our second match later that day. It was a little late in the evening and we were getting thoughts that we will not be playing our second match that day as the first round was still going on. Around this time I got know (I do not remember how, I did not have a cellphone with me back then) that the very next day IBM-ISL was visiting our college for offering internships. I was a little disappointed considering that I will have to travel and reach hostel that night and the very next morning I would be attending the test and hopefully the interview also. I hurried without informing all of my teammates. Kushal, the team captain, was pretty reluctant and tried retaining me for the rest of the tournament. He said "VTU Cup maga". I said "Nanna career Maga" and he said no more. (I now realize that I was absolutely correct about what I said. This internship did shape my career as a s/w engineer.)

When I reached hostel I could feel the heat of the next day's test by seeing all my able friends gummed tight to OO - related books, mainly C++ ones. (It was revealed by a senior interning at IBM that selectors would concentrate on OO concepts) There were few BOOs and WOOs when people saw me back, as I guess they were expecting me to miss this internship opportunity. I was a bit tired because of the game and the journey. But I had to hold the books and I did. I started with Herbert Schildt's C++ and I started to realize that there is so much in C++ that I do not know. But this attempt for last moment preparation was in vain as I was very sleepy. I do not remember much about that night, but I am sure I would have had a few discussions with friends, both technical and non-technical. I would have narrated the hockey match and finally when we realized we were wasting time, few punters would have gone back to books and I would have gone to sleep.(of course with some hope - which I always like to carry)