Basic Ajax Concepts

1

Basic AJAX Concepts

By, Vikas Patel.

2

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.

3

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.

4

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.

5

How does AJAX works?

6

7

An Ajax Interaction Provides Validation Logic

8

What is the code logic behind AJAX. \

• IFrame.

•Hidden Frames.

9

Examples an AJAX?

•GMail

•Google Maps

•Google Suggest

•Flickr.

10

XMLHttpRequest

A JavaScript class supported by most web browsersAllows 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 JavaScriptIssue

code to create an XMLHttpRequest object differs between browsers

can use a JavaScript library such as Sarissa (more detail later)

to hide the differences

11

XMLHttpRequest Properties

onreadystatechange - call back function for state changes readyState - the current state of the HTTP call

0 = onUninitialized,

1 = on Loading,

2 = onLoaded,

3 = onInteractive,

4 = onComplete 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

12

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);

}

13

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);

}

14

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

}

}

}

15

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;

}

16

THANK YOU