Scribd Logo
Upload

Welcome to Scribd!

  • Ajax1 14021812

    Uploaded by

    mmanoj
    9 views13 pages
    AJAX allows updating parts of a web page asynchronously by exchanging data with a web server behind the scenes, without reloading the entire page. It uses a set of core technologies including HTML and CSS, JavaScript, and XMLHttpRequest objects to fetch data from the server and update portions of the page. The XMLHttpRequest object allows JavaScript to make HTTP requests directly to a web server, enabling asynchronous data retrieval and manipulation of page elements without interfering with the display and behavior of the existing page.

    Original Description:

    Original Title

    AJAX1-14021812

    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?

    Report this Document
    AJAX allows updating parts of a web page asynchronously by exchanging data with a web server behind the scenes, without reloading the entire page. It uses a set of core technologies including HTML and CSS, JavaScript, and XMLHttpRequest objects to fetch data from the server and update portions of the page. The XMLHttpRequest object allows JavaScript to make HTTP requests directly to a web server, enabling asynchronous data retrieval and manipulation of page elements without interfering with the display and behavior of the existing page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    9 views13 pages

    Ajax1 14021812

    Uploaded by

    mmanoj
    AJAX allows updating parts of a web page asynchronously by exchanging data with a web server behind the scenes, without reloading the entire page. It uses a set of core technologies including HTML and CSS, JavaScript, and XMLHttpRequest objects to fetch data from the server and update portions of the page. The XMLHttpRequest object allows JavaScript to make HTTP requests directly to a web server, enabling asynchronous data retrieval and manipulation of page elements without interfering with the display and behavior of the existing page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 13

    AJAX

    BASICS

    12/13/2007 Ajax Basics 1


    What is AJAX

     Asynchronous JavaScript and XML


     Set of tools and technologies supported
    by a browser.

    12/13/2007 Ajax Basics 2


    Why to use AJAX

     Used for developing fast and dynamic


    website
     Helps to process performing data in the
    client side (JavaScript) with data taken
    from the server.
     Selectively modify a part of the page
    displayed by the browser without
    resubmitting.

    12/13/2007 Ajax Basics 3


    AJAX-ELEMENTS

     HTML and CSS


     JavaScript
     The XMLHttpRequest class

    12/13/2007 Ajax Basics 4


    How Ajax works
     Use a programming model with display and events
     Use XMLHttpRequest to get data on the server using
    two methods :open() and send()
     Open() : for creating connection
     Send() : for sending request to the server
     Data processed by the server will be found in the
    attributes of XMLHttpRequest object.
     responseXML : for an XML file
     responseText : for plain text
     readyState attribute of XMLHttpRequest is used for
    finding the availability of data
     5 states– 0:not initialized, 1:connection established,
    2:request received, 3: ans in progress , 4: finished
    12/13/2007 Ajax Basics 5
    XMLHttpRequest
     Allows to interact with the server
     Has attributes and methods
     Attributes
     readyState : code successively changes from 0-
    4(ready)
     status : 200-ok,404-page not found
     responseText : holds loaded data as string
     responseXml : holds XML loaded file
     onreadystatechange : takes a function as a value
     Methods
     open(mode,url,boolean) : mode – type of request,
    url-location of file, boolean – true(aynchronous)
     send(“string”) : send data
    12/13/2007 Ajax Basics 6
    Steps for Building a Request

     Create an instance
     Wait for a response
     Make the request itself

    12/13/2007 Ajax Basics 7


    Create an instance
     Create XMLHttpRequest object according to browser
    compatibility
    Sample code:
    var xhr;
    If(window.XMLHttpRequest)
    {
    Xhr=new XMLHttpRequest() // Firefox,Safari etc
    }else if(window.ActivexObject)
    {
    Xhr= new ActiveXObject(“Microsoft.XMLHTTP”); //
    Internet Explorer
    }

    12/13/2007 Ajax Basics 8


    Wait for the response
     The response and further processing are included
    in a function and return of the function is assigned
    to onreadystatechange attribute.
    xhr.onreadystatechange=function(){//instruction to
    process the response};
     Sample instructions code
    If(xhr.readyState==4)
    {//received,OK}
    else
    {//wait}
    12/13/2007 Ajax Basics 9
    Make the request itself

     Open and send method of


    XMLHttpRequest are used.
     Sample code
    xhr.open(‘GET’,
    http://example.com/file1.xml,true);
    xhr.send(null);

    12/13/2007 Ajax Basics 10


    Example to get text
    <html>
    <head>
    <script>
    Function submitForm()
    {
    Var xhr;
    If(window.XMLHttpRequest)
    {
    Xhr=new XMLHttpRequest() // Firefox,Safari etc
    }else if(window.ActivexObject)
    {
    Xhr= new ActiveXObject(“Microsoft.XMLHTTP”); // Internet Explorer
    }
    Xhr.onreadystate=function()
    {
    If(xhr.readyState==4)
    {
    if(xhr.status==200)
    document.ajax.dyn=“Received:”+xhr.responseText);
    else
    document.ajax.dyn=“Error Code:”+xhr.status);
    }
    };

    12/13/2007 Ajax Basics 11


    Xhr.open(GET,”data.txt”,true);
    Xhr.send(null);

    }
    </script>
    </head>
    <body><form method=“Post” name=“ajax” action=“”>
    <input type=“button” value=“Submit”
    onClick=“submitForm()”>
    <input type=text name=dyn value=“”>
    </form>
    </body>
    </html>

    12/13/2007 Ajax Basics 12


    Drawbacks of AJAX

     Ajax wont work if JavaScript is not


    activated
     Back button may be deactivated
     Since data to display are displaying
    dynamically ,they are not part of the
    page. (keywords inside are not used by
    search engine)

    12/13/2007 Ajax Basics 13

    You might also like