Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Building Applications using AJAX (http://www.go4expert.com/articles/building-applications-using-ajax-t6829/)

pradeep 14Oct2007 23:35

Building Applications using AJAX
The first of its kind Web Technology Conference on Open Source Technology, WebOSS '07 was organised in Kolkata on Sat, 13th Oct 07 and I spoke at the event as one of the participants on "Building Applications using AJAX". Here I will share my presentation, the PDF copy download requires you to register at the forum.

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 websites…

How AJAX is different

Need for AJAX

  • To increase web's interactivity, speed and usability
  • Issues with classic web applications
  1. Almost all processing is done on server
  2. High latency
  3. 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
        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: JavaScript

var xhr = null;
 if(window.XMLHttpRequest) // Mozilla,Safari, etc.
     xhr = new XMLHttpRequest();
 else if(window.ActiveXObject) // < IE 7
     xhr = new ActiveXObject('Microsoft.XMLHTTP');
     alert('Oops! Your browser does not support XMLHttpRequest');

XHR Methods

  • open('method','url',asyncFlag)
  • send(content)
  • abort()
  • getResponseHeader("header")
  • setRequestHeader("header","value")

XHR properties

  • onreadstatechange
  • 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: JavaScript

 function cbProcessResponse()
     if(xhr.readystate==4 && xhr.status==200)
 /* readystate values
 0 -> uninitialized
 1 -> loading
 2 -> loaded
 3 -> interactive
 4 -> completed

Handle Response: Parsing the XML

Code: XML

// Our sample XML
 <?xml version="1.0" encoding="ISO-8859-1"?>
     <msg>Hello World!</msg>

Code: JavaScript

// 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 is easier to parse and has less overhead when compared to XML.
  • Find more about JSON at http://json.org
Code: JavaScript

//sample JSON
     response: 'OK',
     msg: 'Hello World'


  • JSON can be generated by all the popular server-side languages.
  • Native/Library Support
Code: JavaScript

// 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?


  • 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])
  • Ajax.PeriodicalUpdater(container, url[, options])
Code: JavaScript

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 Security

  • Data Validation
  • Authentication
  • Test your code thoroughly before deployment.


  • 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/


Download The Presentation


Izaan 20Oct2007 11:30

Re: Building Applications using AJAX
Nice one.

seoguru 6Oct2010 17:17

Re: Building Applications using AJAX
Google’s New WebP Image Standard Is All About SEO

All times are GMT +5.5. The time now is 02:28.