AJAX Database - Hosting Deals

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JS Database

The following example illustrates how a web page can fetch information from a database with AJAX

<!DOCTYPE html>

<html>

<style>

th,td {

padding: 5px;

}

</style>

<body>

<h2>The XMLHttpRequest Object</h2>

<option value=””>Select a customer:</option>

<option value=”ALFKI”>Alfreds Futterkiste</option>

<option value=”NORTS “>North/South</option>

<option value=”WOLZA”>Wolski Zajazd</option>

</select>

</form>

<br>

<div id=”txtHint”>Customer info will be listed here…</div>

function showCustomer(str) {

if (str == “”) {

document.getElementById(“txtHint”).innerHTML = “”;

return;

}

const xhttp = new XMLHttpRequest();

xhttp.onload = function() {

document.getElementById(“txtHint”).innerHTML = this.responseText;

}

xhttp.open(“GET”, “getcustomer.php?q=”+str);

xhttp.send();

}

</script>

</body>

</html>

Output

Example Explained – The showCustomer() Function

When a user makes a selection of a customer from the dropdown list above, a function called showCustomer() is executed. The function is triggered by the onchange event

ShowCustomer

function showCustomer(str) {

if (str == “”) {

document.getElementById(“txtHint”).innerHTML = “”;

return;

}

const xhttp = new XMLHttpRequest();

xhttp.onload = function() {

document.getElementById(“txtHint”).innerHTML = this.responseText;

}

xhttp.open(“GET”, “getcustomer.php?q=”+str);

xhttp.send();

}

The showCustomer() function does the following:

Check if a customer is selected.
Built an XMLHttpRequest object.
Built the function to be executed when the server response is ready.
Send the request off to a file on the server.
parameter (q) is added to the URL (with the content of the dropdown list).

The AJAX Server Page

The page on the server called by the JavaScript above is a PHP file called “getcustomer.php”.

The source code in “getcustomer.php” runs a query and checks in a database, and returns the result in an HTML table:

<?php

$mysqli = new mysqli(“servername”, “username”, “password”, “dbname”);

if($mysqli->connect_error) {

exit(‘Could not connect’);

}

$sql = “SELECT customerid, companyname, contactname, address, city, postalcode, country

FROM customers WHERE customerid = ?”;

$stmt = $mysqli->prepare($sql);

$stmt->bind_param(“s”, $_GET[‘q’]);

$stmt->execute();

$stmt->store_result();

$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);

$stmt->fetch();

$stmt->close();

cho “<table>”;

echo “<tr>”;

echo “<th>CustomerID</th>”;

echo “<td>” . $cid . “</td>”;

echo “<th>CompanyName</th>”;

echo “<td>” . $cname . “</td>”;

echo “<th>ContactName</th>”;

echo “<td>” . $name . “</td>”;

echo “<th>Address</th>”;

echo “<td>” . $adr . “</td>”;

echo “<th>City</th>”;

echo “<td>” . $city . “</td>”;

echo “<th>PostalCode</th>”;

echo “<td>” . $pcode . “</td>”;

echo “<th>Country</th>”;

echo “<td>” . $country . “</td>”;

echo “</tr>”;

echo “</table>”;