Go4Expert - 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

http://www.go4expert.com/images/arti...ntSideAjax.gif

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

Code:

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

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

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

Code: JavaScript

xhr.onreadystatechange=cbProcessResponse;
 xhr.open('ajax.php','GET',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

Code: XML

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

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

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?

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])
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.

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

Download The Presentation

http://www.slideshare.net/s_pradeep/...ons-using-ajax