INTRODUCTION
Before we get in the learning details I would like to share a story with you all, It was 2009, very harsh times for all IT people in the world. The whole world is in its worst recession ever and its even worse for IT people all over the world. It was hard to keep the job we have and even harder for people to get an interview for a job. But, I luckily managed to get an interview with one of the IT companies here in VA. I thought I was lucky and intelligent enough to get an interview scheduled, but Later I decided was all wrong.
The only question I was asked is what is difference between AJAX an JavaScript. I was a big fool back then, i didn't know the difference but I tried to come up with an answer but I was totally wrong and like you all are guessing I didn't get through the Interview. But the good thing is that I got fired up and thought I wanted to know all about AJAX.
I wanted to share my experiences with you all the easy processes I found over the course of learning AJAX. This course is divided into 10 Parts which will discuss everything in detail. Please leave comments or suggestions about these posts.
Without any further delay lets Jump into Part 1
HISTORY
In the early days of web applications and desktop applications that used internet (Web 1.0 times) for data processing the user has to wait for the server's response and the web page used to flash once before it displayed the result. For example, if the user is filling in a registration form for his flight, after filling in his/her information he/she needs to wait till the application talks to the server and get a result for him/her. Which was good for few year until Google really took the idea of Web 1.0 to Web 2.0 (a whole new leap forward in the web technology).
This is where AJAX came into picture and changed the way how we see the Web. Very good example for AJAX at its best is Google Maps and Google's Instant Search which gives you search results while you were typing.
What actually happens is that Google get the "text_changed" event on the search box and uses AJAX to get the results for the user instantly. Since we know what the result would look like if we use AJAX, lets get into the tricks and great things AJAX can do for us and for our applications (either web or desktop).
The only and very important object that should be understood to learn AJAX is XMLHttpRequest. This is a simple javascript object which can be instantiated as below
var request = new XMLHttpRequest();
This is a very simple javascript object, but the AJAX capabilities comes into picture on where and how we use this object. Usually when a user is filling a form and click on a submit button the data is taken from the form and then sent to the server to process, once we get some result from the server the screen flashes and goes to the next page. This is where AJAX comes into picture. Instead we sending the data directly to the server, the data is sent to the javascript object and then to the server. while javascript talks to the server and gets a result for the user the screen doesn't flash and the process is more seamless, which can be called as Web 2.0. With out the user intervention, javascript code talks to the server and gets the data which can be shown directly to the user or can also be used to do some further processing by some javascript code on the client machine. Everything is done without the user noticing any kind of flash screens etc. That is the power of XMLHttpRequest.
Adding some spices
Once you have the XMLHttpRequest do its magic we can do basic stuff like
-- Get form data (raw data from the server)
-- Change values on the data that we got from the server
-- Parse HTML and XML (see next chapter)
we will talk about the third point later in the next chapter, and to be able to do first and second we have to make ourselves familiar with "getElementById()" method. This method can be used to get or set values.
Which can be used as below
//Get the value of nameTextBox and save it to "name" variable
//here nameTextBox is the id property of a textbox
var name = document.getElementById("nameTextBox").value;
//Set some values from the response to the controls, here response is an array
document.getElementById("nameTextBox").value = response[0];
document.getElementById("phoneTextBox").value = response[1];
Once you have a clear understanding on XMLHttpRequest, the rest of the code is just raw javascript.
STAY TUNED....