Basic AJAX Concepts

By, Vikas Patel.

1
 What is an AJAX?

 Asynchronous JavaScript And XML.

 AJAX is compose of HTML, XHTML, CSS, JavaScript, XML.
 Ajax is not a technology, not a framework, But they brought a

different way to use old technology with new ideas in group.

 So here XHTML and CSS can be used for presentation and changing
the content of an element at run time, once we got response from the
server.
 XML, can be used to manipulate the response.
 JavaScript, It will bind script together. Making avaibility of
XMLHttpRequest object. Which is a backbone of AJAX.

2
 Benefits of an AJAX?

• Allows user to continue interacting with web page while waiting for
data to be returned
• Page can be updated without refreshing browser
• Results in a better user experience
• There are AJAX libraries that reduce the amount of JavaScript code
that must be written
• Increase Usability of Web Applications
• Rich Internet Applications without animation tools.
• Save Bandwidth
• Download only data you need.
• Faster Interface.

3
 Lack of an AJAX?

• Break Back button support.

• URL's don't change as state changes
• Cross Browser issues can be a pain.
• Can't access domain other than calling domain.
• Debugging is difficult.

4
How does AJAX works?

5
6
An Ajax Interaction Provides Validation Logic

7
 What is the code logic behind AJAX. \

• IFrame.

• Hidden Frames.

8
 Examples an AJAX?

• GMail
• Google Maps
• Google Suggest
• Flickr.

9
 XMLHttpRequest

A JavaScript class supported by most web browsers

Allows HTTP requests to be sent from JavaScript code
to send multiple, concurrent requests,
use a different XMLHttpRequest instance for each
 HTTP responses are processed by “handler” functions
in client-side JavaScript
Issue
code to create an XMLHttpRequest object differs between browsers
can use a JavaScript library such as Sarissa (more detail later)
to hide the differences

10
 XMLHttpRequest Properties

 onreadystatechange - call back function for state changes

 readyState - the current state of the HTTP call

 responseText - the text result of the request

 responseXML - DOM xml object from the request
 status - HTTP status code of the response
200 = OK
 statusText - HTTP status text

11
 XMLHttpRequest Example

if (window.XMLHttpRequest) {
var req = new XMLHttpRequest();
req.onreadystatechange = requestStateHandler;
req.open("GET", "/somefile.xml", true);
req.send(“”); //null
}

function requestStateHandler() {
if (req.readyState == 4) { //response ready
alert(req.statusText);
}

12
 XMLHttpRequest Example

var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = requestStateHandler;
req.open("GET", "/somefile.xml", true);
req.send(“”); //null
}

function requestStateHandler() {
if (req.readyState == 4) { //response ready
alert(req.statusText);
}

13
 XMLHttpRequest XML Response
<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
</ratings>
function requestStateHandler() {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
for (var x=0; x<showElements.length; x++) { // We know that the first child of
show is title, and the second is rating var title =
showElements[x].childNodes[0].value;
var rating = showElements[x].childNodes[1].value;
// Now do whatever you want with the show title and ratings
}
}
14
}
 Cross browser AJAX

var req;
function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
15
}
THANK YOU

16