AJAX Tutorial

AJAX, shorthand for Asynchronous JavaScript and XML, is a web development technique
for creating interactive web applications.
AJAX meant to increase the web page's interactivity, speed, and usability.
If you know Javascript, HTML, CSS and XML then you need to spend just one hour to
startwith AJAX.

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for
creating better, faster, and more interactive web applications with the help of XML,
HTML, CSS and Java Script.

Ajax uses XHTML for content and CSS for presentation, as well as the Document Object
Model and JavaScript for dynamic content display.

Conventional web application trasmit information to and from the sever using
synchronous requests. This means you fill out a form, hit submit, and get directed to a
new page with new information from the server.

With AJAX when submit is pressed, JavaScript will make a request to the server,
interpret the results and update the current screen. In the purest sense, the user would
never know that anything was even transmitted to the server.

XML is commonly used as the format for receiving server data, although any format,
including plain text, can be used.

AJAX is a web browser technology independent of web server software.

A user can continue to use the application while the client program requests information
from the server in the background

Intuitive and natural user interaction. No clicking required only Mouse movement is a
sufficient event trigger.

Data-driven as opposed to page-driven

AJAX Is Based On Open Standards

AJAX is based on the following open standards:

Browser-based presentation using HTML and Cascading Style Sheets (CSS)

Data stored in XML format and fetched from the server

Behind-the-scenes data fetches using XMLHttpRequest objects in the browser

JavaScript to make everything happen

Technologies Used in AJAX

JavaScript

Loosely typed scripting language

JavaScript function is called when an event in a page occurs

Glue for the whole AJAX operation

DOM

API for accessing and manipulating structured documents

Represents the structure of XML and HTML documents

CSS

Allows for a clear separation of the presentation style from the content and may be
changed programmatically by JavaScript

XMLHttpRequest

JavaScript object that performs asynchronous interaction with the server

AJAX Examples

Google Maps
A user can drag the entire map by using the mouse instead of clicking on a button
or something

http://maps.google.com/

Google Suggest
As you type, Google will offer suggestions. Use the arrow keys to navigate the
results

http://www.google.com/webhp?complete=1&hl=en

Gmail
Gmail is a new kind of webmail, built on the idea that email can be more intuitive,
efficient and useful

http://gmail.com/

Yahoo Maps (new)

Now it's even easier and more fun to get where you're going!

Steps of AJAX Operation

1. A client event occurs
2. An XMLHttpRequest object is created
3. The XMLHttpRequest object is configured
4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
5. Webserver returns the result containing XML document.
6. The XMLHttpRequest object calls the callback() function and processes the result.
7. The HTML DOM is updated
XMLHttpRequest

The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet
Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk
about AJAX and Web 2.0 in 2005.
XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other
web browser scripting languages to transfer and manipulate XML data to and from a web server
using HTTP, establishing an independent connection channel between a web page's Client-Side
and Server-Side.
The data returned from XMLHttpRequest calls will often be provided by back-end databases.
Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even
plain text.
You already have seen couple of examples on how to create a XMLHttpRequest object.

Below is listed some of the methods and properties you have to become familiar with.

XMLHttpRequest Methods

abort()
Cancels the current request.

getAllResponseHeaders()
Returns the complete set of HTTP headers as a string.

getResponseHeader( headerName )
Returns the value of the specified HTTP header.

open( method, URL )

open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )
Specifies the method, URL, and other optional attributes of a request.
The method parameter can have a value of "GET", "POST", or "HEAD". Other HTTP
methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be
possible
The "async" parameter specifies whether the request should be handled asynchronously
or not . "true" means that script processing carries on after the send() method, without
waiting for a response, and "false" means that the script waits for a response before
continuing script processing.

send( content )
Sends the request.

setRequestHeader( label, value )

Adds a label/value pair to the HTTP header to be sent.

XMLHttpRequest Properties

onreadystatechange
An event handler for an event that fires at every state change.

readyState

The readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
State

Description

The request is not initialized

The request has been set up

The request has been sent

The request is in process

The request is completed

readyState=0 after you have created the XMLHttpRequest object, but before you have
called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but
before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been
completely received from the server.

responseText
Returns the response as a string.

responseXML
Returns the response as XML. This property returns an XML document object, which can
be examined and parsed using W3C DOM node tree methods and properties.

status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").

statusText
Returns the status as a string (e.g. "Not Found" or "OK").

Current Issues with AJAX

AJAX is growing very fast and that is the reason that it contains many issues with it. We hope
with the passes of time they will be resolved ab AJAX will be ideal for web applications. We are
listing down few issues which AJAX has as a challenge.
Complexity is increased

Server side developers will need to understand that presentation logic will be required in
the HTML client pages as well as in the server-side logic

Page developers must have JavaScript technology skills

AJAX-based applications can be difficult to debug, test, and maintain

JavaScript is hard to test - automatic testing is hard

Weak modularity in JavaScript

Lack of design patterns or best practice guidelines yet

Toolkits/Frameworks are not mature yet

Most of them are in beta phase

No standardization of the XMLHttpRequest yet

Future version of IE will address this

No support of XMLHttpRequest in old browsers

Iframe will help

JavaScript technology dependency & incompatibility

Must be enabled for applications to function

Still some browser incompatibilities

JavaScript code is visible to a hacker

Poorly designed JavaScript code can invite security problem