Scribd Logo
Upload

Welcome to Scribd!

  • How AJAX Works

    Uploaded by

    SalmanSid
    29 views5 pages
    AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to the server in the background and update portions of the page with the response. This creates a more interactive experience for the user. AJAX is commonly used by major websites like Google Maps, Gmail, YouTube, and Facebook to asynchronously retrieve data and update sections of the page without refreshing.

    Original Description:

    A DCOUMENT ABOUT MY WORK

    Original Title

    DOC

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to the server in the background and update portions of the page with the response. This creates a more interactive experience for the user. AJAX is commonly used by major websites like Google Maps, Gmail, YouTube, and Facebook to asynchronously retrieve data and update sections of the page without refreshing.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    29 views5 pages

    How AJAX Works

    Uploaded by

    SalmanSid
    AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to the server in the background and update portions of the page with the response. This creates a more interactive experience for the user. AJAX is commonly used by major websites like Google Maps, Gmail, YouTube, and Facebook to asynchronously retrieve data and update sections of the page without refreshing.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    What is AJAX?

    -> AJAX stands for 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.

    -> AJAX is used to create more interactive applications. AJAX is a developers


    dream, because you can:

    --- Update a web page without reloading it


    --- Request data from a server - after the page has loaded
    --- Receive data from a server - after the page has loaded
    --- Send data to a server - in the background

    How AJAX Works

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

     XMLHttpRequest object (to retrieve data from a web server)


     JavaScript/DOM (to display/use the data)
    AJAX PHP Example
    The following example will demonstrate how a web page can communicate with
    a web server while a user type characters in an input field:

    <html>
    <head>
    <script>
    function showHint(str) {
    if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
    } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("txtHint").innerHTML =
    xmlhttp.responseText;
    }
    }
    xmlhttp.open("GET", "gethint.php?q=" + str, true);
    xmlhttp.send();
    }
    }
    </script>
    </head>
    <body>

    <p><b>Start typing a name in the input field below:</b></p>


    <form>
    First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
    </body>
    </html>

    readyState Holds the status of the XMLHttpRequest.


    0: request not initialized
    1: server connection established
    2: request received
    3: processing request
    4: request finished and response is ready
    status Returns the status-number of a request
    200: "OK"
    403: "Forbidden"
    404: "Not Found"

    The PHP File - "gethint.php"

    <?php
    // Array with names
    $a[] = "Abhi";
    $a[] = "Bobby";
    $a[] = "siri";
    $a[] = "keerthi";
    $a[] = "sailu";
    $a[] = "akki";

    // get the q parameter from URL


    $q = $_REQUEST["q"];

    $hint = "";

    // lookup all hints from array if $q is different from ""


    if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
    if ($hint === "") {
    $hint = $name;
    } else {
    $hint .= ", $name";
    }
    }
    }
    }

    // Output "no suggestion" if no hint was found or output correct values


    echo $hint === "" ? "no suggestion" : $hint;
    ?>
    AJAX Database Example
    The following example will demonstrate how a web page can fetch information
    from a database with AJAX:

    <html>
    <head>
    <script>
    function showUser(str)
    {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();

    }
    </script>
    </head>
    <body>

    <form>
    <select name="users" onchange="showUser(this.value)">
    <option value="">Select a person:</option>
    <option value="1">Abhinav</option>
    <option value="2">Alekhya</option>
    <option value="3">Siri</option>
    <option value="4">Sailu</option>
    </select>
    </form>
    <br>
    <div id="txtHint"><b>Person info will be listed here...</b></div>

    </body>
    </html>

    --------------------------------------------------------------------
    <!—source code for getuser.php -->

    <?php

    $q = intval($_GET['q']);

    $con = mysqli_connect('localhost','root','','nit');

    $sql="SELECT * FROM user WHERE id = '".$q."'";


    $result = mysqli_query($con,$sql);

    echo "<table border=1>


    <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
    </tr>";
    while($row = mysqli_fetch_array($result))
    {
    echo "<tr>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['age'] . "</td>";
    echo "<td>" . $row['city'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";
    mysqli_close($con);
    ?>
    -------------------------------------------------------------------
    Explanation: When the query is sent from the JavaScript to the PHP file, the
    following happens:
    1. PHP opens a connection to a MySQL server
    2. The correct person is found
    3. An HTML table is created, filled with data, and sent back to the "txtHint"
    placeholder

    You might also like