Go4Expert

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



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

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


Download The Presentation



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

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 07:36.