Derek O' Reilly's DKIT lecture notes. Derek O' Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O' Reilly DKIT Dundalk Louth Ireland

AJAX & JSON

AJAX

AJAX (Asynchronous JavaScript + XML) allow webpages to send data to and retrieve from a database server asynchronously (in the background) without interfering with the display and behavior of the existing page. Using AJAX, a webpage can change its content in real-time. By using AJAX, we do not have to load a new webpage. Instead, we update the current webpage.

AJAX webpages provide a smoother visual appearance to users, as the webpage does not need to reload. Instead, only those parts of the webpage that need to be updated are changed. The rest of the webpage remains unchanged.

First File (send an AJAX request to read data from a database)

ajax_search.php

Second File (access the database in response to an AJAX request. Every "echo" in this file will be sent as data to the file that issued the AJAX request.)

ajax_get_one_model.php

WARNING: If a php file is being used to fulfill an AJAX request, then it must not have any sourrounding html tags (such as DOCTYPE, HTHM, HEAD, TITLE or BODY). This can be seen in the example below:

AJAX allows us to update a webpage without leaving the webpage. This feature is used a lot in modern websites. List various examples of where AJAX is used.

In the example above, the models listed in the drop-down list are hard coded as 'corolla' and 'yaris'. Write php code to create the drop-down list of available models from the database.

Solution php file for the above question:

model_list.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AJAX Example</title>
        <script>
            async function ajaxListModel(model)
            {
                let url = "ajax_get_one_model.php";   /* name of file to send request to */
                let urlParameters = "model=" + model; /* Construct a url parameter string to POST to fileName */

                try
                {
                    const response = await fetch(url,
                            {
                                method: "POST",
                                headers: {'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                                body: urlParameters
                            });

                    updateWebpage(await response.text());
                }
                catch (error)
                {
                    console.log("Fetch failed: ", error);
                }


                /* use the fetched data to change the content of the webpage */
                function updateWebpage(responseText)
                {

                    document.getElementById('model').innerHTML = responseText;
                }
            }



            // All of the black bold text below is the same for both AJAX functions
            async function ajaxListAllModels()
            {
                let url = "ajax_get_all_models.php";   /* name of file to send request to */
                let urlParameters = ""; /* Construct a url parameter string to POST to fileName */

                try
                {
                    const response = await fetch(url,
                            {
                                method: "POST",
                                headers: {'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                                body: urlParameters
                            });

                    updateWebpage(await response.text());
                }
                catch (error)
                {
                    console.log("Fetch failed: ", error);
                }


                /* use the fetched data to change the content of the webpage */
                function updateWebpage(responseText)
                {
                    document.getElementById('listAllModels').innerHTML = responseText;
                }
            }
        </script>
    </head>

    <body onload="ajaxListAllModels();">

        <div id="listAllModels"></div>
        <br>
        <div id = 'model'>Model details will be listed here.</div>

    </body>
</html>




ajax_get_all_models.php
<?php
/* Include "configuration.php" file */
require_once "configuration.php";


/* Connect to the database */
$dbConnection = new PDO("mysql:host=$dbHost;dbname=$dbName", $dbUsername, $dbPassword);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   // set the PDO error mode to exception


/* Perform query */
/* SELECT DISTINCT ensures that no duplicate model names are selected */
$query = "SELECT DISTINCT model FROM toyota";
$statement = $dbConnection->prepare($query);
$statement->execute();



/* Manipulate the query result */
if ($statement->rowCount() > 0)
{
    $result = $statement->fetchAll(PDO::FETCH_OBJ);

    // create the <select> element with an <option> element for each car model 
    echo '<select name = "users" onchange = "ajaxListModel(this.value)">';
    echo "<option value=''>Select a model</option>";
    foreach ($result as $row)
    {
        echo "<option value='" . $row->model . "'>" . $row->model . "</option>";
    }
    echo "</select>";
}
?>

JSON

In our examples above, the php files "ajax_get_one_model.php" and "ajax_get_all_models.php" generate HTML code, which is then inserted into a <DIV> element using the innerHTML() function. The problem with this is that we are mixing the model (database data) with the view (HTML code). This leads to code that is difficult to maintain or reuse.

JSON (JavaScript Object Notation) files allow data to be stored as a string. We can use JSON to pass data back from an AJAX request. Returning the data as a JSON string means that we can generate the HTML code after we get the data from the database code. JSON can be used to remove all php code from the client-side HTML file. This makes our code much cleaner, as we totally separate the data from the view.

First File (sends two different AJAX requests to read data from a database and process the returned JSON strings)

ajax_json_search.html (note that this can now be a HTML file rather than a PHP file)

Second File (get the list of models from the database)

ajax_get_all_models.php

WARNING: If a php file is being used to fulfill an AJAX request, then it must not have any sourrounding html tags (such as DOCTYPE, HTHM, HEAD, TITLE or BODY). This can be seen in the example below:

Third File (get the list of all cars of a particular model from the database)

ajax_get_one_model.php

WARNING: If a php file is being used to fulfill an AJAX request, then it must not have any sourrounding html tags (such as DOCTYPE, HTHM, HEAD, TITLE or BODY). This can be seen in the example below:

Using JSON allows programmers to format the returned data at the client side. This makes the code more maintainable. Place the output from the above example into a "ul" list instead of a "table".

Using JSON means that the view of the data is seperated from the actual data. This means that different files can use the data in different ways. Write code in a new file that only displays the model, year and price of a car.

Post JSON Data to PHP File

We can use the AJAX fetch() method to POST url parameters as a json string to a php or other file.

post_json.php

post_json_transaction.php