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

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:

 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:

 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:

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

Code:

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

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

JSON How?

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

Code:

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

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/building-applications-using-ajax

 

Nice one.

 

Google’s New WebP Image Standard Is All About SEO