Scribd Logo
Upload

Welcome to Scribd!

  • 102 views

    A New Approach To Web Applications : © Wipro Technologies - Wipro Confidential - Not For Distribution

    Uploaded by

    salempradeep
    AJAX is not a new programming Language, rather it's a technique / framework to create better, faster and more interactive Web Applications. AJAX was made popular by Google by using it in Gmail and Google suggest.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    A New Approach To Web Applications : © Wipro Technologies - Wipro Confidential - Not For Distribution

    Uploaded by

    salempradeep
    102 views23 pages
    AJAX is not a new programming Language, rather it's a technique / framework to create better, faster and more interactive Web Applications. AJAX was made popular by Google by using it in Gmail and Google suggest.

    Original Title

    Ajax

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    AJAX is not a new programming Language, rather it's a technique / framework to create better, faster and more interactive Web Applications. AJAX was made popular by Google by using it in Gmail and Google suggest.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    102 views23 pages

    A New Approach To Web Applications : © Wipro Technologies - Wipro Confidential - Not For Distribution

    Uploaded by

    salempradeep
    AJAX is not a new programming Language, rather it's a technique / framework to create better, faster and more interactive Web Applications. AJAX was made popular by Google by using it in Gmail and Google suggest.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 23

    AJAX

    A new Approach to Web Applications

    By: Sheeti Kantha Das.

    1 Wipro Technologies - Wipro Confidential - Not for Distribution

    Traditional Web Application Model

    HTTP
    Data Web Server App. Server

    Problems in traditional WebApplication


    Load the page for every action (that requires processing by the server) of the user. Even though some part of the page needs to be updated, the whole page gets loaded.

    If the data to be displayed on the screen is huge then it may take more time for the application to go to next page or to reload the same page.
    User has to wait for the page to get reloaded and then continue the work.
    2 Wipro Technologies - Wipro Confidential - Not for Distribution

    Example classic Web Application


    The Page gets reloaded on selecting the dropdown list.

    3 Wipro Technologies - Wipro Confidential - Not for Distribution

    What is AJAX
    To overcome the time consuming nature (more hits to server i.e. resulting in heavy traffic at the server end) of classic web applications and to make it more interactive AJAX came into picture. Ajax is not a new programming Language, rather its a technique/framework to create better, faster and more interactive Web Applications. AJAX is a browser technology independent of web server software.

    4 Wipro Technologies - Wipro Confidential - Not for Distribution

    History of AJAX

    Intially named as XMLHTTP The term AJAX was first coined by Jesse James Garrett of Adaptive Path. AJAX was made popular by Google by using it in Gmail and Google suggest.

    5 Wipro Technologies - Wipro Confidential - Not for Distribution

    Purpose of AJAX

    Prevents unnecessary reloading of a page.


    Makes Web Applications More interactive and Faster. More user friendly.

    6 Wipro Technologies - Wipro Confidential - Not for Distribution

    AJAX conglomeration of technologies

    Technology XMLHttpRequest XML and XSLT DOM

    Purpose Asynchronous Data Retrieval Data Interchange To achieve dynamic display & interaction.

    XHTML & CSS JavaScript

    For Presentation For binding all the above technologies in a single thread.

    7 Wipro Technologies - Wipro Confidential - Not for Distribution

    AJAX Application Model

    A J A X E N G I N E
    Data

    Web Server

    App Server

    An Ajax application eliminates the start-stop-startstop nature of interaction on the Web by introducing an intermediary an Ajax engine between the user and the server.

    8 Wipro Technologies - Wipro Confidential - Not for Distribution

    Non-Ajax Web application Vs Ajax-Web application

    9 Wipro Technologies - Wipro Confidential - Not for Distribution

    AJAX engine
    A J A X E N G I N E

    User actions

    .htm .aspx .js

    Web browser

    JavaScript calls HTML + CSS

    XMLHttp Request Server data in XML or Text

    Data

    Web services

    It is the JavaScript code written by the programmer.

    10 Wipro Technologies - Wipro Confidential - Not for Distribution

    AJAX Implementation in Web Application

    To implement AJAX in the development of a web application we must built around XMLHttpRequest object, everything in Ajax revolves around manipulating and handling this object. This object along with JavaScript is capable of making asynchronous calls to the server.

    11 Wipro Technologies - Wipro Confidential - Not for Distribution

    Example

    Webservice method

    Page Level service method Page Level service method

    12 Wipro Technologies - Wipro Confidential - Not for Distribution

    Real life Examples


    1.Google Suggest:

    As you type something into the search text field, the system goes to the server and fills in a short selection area with even further information about the number of results. A user can use their arrow keys to tap down to a final selection.

    13 Wipro Technologies - Wipro Confidential - Not for Distribution

    2.Gmail:

    Here we see the same thing as you type in something into the search text field, the system goes to the server and fills in a short selection area with even further information about the number of results. A user can use their arrow keys to tap down to a final selection.

    14 Wipro Technologies - Wipro Confidential - Not for Distribution

    More Examples

    AJAX is more seriously employed in social sites like Flickr, del.icio.us, Orkut, and some web based desktop replacement applications like Google spreadsheet, Writely online editor, AjaxWrite, Zoho office suite etc.

    15 Wipro Technologies - Wipro Confidential - Not for Distribution

    Example of AJAX Web Application


    1. Instantiate the XMLHttpRequest Object:
    <script type="text/JavaScript"> var xmlHttp; //function to create the new instance of XMLHttpRequest object function instantiateXMLHttpRequest() { //In IE XMLHttpRequest is a ActiveX object if (window.ActiveXObject) { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } //non IE browsers else if (window.XMLHttpRequest) { xmlHttpReq = new XMLHttpRequest(); } }
    16 Wipro Technologies - Wipro Confidential - Not for Distribution

    2. Send the asynchronous request to server


    //function call asynchronous request to server function startRequest() { instantiateXMLHttpRequest (); //set callback method xmlHttp.onreadystatechange = handleResponseMethod; var url="HelloAjaxServer.aspx"; //instantiate request xmlHttp.open("GET",url, true); //send request to server xmlHttp.send(null); }

    17 Wipro Technologies - Wipro Confidential - Not for Distribution

    3. Receive the response


    //function to handle the response of the request function handleResponseMethod () {//if request completed sucessfully clear the previous result and show the new search results if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) {doSomething();} } }//end of handleResponseMethod

    18 Wipro Technologies - Wipro Confidential - Not for Distribution

    Browsers & AJAX


    Browsers supporting Ajax :
    Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported) Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon and Netscape version 7.1 and above Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, and Apple Safari version 1.2 and above Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above

    Note: KHTML : Desktop Environment HTML

    19 Wipro Technologies - Wipro Confidential - Not for Distribution

    Browsers & AJAX


    Browsers that do not support Ajax:
    Opera 7 and below Microsoft Internet Explorer (below version 5.0) Text-based browsers like Lynx and Links

    Browsers for the visually impaired (speech-synthesising, braille)


    Browsers made before 1997

    20 Wipro Technologies - Wipro Confidential - Not for Distribution

    Pros

    Real-time form data validation Autocompletion Load on demand Sophisticated user interface controls and effects Refreshing data and server push Partial submit Mashups Page as an application

    21 Wipro Technologies - Wipro Confidential - Not for Distribution

    Cons and Criticism

    Browsing history Search engine interaction Server load Security

    22 Wipro Technologies - Wipro Confidential - Not for Distribution

    Conclusion

    Ajax applications represent the best of both worlds: the responsiveness of Desktop applications combined with the simplicity and usability of traditional web applications.

    23 Wipro Technologies - Wipro Confidential - Not for Distribution

    You might also like