Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Ajax

    Uploaded by

    nayabkcse2125

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Ajax

    Uploaded by

    nayabkcse2125
    4 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    4 views5 pages

    Ajax

    Uploaded by

    nayabkcse2125

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 5

    AJAX

    Introduction

    1. AJAX stands for Asynchronous JavaScript and XML.


    2. AJAX is not a new programming language, but a new way to use
    existing standards.
    3. AJAX is the art of exchanging data with a server, and updating parts
    of a web page - without reloading the whole page.
    4. AJAX applications are browser- and platform-independent!

    How AJAX Works


    AJAX is Based on Internet Standards

    AJAX is based on internet standards, and uses a combination of:

     XMLHttpRequest object (to exchange data asynchronously with a


    server)
     JavaScript/DOM (to display/interact with the information)
     CSS (to style the data)
     XML (often used as the format for transferring data)

    Steps for Using AJAX

    Step-1

    Create an XMLHttpRequest Object

    All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a
    built-in XMLHttpRequest object.

    Syntax for creating an XMLHttpRequest object:

    variable=new XMLHttpRequest();

    Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:

    variable=new ActiveXObject("Microsoft.XMLHTTP");

    Example

    Var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    Step-2

    Send a Request To a Server

    To send a request to a server, we use the open() and send() methods of


    the XMLHttpRequest object:

    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

    Method Description

    Specifies the type of request, the URL, and if the


    request should be handled asynchronously or not.
    open(method,url,async)
    method: the type of request: GET or POST
    url: the location of the file on the server
    async: true (asynchronous) or false (synchronous)

    Sends the request off to the server.


    send(string)
    string: Only used for POST requests

    Step-3

    Server Response

    To get the response from a server, use the responseText or


    ResponseXMLproperty of the XMLHttpRequest object.

    Property Description

    responseText get the response data as a string

    responseXML get the response data as XML data

    Example

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    Step-4

    The onreadystatechange event

    When a request to a server is sent, we want to perform some actions


    based on the response.
    The onreadystatechange event is triggered every time the readyState
    changes.
    The readyState property holds the status of the XMLHttpRequest.
    Three important properties of the XMLHttpRequest object:
    Property Description

    Stores a function (or the name of a function) to be


    onreadystatechange called automatically each time the readyState property
    changes

    Holds the status of the XMLHttpRequest. Changes


    from 0 to 4:
    0: request not initialized
    readyState 1: server connection established
    2: request received
    3: processing request
    4: request finished and response is ready

    200: "OK"
    status
    404: Page not found

    In the onreadystatechange event, we specify what will happen when the


    server response is ready to be processed.

    When readyState is 4 and status is 200, the response is ready:

    Example
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 &&xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    }

    You might also like