Introduction to AJAX

·         Hmm... very interesting topic now i.e. AJAX.

·         First of all, what is AJAX????

·         AJAX = Asynchronous JavaScript and XML.

·         AJAX is a technique for creating fast and dynamic web pages.

·         It is a group of interrelated web development techniques used on the client-side to create interactive web applications.

·         With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing pageAJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

·         Data is usually retrieved using the XMLHttpRequest object.

·         Like DHTML and LAMP, Ajax is not a technology in itself, but a group of technologies.

·         Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

·         Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

How AJAX works???

Here is how the usual AJAX script goes:

• Some action triggers the event, like the user clicking a button.
• The AJAX call fires, and sends a request to a server-side script, using XML
• The server-side script (PHP, ASP, or whatever) takes the input from JavaScript, can access the database if it needs to, and processes the data.
• Using XML again, the script sends the data back to the original client-side page that made the request
• A second JavaScript function, called a callback function,catches the data, and updates the web page

Example:

If you've used the Gmail Web client or Google Maps you probably noticed that you can scroll over the map or spell check the typed text, respectively, without page submits. AJAX, the technology behind this behavior, handles the requested operations in JavaScript and asynchronously invokes the server-side operations that provide the desired results.

BROWSER:

An event occurs.

Create an XMLHttpRequest Object.

Send Http request.

|

INTERNET

|

SERVER:

Process Http request.

Create a response and send data back to the browser.

|

INTERNET

|

BROWSER:

Process the returned data using javascript.

Update page content.

AJAX is Based on Internet Standards:

AJAX is based on internet standards, and uses a combination of:

• XMLHttpRequest object (to exchange data asynchronously with a server)
• JavaScript/DOM (to display/interact with the information)
• CSS (to style the data)
• XML (often used as the format for transferring data)

      AJAX applications are browser- and platform-independent!

Comparison between the traditional method of calling the Web page from the server and AJAX methodology:

Traditional WebPage Call:

·         User interacts with the webpage to perform its operation.

·         The request is submitted to the Web Server along with the information user wants.

·         Server checks for the details and might require to interact with the Database and finally returns the response to the browser.

·         Browser displays the user response details in the form of refreshing the webpage.

Traditional WebPage Call

·         User has to wait until the page reloads .

·         User can perform only one action at a time.

AJAX come to the rescue:
With AJAX user can fetch the data from the server without refreshing the whole page. During AJAX call following steps are followed:

·         User interacts with the web page to perform its operation. At this point your webpage internally through JavaScript calls a remote file and the user data is passed through GET/POST method.

·         The web server receives the request processes it and send the data back to the client browser.

·         At this point the web page is not reloaded and the browser JavaScript engine is waiting for the response from the web server.

·         The web page gets the response from the server and dynamically through JavaScript displays the content fetched from the server.

Advantage of using AJAX:

·         Make multiple AJAX calls with different request from the same page.

·         Instant result.

·         Not to wait for the page to get reload.

This was only the introduction of AJAX...we will study in detail the terms used in this post lyk XMLHttpRequest in later posts..