WebOSS ‘07S Pradeep

Building

Applications

using AJAX

What is AJAX?

� AJAX = Asynchronous JavaScript And XML

� Is a web development technique used for creating faster, interactive web applications.

Who uses AJAX?

� Google maps

� Gmail

� Google Suggest

� Flickr

� del.icio.us

� Meebo

� and many more…

How AJAX is different

Need for AJAX

� To increase web's interactivity, speed and usability

� Issues with classic web applications

* Almost all processing is done on server

* High latency

* Low interactivity

Benefits of Using AJAX

� Enhance your sites by allowing quicker access to data.

� Reduce the amount of bandwidth used in data presentation.

� Make a web application that feels more like a native application.

AJAX Workarounds

� Hidden IFRAME

� <SCRIPT> src hack

� Cookies

Where to use AJAX

� Anywhere you have a search box, adding Google suggest functionality.

� Pages where you have a multi-step process.

� When working with large or highly interdependent datasets.

Simple Ajax Application : How To

� Create a request object

� Make the request

� Handle the response

Create a request object

if browser is mozilla or safari or opera then

create a new XMLHttpRequest

otherwise if browser is IE

create a new ActiveXObject

otherwise

error - browser does not support XMLHttpRequest

� IE 5,5.5,6 implement XHR as an ActiveX object (Msxml2.XMLHTTP/Microsoft.XMLHTTP)

� Mozilla 1.0+, Safari 1.2+, Opera 8+, IE7 provide XMLHttpRequest natively.

� All XHR objects have the same methods and properties.

Code

var xhr = null;

if(window.XMLHttpRequest) // Mozilla,Safari, etc.

{

xhr = new XMLHttpRequest();

}

else if(window.ActiveXObject) // < IE 7

{

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

Else

{

alert('Oops! Your browser does not support XMLHttpRequest');

}

XHR Methods

� open(‘method’,’url’,asyncFlag)

� send(content)

� abort()

� getResponseHeader(“header”)

� setRequestHeader(“header”,”value”)

XHR properties

� onreadystatechange

� readystate

� responseText

� responseXML

� status

� statusText

Make the request

� set onreadystatechange to callback function cbProcessResponse

� open a request on the XHR object

� send the request through the XHR object

� “Same Site” rule

� “GET” or “POST”

� Asynchronous flag

Codexhr.onreadystatechange=cbProcessResponse;

xhr.open(’GET’,‘ajax.php’,true);

function cbProcessResponse()

{

if(xhr.readystate==4 && xhr.status==200)

{

alert(xhr.responseText);

}

}

/* readystate values

0 -> uninitialized

1 -> loading

2 -> loaded

3 -> interactive

4 -> completed

*/

Handle Response: Parsing the XML

// Our sample XML

<?xml version="1.0" encoding="ISO-8859-1"?>

<root>

<response>OK</response>

<msg>Hello World!</msg>

</root>

// Revised callback function

function cbProcessResponse()

{

if(xhr.readystate==4 && xhr.status==200)

{

var xmlDoc = xhr.responseXML.documentElement;

var s = x.getElementsByTagName('response')[0].firstChild.data;

var m = x.getElementsByTagName('msg')[0].firstChild.data;

alert(‘Response Code:’+s+’\nMessage: ‘+m)

}

}

Enter JSON

� JavaScript Object Notation

� JSON is a lightweight data-interchange format.

� JSON data are slightly simpler and slightly more in line with the rest of the JavaScript language than scripts for XML data.

� Find more about JSON at http://json.org

//sample JSON

{

response: ‘OK’,

msg: ‘Hello World’

}

JSON How?

� JSON can be generated by all the popular server-side languages.� Native/Library Support

// Revised callback function to use JSON

function cbProcessResponse()

{

if(xhr.readystate==4 && xhr.status==200)

{

var jsonData = eval(‘(‘+xhr.responseText+’)’);

var s = jsonData.response; // easy ;-)

var m = jsonData.msg;

alert(‘Response Code:’+s+’\nMessage: ‘+m)

}

}

� Doesn’t that look simpler?

Frameworks

� A framework is a re-usable design for a software system with built-in generic functions for performing repetitive, natively unsupported operations.

� The Prototype JavaScript Framework is a JavaScript framework that provides an Ajax framework and other utilities.

� Download from http://prototypejs.org

� Others: YUI, Dojo, jQuery, mooTools

Using Prototype.js

� Prototype provides the Ajax object to abstract the different browsers.

� Ajax.Request() � Ajax.Updater(container, url[, options])

var pars = 'topic=ajax&framework=pjs';

Var url = '/cgi-bin/myAjaxHandler.cgi';

var myAjax = new Ajax.Request(url,{

method: "post", // get/post

parameters: pars,

onComplete: cbProcessResponse // Our old callback function

});

� Ajax.PeriodicalUpdater(container, url[, options])

Tips

� Don't overuse AJAX, the usability requirements for JavaScript applications are quite different than the requirements for regular web pages.

� Escape content sent to the server.

� Use AJAX activity indicators.

� http://www.napyfab.com/ajax-indicators/

Debugging AJAX

� Always test your PHP/Server-side code before integrating it with the JavaScript side.

� Always check xhr.status

� Use FireBug to pin-point errors, and trace performance bottle-necks.

� Download from http://www.getfirebug.com/

Resources

� AJAXIAN - http://ajaxian.com

� AJAX info - http://ajaxinfo.com

� AJAX Lesson - http://ajaxlessons.com

� Go4Expert - http://go4expert.com

Thanks!

� Hussain Fakhruddin

� Teknowledge Software

� The wonderful audience.