Scribd Logo
Carica

Benvenuto in Scribd!

  • Asynchronous Javascript and XML

    Caricato da

    vedicsoft
    416 visualizzazioni12 pagine
    Ajax

    Titolo originale

    Ajax

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Ajax

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    416 visualizzazioni12 pagine

    Asynchronous Javascript and XML

    Caricato da

    vedicsoft
    Ajax

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 12

    AJAX

    Asynchronous JavaScript And XML


    INTRODUCTION
    • AJAX stands for Asynchronous JavaScript And XML.

    • AJAX is a type of programming made popular in 2005 by Google (with


    Google Suggest).

    • AJAX is not a new programming language, but a technique for creating


    better, faster, and more interactive web applications.

    • With AJAX you can create better, faster, and more user-friendly web
    applications.

    • AJAX is based on JavaScript and HTTP requests.

    • AJAX is a browser technology independent of web server software.

    • AJAX applications are browser and platform independent.

    2
    How does AJAX work?
    • Pre-requisite:
    – HTML/XHTML
    – Javascript

    • AJAX uses asynchronous data transfer (HTTP requests)


    between the browser and the web server, allowing web
    pages to request small bits of information from the server
    instead of whole pages.

    • JavaScript communicates directly with the server,


    through the JavaScript XMLHttpRequest object

    3
    First AJAX Application

    testAjax.html

    <html>
    <body>
    <form name="myForm">
    Name: <input type="text" name="username" />
    Time: <input type="text" name="time" />
    </form>
    </body>
    </html>

    4
    First AJAX Application
    <script type="text/javascript">
    function ajaxFunction(){
    var xmlHttp;
    try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    } catch (e) {
    // Internet Explorer
    try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
    alert("Your browser does not support AJAX!");
    return false;
    }
    }
    }
    }
    </script>

    5
    More About the XMLHttpRequest Object

    • The onreadystatechange Property


    – stores the function that will process the
    response from a server.
    • The readyState Property
    – holds the status of the server's response.
    • The responseText Property
    – holds data sent back from the server

    6
    The onreadystatechange Property
    • Method 1:
    xmlHttp.onreadystatechange = function()
    {
    // We are going to write some code here
    }

    • Method 2:
    xmlHttp.onreadystatechange = function

    -- Define the funtion() as usual

    7
    The readyState Property

    State Description

    0 The request is not initialized

    1 The request has been set up

    2 The request has been sent

    3 The request is in process

    4 The request is complete


    8
    The responseText Property

    xmlHttp.onreadystatechange = function()
    {
    if(xmlHttp.readyState==4)
    {
    // Get the data from the server's response
    document.myForm.time.value=xmlHttp.responseText;
    }
    }

    9
    Sending Request to Server
    • To send off a request to the server, we use the open()
    method and the send() method.

    xmlHttp.open("GET", "<server url>",true);


    xmlHttp.send(null);

    • When the AJAX function must be execute

    <form name="myForm">
    Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
    Time: <input type="text" name="time" />
    </form>

    10
    First AJAX Application
    <script type="text/javascript">
    function ajaxFunction(){
    var xmlHttp;
    try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    } catch (e) {
    // Internet Explorer
    try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
    alert("Your browser does not support AJAX!");
    return false;
    }
    }
    }
    xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
    }
    xmlHttp.open("GET","time.asp",true);
    xmlHttp.send(null);
    }
    </script>

    11
    Happy
    AJAX
    Programming!

    Reference: http://www.w3schools.com/ajax/default.asp

    Potrebbero piacerti anche