What are the best practices for integrating PHP and JavaScript to update a database without page reload?

When integrating PHP and JavaScript to update a database without a page reload, it is important to use AJAX (Asynchronous JavaScript and XML) to send requests to the server without reloading the entire page. This allows for seamless updates to the database in the background. The PHP script on the server side should handle the request, update the database, and send a response back to the client side JavaScript to update the UI accordingly.

<?php
// Handle the AJAX request
if(isset($_POST['data'])) {
    // Connect to the database
    $conn = new mysqli("localhost", "username", "password", "database");
    
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    
    // Update the database with the received data
    $data = $_POST['data'];
    $sql = "UPDATE table SET column = '$data' WHERE id = 1";
    
    if ($conn->query($sql) === TRUE) {
        echo "Record updated successfully";
    } else {
        echo "Error updating record: " . $conn->error;
    }
    
    $conn->close();
}
?>