AJAX

and AJAX Frameworks

By
Anupama V
S7 CS
Roll No. 17
 CONTENTS

 Introduction
 Dissection
 AJAX requirements
 XHR
 Browser dependency
 AJAX Frameworks
 Direct Ajax Framewoks
 Indirect Ajax Frameworks
 Advantages & Disadvantages
 Conclusion
 References
 Introduction

AJAX is not a new programming language of any kind.

AJAX is a web development technique to create highly responsive and

interactive web applications.
 Introduction

The best example : Google Search

 Dissection

AJAX

Asynchronous JavaScript XML

 Failed E-Mail Registration
The Non AJAX Way

User enters the user details into the form

User presses the register button

Form details are sent to the validation page

Validation page : Username already exists

User back to filling the form again and pressing register button
until he succeeds.
 Failed E-Mail Registration
The AJAX Way

User enters the username

AJAX request made to the validation servlet

AJAX updates the DOM notifying the user of its existence

User can try another and will be notified of its existence while
typing.
Yahoo! E-Mail Registration
The AJAX Way
 What is happening ?
The Non AJAX Way

Serv
For Serve
er
m r Side
Script resp
Data
onse
 What is happening ?
The AJAX way

Server Side
Script

Form data sent Response received

Web page

The data being sent and response being received all happens in the
background asynchronously
 AJAX Requirements

HTML/XHTML and CSS for presentation

Document Object Model for dynamics

XML for data exchange (not compulsory)

XMLHttpRequest object for asynchronous communication

JavaScript for bringing these technologies together

 XMLHttpRequest (XHR)

It’s a browser API, that allows the making of asynchronous requests

It is used to send HTTP request directly to the web server

Response is loaded back into the script itself

Data can be XML or any piece of text

Used in GMail, Google Maps, Facebook etc…

 XHR Process

Initialization of the object with the open method

Set the request header that describes the characteristics of data being sent and
received

Send the request with the send method

Monitor the Ready State with onReadyStateChange event listener

When response is ready, update the DOM

 XHR Request Example
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
 Browser Dependency

XHR varies in usage from browser to browser.

XHR object creation varies across browsers

JavaScript must check for the browser type and create the object
appropriately

To ease the job of writing AJAX application we use AJAX frameworks

 AJAX Frameworks

Mainly classified into two categories

Direct AJAX Framework Indirect AJAX Framework

 Direct AJAX Frameworks

Requires HTML, CSS and JavaScript expertise

Direct AJAX simplifies the process of making AJAX requests and handling responses

It creates cross-browser AJAX applications by providing a common API for all

browsers

For example in the jQuery AJAX framework, a form data can be posted by
invoking the post method provided by it.

It automatically creates XHR objects for the particular browser and makes the AJAX
call.

Direct AJAX Frameworks are accompanied by pre built components commonly used
in AJAX applications like Sugges List, Tabbed Pane, Calendar etc…
 jQuery
Tabbed Panes
jQuery
Date Picker
jQuery
Suggest List
 Indirect AJAX Frameworks

They allow programmers to write AJAX applications in High Level

Languages such as Java

It automatically converts it into JavaScript

It relies heavily on compiler technology

It eases the web development process when this high level language
coincides with the server side language

Example : Google Web Toolkit

All google applications including Search, Mail etc… are created using
GWT
 Advantages & Disadvantages

AJAX enables the creation of highly interactive and responsive web

applications, but are hard to develop

AJAX applications cannot be debugged easily

AJAX application supports heavy dynamics but its hard to bookmark

a particular state

Its hard to implement the traditional “back-button” behaviour

AJAX requests can be made only to the same domain due to single
origin policy
CONCLUSION
 References

 http://en.wikipedia.org/wiki/Ajax

 http://www.w3schools.com/Ajax/Default.Asp

 http://java.sun.com/developer/technicalArticles/J2ee/AJAX

 http://computer.howstuffworks.com

 http://en.wikipedia.org/wiki/Ajax_framework