1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Building Applications using AJAX

Discussion in 'JavaScript and AJAX' started by pradeep, Oct 14, 2007.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    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



    [​IMG]

    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



    Download The Presentation



    http://www.slideshare.net/s_pradeep/building-applications-using-ajax
     
  2. Izaan

    Izaan New Member

    Joined:
    Oct 16, 2007
    Messages:
    215
    Likes Received:
    2
    Trophy Points:
    0
    Nice one.
     
  3. seoguru

    seoguru New Member

    Joined:
    Oct 6, 2010
    Messages:
    19
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    http://www.seofleet.com
    Google’s New WebP Image Standard Is All About SEO
     

Share This Page