We are going to do a performance test on getting the data from MySQL database using PHP vs getting data from MySQL database using AJAX in Javascript. We have a database named classicmodels and a table named orderDetails.
In both the cases, we are fetching data from MySQL database with the help of PHP. But in 1st case, we load the data directly via PHP. And in 2nd case, we load the data via AJAX. It is basically loading the data PHP vs Javascript.
Following is a code that will get the data from database using PHP:
<table>
<tr>
<th>Order number</th>
<th>Product code</th>
<th>Quantity ordered</th>
<th>Price each</th>
<th>Order line number</th>
</tr>
<?php
$conn = mysqli_connect("localhost:8889", "root", "root", "classicmodels") or die(mysqli_connect_error());
$sql = "SELECT * FROM orderdetails";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_object($result))
{
?>
<tr>
<td><?php echo $row->orderNumber; ?></td>
<td><?php echo $row->productCode; ?></td>
<td><?php echo $row->quantityOrdered; ?></td>
<td><?php echo $row->priceEach; ?></td>
<td><?php echo $row->orderLineNumber; ?></td>
</tr>
<?php
}
?>
</table>
We have created a table with 5 columns. Then we are making a connection with the MySQL database. Then we are getting all the data from orderDetails table. We are using a while loop to loop through all records and mysqli_fetch_object function will return the next row in each iteration. When we use PHP to get data from the database, we get the following results in performance:
Now we use the same database, same table, the same number of records, and the same output. In order to get the data using Javascript, we need to create an HTML tag for the table. No need to run any PHP query, not even connection with the database. Give a unique ID to the tag where you want to display all data, in this case, we want to show the data in the table so we have given an ID to tbody tag. Then we are sending an AJAX (no jQuery needed) to test.php file and when the response is received from that file, then we display that data in tbody tag. The response sent from test.php is JSON string so we have to decode that using Javascript JSON.parse function.
index.php
<table>
<tr>
<th>Order number</th>
<th>Product code</th>
<th>Quantity ordered</th>
<th>Price each</th>
<th>Order line number</th>
</tr>
<tbody id="data"></tbody>
</table>
<script>
var ajax = new XMLHttpRequest();
ajax.open("POST", "test.php", true);
ajax.send();
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
var data = JSON.parse(this.responseText);
console.log(data);
var html = "";
for(var a = 0; a < data.length; a++) {
html += "<tr>";
html += "<td>" + data[a].orderNumber + "</td>";
html += "<td>" + data[a].productCode + "</td>";
html += "<td>" + data[a].quantityOrdered + "</td>";
html += "<td>" + data[a].priceEach + "</td>";
html += "<td>" + data[a].orderLineNumber + "</td>";
html += "</tr>";
}
document.getElementById("data").innerHTML += html;
}
};
</script>
Now we need to create a file that will handle that AJAX request. This code will be almost same as we did in simple PHP, but instead of displaying all data, we are adding all data in an array and sending that array as a JSON string to AJAX response using PHP built-in json_encode() function.
test.php
<?php
$conn = mysqli_connect("localhost:8889", "root", "root", "classicmodels") or die(mysqli_connect_error());
$sql = "SELECT * FROM orderdetails";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_object($result))
{
array_push($data, $row);
}
echo json_encode($data);
exit();
?>
And these are the results we get when we fetch data from database using Javascript and AJAX:
Conclusion
| Performance | PHP | Javascript |
|---|---|---|
| Page speed | 74% | 93% |
| Time to load page | 8.6 seconds | 5.5 seconds |
| Page size | 1.24 MB | 966 KB |
| Requests | 140 | 62 |
[wpdm_package id=’475′]
