Scribd Logo
Upload

Welcome to Scribd!

  • Chapter 15 AJAX

    Uploaded by

    alaa abu madi
    54 views17 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    54 views17 pages

    Chapter 15 AJAX

    Uploaded by

    alaa abu madi

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    AJAX

    1 Prepared by: Mohammed Jabary


    Adapted with minor changes from w3schools.com
    WHAT IS AJAX?


    AJAX: Asynchronous Javascript And Xml
     It’s a technique to produce fast and dynamic webpages
     AJAX allow web pages to be updated Asynchronously
    by exchanging small data with the server behind the
    scenes
     This means it’s possible to update parts of the web page
    without the need to reload the whole page.
     Classic web pages (without AJAX), must reload the
    whole page if the content should change
     Examples of websites using AJAX: Google Suggest,
    2
    Google map, Gmail, facebook, youtube
    HOW DOES AJAX WORK?
    AJAX is based on the Internet standards, and uses
    combination of:
     XMLHttpRequest (to exchange data asynchronously
    with the server)
     Javascript/DOM (to display/interact with data)

     CSS to style the data

     XML (often – not always – used as the format for


    transfering data)
    Note: AJAX is supposed to be Browser and Platform
    independent (why?)
    3
    HOW DOES AJAX WORK?

    4
    EXAMPLE EXPLAINED
    The following code represents a single <div> with a button, when the button is clicked
    a function called “loadXMLDoc()” is called

    <html>
    <head>
    </head>
    <body>

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


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

    </body>
    </html>

    5
    CREATING JAVASCRIPT FUNCTION
    The function to be called when the button is clocked is
    defined in the script section in the head of the html,
    add the following the head of html document

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    // Ajax code goes here
    }
    </script>
    </head> 6
    CREATING XMLHTTPREQUEST OBJECT
     XMLHttpRequest is supported by most the modern
    browsers (Chrome, Safari, Firefox)
     These browsers have build-in XMLHttpRequest

     The XMLHttpRequest is used to exchanged data


    asynchronously with the server
     Syntax for creating XMLHttpRequest:

    // for most browsers


    Variable = new XMLHttpRequest();

    // for IE 5 and 6
    7
    Variable = new ActiveXObject(“Microsoft.XMLHTTP”);
     Creating XMLHttpRequest

    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");
    }
    8
    SENDING A REQUEST TO THE SERVER
     Tosend a request to the server using
    XMLHttpRequest we use its open and send methods
     Syntax:
    xmlhttp.open("GET",”getcomments.php",true);
    xmlhttp.send();

    Open(method, URL, Asyn);


    Method: POST or GET
    URL: the requested URL on server
    Asyn: True/False. For asynchronous use true

    Send(String);
    Sends the request off to the server
    9
    String is used only with POST requests
    WAITING FOR THE RESPONSE
     With AJAX, javascript does not have to wait for the server response, instead it can:
     Execute other scripts while waiting for the response
     Deal with response when the response is ready
     Use the onreadystatechange event of the XMLHttpRequest to specify a function to be executed
    when the response is ready

    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
    10
    THE ONREADYSTATECHANGE EVENT
     After sending the request to the server, 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

    11
    THE RESPONSE
     The response object sent from the server can take two
    forms:
     responseText:
    gets the response data as String
     responseXML: gets the response data as XML

    12
    THE
    <html>
    COMPLETE EXAMPLE
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    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");
    }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    } 13
    xmlhttp.open("GET",”getcomment.php",true);
    xmlhttp.send();
    COMPLETE EXAMPLE (CONT..)
    <body>

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


    text</h2></div>
    <button type="button” id=“b1”
    onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

    14
    AJAX USING JQUERY
     jQuery support AJAX calls
     The code to make AJAX calls is simple

     Syntax:

    $(document).ready(function(){
    $(”Selector").click(function(){
    $.ajax({
    url:”URL to page",
    success:function(result){
    $(”Selector").html(result);
    }
    });
    }); 15
    });
    AJAX USING JQUERY
     Rewriting the Previous Example using jQuery AJAX:

    $(document).ready(function(){
    $(”#b1").click(function(){
    $.ajax({
    url:”getcomment.php",
    success:function(result){
    $(”#myDiv").html(result);
    }
    });
    }); 16
    });
    REFERNCES
     W3schools.com

    17

    You might also like