Building
Applications
using AJAX
WebOSS ‘07
S Pradeep

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

Code
xhr.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.