Scribd Logo
Upload

Welcome to Scribd!

  • 38 views

    Tutorial: W3Schools Home Next Chapter

    Uploaded by

    Abhik Ghosal
    The document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML): 1) AJAX allows web pages to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. 2) AJAX uses a combination of XMLHttpRequest objects, JavaScript, DOM, and CSS to retrieve data from the server and update parts of a web page without reloading. 3) The XMLHttpRequest object is used to exchange data with a server asynchronously and is supported by all modern browsers either natively or through ActiveXObjects for older versions of Internet Explorer.

    Copyright:

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

    Tutorial: W3Schools Home Next Chapter

    Uploaded by

    Abhik Ghosal
    38 views6 pages
    The document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML): 1) AJAX allows web pages to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. 2) AJAX uses a combination of XMLHttpRequest objects, JavaScript, DOM, and CSS to retrieve data from the server and update parts of a web page without reloading. 3) The XMLHttpRequest object is used to exchange data with a server asynchronously and is supported by all modern browsers either natively or through ActiveXObjects for older versions of Internet Explorer.

    Original Description:

    Original Title

    Ajax

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML): 1) AJAX allows web pages to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. 2) AJAX uses a combination of XMLHttpRequest objects, JavaScript, DOM, and CSS to retrieve data from the server and update parts of a web page without reloading. 3) The XMLHttpRequest object is used to exchange data with a server asynchronously and is supported by all modern browsers either natively or through ActiveXObjects for older versions of Internet Explorer.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    38 views6 pages

    Tutorial: W3Schools Home Next Chapter

    Uploaded by

    Abhik Ghosal
    The document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML): 1) AJAX allows web pages to be updated asynchronously by exchanging small amounts of data in the background without reloading the entire page. 2) AJAX uses a combination of XMLHttpRequest objects, JavaScript, DOM, and CSS to retrieve data from the server and update parts of a web page without reloading. 3) The XMLHttpRequest object is used to exchange data with a server asynchronously and is supported by all modern browsers either natively or through ActiveXObjects for older versions of Internet Explorer.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 6

    AJAX 

    Tutorial
    « W3Schools Home Next Chapter »
    AJAX = Asynchronous JavaScript and XML.

    AJAX is not a new programming language, but a


    new way to use existing standards.

    AJAX is the art of exchanging data with a server,


    and update parts of a web page - without
    reloading the whole page.

    <html>

    <head>

    <script type="text/javascript">

    function loadXMLDoc()

    { if (window.XMLHttpRequest) {// code for IE7+, Firefox,


    Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }

    else {// code for IE6, IE5 xmlhttp=new


    ActiveXObject("Microsoft.XMLHTTP"); }

    xmlhttp.onreadystatechange=function()

    { if (xmlhttp.readyState==4 && xmlhttp.status==200)

    { document.getElementById("myDiv").innerHTML=xmlhttp.respons
    eText; } }

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

    xmlhttp.send(); }
    AJAX Introduction
    « Previous Next Chapter »

    AJAX is about updating parts of a web page, without reloading


    the whole page.

    What You Should Already Know


    Before you continue you should have a basic understanding of the following:

     HTML / XHTML
     CSS
     JavaScript / DOM

    If you want to study these subjects first, find the tutorials on our Home
    page.

    What is AJAX?
    AJAX = Asynchronous JavaScript and XML.

    AJAX is a technique for creating fast and dynamic web pages.

    AJAX allows web pages to be updated asynchronously by exchanging small


    amounts of data with the server behind the scenes. This means that it is
    possible to update parts of a web page, without reloading the whole page.

    Classic web pages, (which do not use AJAX) must reload the entire page if
    the content should change.

    Examples of applications using AJAX: Google Maps, Gmail, Youtube, and


    Facebook tabs.
    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)

      AJAX applications are browser- and platform-independent!


    AJAX Example Explained
    The AJAX application above contains one div section and one button.

    The div section will be used to display information returned from a server.
    The button calls a function named loadXMLDoc(), if it is clicked:

    <html>
    <body>

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>


    <button type="button" onclick="loadXMLDoc()">Change
    Content</button>

    </body>
    </html>

    Next, add a <script> tag to the page's head section. The script section
    contains the loadXMLDoc() function:

    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    .... AJAX script goes here ...
    }
    </script>
    </head>
    AJAX - Create
    an XMLHttpRequest Object
    « Previous Next Chapter »

    The keystone of AJAX is the XMLHttpRequest object.

    The XMLHttpRequest Object


    All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses
    an ActiveXObject).

    The XMLHttpRequest object is used to exchange data with a server behind


    the scenes. This means that it is possible to update parts of a web page,
    without reloading the whole page.

    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:

    xmlhttp=new XMLHttpRequest();

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

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

    To handle all modern browsers, including IE5 and IE6, check if the browser
    supports the XMLHttpRequest object. If it does, create an XMLHttpRequest
    object, if not, create an ActiveXObject:
    Example

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

    You might also like