AJAX PHP Example

AJAX and PHP can work together to create dynamic, server-driven content without reloading the page. Using AJAX, data is sent to a PHP script on the server, which processes the request and sends back a response. The client-side JavaScript then updates the web page dynamically with the received data.

Steps to Implement AJAX with PHP

  1. Create the Client-Side HTML and JavaScript:
    • Use an HTML form or button to trigger an AJAX request.
    • Implement JavaScript to send the request and handle the response.
  2. Create the Server-Side PHP Script:
    • Handle the incoming request.
    • Process data (e.g., access a database, perform calculations).
    • Send the response back to the client.

Example: Fetch and Display Data from PHP

HTML and JavaScript Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX PHP Example</title>
  <script>
    function fetchData() {
      let xhr = new XMLHttpRequest();
      xhr.open("GET", "server.php", true);
      
      xhr.onload = function() {
        if (xhr.status === 200) {
          document.getElementById("output").innerHTML = xhr.responseText;
        } else {
          console.error("Error:", xhr.status, xhr.statusText);
        }
      };
      
      xhr.onerror = function() {
        console.error("Network error occurred.");
      };
      
      xhr.send();
    }
  </script>
</head>
<body>
  <h1>AJAX PHP Example</h1>
  <button onclick="fetchData()">Fetch Data</button>
  <div id="output">Click the button to load data.</div>
</body>
</html>

PHP Code (server.php):

<?php
// Simulating a database query or data generation
$data = [
    ["id" => 1, "name" => "Alice", "email" => "[email protected]"],
    ["id" => 2, "name" => "Bob", "email" => "[email protected]"],
    ["id" => 3, "name" => "Charlie", "email" => "[email protected]"]
];

// Convert data to an HTML table
$output = "<table border='1'><tr><th>ID</th><th>Name</th><th>Email</th></tr>";
foreach ($data as $row) {
    $output .= "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['email']}</td></tr>";
}
$output .= "</table>";

// Return the generated HTML
echo $output;
?>

Explanation of the Code

  1. HTML and JavaScript:
    • A button is used to trigger the fetchData() function.
    • The XMLHttpRequest object is used to make an asynchronous GET request to server.php.
    • The server’s response (an HTML table) is displayed inside the #output div.
  2. PHP Script:
    • The PHP script simulates fetching data from a database or another source.
    • The data is formatted as an HTML table and returned as the response.

Example with POST Request

For sending data to the server, use a POST request:

JavaScript Code (POST):

function sendData() {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "process.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById("response").innerText = xhr.responseText;
    }
  };

  xhr.send("name=John&age=30");
}

PHP Code (process.php):

<?php
$name = $_POST['name'] ?? 'Unknown';
$age = $_POST['age'] ?? 'Unknown';

echo "Received: Name = $name, Age = $age";
?>

HTML Code for POST Example:

<button onclick="sendData()">Send Data</button>
<div id="response"></div>

Conclusion

AJAX and PHP offer a powerful combination for creating dynamic, data-driven web applications. With these examples, you can fetch data from the server, send user inputs for processing, or interact with databases efficiently. For more examples and tutorials, check out The Coding College.

Leave a Comment