Amit Kumar CSE-3rd year Roll no.

09119001052

What is AJAX ?
Asynchronous Javascript and XML. Not a stand-alone language or technology. It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. It is a client side technology.

Purpose of AJAX
Prevents unnecessary reloading of a page.
When we submit a form, although most of the page remains the same, whole page is reloaded from the server. This causes very long waiting times and waste of bandwidth. loading only the necessary information, and making only the necessary changes on the current page without reloading the whole page.

 The list which appears when we write a single letter in the search box is an example of AJAX

Classic web application

browser sends request to server (e.g. for a web page) server generates web page (html + css) as a response to the request

user does something

1 browser 2
http request

3 server-side systems

web server UI
html + css data

data stores backend etc.

5
browser replaces view with data sent from server

4
data is returned in response to the request
five stages of each interaction. Will unpack how this actually works later on.

From classic to Ajax

Ajax adds an extra layer of functionality on the browser, which helps manage the desktop / user interaction, and intermediates between what the user sees/does and the functionality of and data sent out by the server.

browser browser
JavaScript calls

server-side systems
request

UI UI

Ajax engine
html + css + xml data data mgmt

web server

data stores backend etc.

Desktop UI session management

How does this work? The next slides explain whats happing under the browser hood to support the Ajax approach.

whats inside a browser so this works? rendering engine -- takes HTML/CSS

What really happens under the hood of a classic browser.

browser

data and images, and knows how to format and display it.
request

HTML rendering engine

browser

UI
UI

HTML / CSS data

data

other data (e.g. images)

data stores. Browser knows how to save and manage data it downloads.

how it all works -1 User clicks on a link: rendering engine / browser sends of a request document. 3 Data comes back browser for a 2

4 Browser knows what to do with it and where to put it

5 HTML and CSS go to the rendering engine, which starts painting the screen. This engine also knows to send out more requests for images, needed in the page.

1 HTML rendering engine

request

4 HTML / CSS data 5

other data (e.g. images) 3
data

UI

E.g. http://www.bmo.com; http://www.flickr.com

Ajax: XML data, and a new tool

a new JavaScript function.. This lets JavaScript programs send out requests for data (images, XML, whatever) on their own, without waiting for a user click.
JavaScript programs can now go off and do their own thing, including getting data from elsewhere, without waiting for the user to do something!

browser

XMLHttpRequest() JavaScript Engine HTML rendering engine

request

UI

HTML / CSS data other data (e.g. images)

XML data

JavaScript code
data

XML data support. Browsers can now store XML data, and access / manipulate from JavaScript programs via the JavaScript engine.

Which brings us to Ajax

browser

XMLHttpRequest()

Ajax is a pattern for building JavaScript Engine applications on the browser. A The pattern is: C A Use JavaScript to control the show. XML HTML / CSS UI JavaScript Use it to asynchronously data data Code request and retrieve data from B remote servers, whenever the the Ajax other engine data (e.g. program thinks this is a good images) idea (i.e. not just when the user does something), B Use XML to send numerical or text-style data to the browser. Then use JavaScript to extract data from the XML,

C Use HTML and CSS for display: manipulate this using JavaScript.

A
control JavaScript

B
data XML, other formats (e.g. images)

HTML rendering engine

C
display HTML and CSS

From classic to Ajax redux

The Ajax engine

browser browser
HTML rendering engine

XMLHttpRequest()

html + css Engine JavaScript

JavaScript calls
HTML / CSS data other data (e.g. images)

server-side systems
request

UI

UI UI

XML data

Ajax JavaScript Code engine

Ajax engine

web server
html + css + xml data data mgmt

data stores backend etc.

Desktop UI session management

Technologies Used
AJAX uses:
Javascript (for altering the page) XML (for information exchange) ASP or JSP (server side)

Alternative Technologies
Not a technology, but a combination of technologies. Technologies with similar tasks: URLConnection, ASP and JSP Other technologies returns whole page and client loads it. Only necessary data is returned and that part is updated

XMLHTTP Object
The object that is used to connect to the remote server is called XMLHTTP. It resembles the Javas URL object that is used to access a specific URL and get the contents.

Creating the object

For IE 5.5: objXmlHttp=new ActiveXObject(Microsoft.XMLHTTP) For Mozilla: objXmlHttp=new XMLHttpRequest()

Sending information
After creating the object, we can send information to the web server and get the answer using this objects functions: GET METHOD: xmlhttp.open(GET, url, true) xmlhttp.send() POST METHOD: xmlhttp.open("POST", url, true) xmlhttp.send(date=11112006&name=Ali") Third argument tells that data will be processes asynchronously. When server responds, the OnReadyStateChange event handler will be called.

Retrieving information

We get the returned value with the property xmlHttp.responseText.

Pros/Cons
Advantages:
Independent of server technology. Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used. Permits the development of faster and more interactive web applications.

Disadvantages:
The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this doesn not hold. Possible network latency problems. People should be given feedback about the processing. Does not run on all browsers.