PHP and Ajax: Building responsive Ajax applications

This tutorial shows how to build Ajax applications using PHP and Ajax. First, create the database and tables (step 1), then establish a PHP connection (step 2). Next, write JavaScript code to send the Ajax request (step 3), handle the Ajax request (step 4), and finally create the web form (step 5). By running this application, you can confirm that the user was successfully added to the database.

PHP and Ajax: Building Responsive Ajax Applications

Introduction

Ajax (Asynchronous JavaScript and XML) is a technology that allows web applications to communicate with the server without reloading the entire page. This makes it possible to build responsive and user-friendly applications. This tutorial demonstrates how to build a simple Ajax application using PHP and Ajax.

Prerequisites

• PHP Server
• MySQL Database
• Basic Web Development Knowledge

Step 1: Create database and tables

Create a MySQL database named "users" and create a table named "users":

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

Step 2: Establish a PHP connection

In the PHP file, establish a connection to the MySQL database:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "users";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
?>

Step 3: Ajax using JavaScript

Write the following JavaScript code, which will send an Ajax request to the add_user.php file:

function addUser() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "add_user.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name=" + name + "&email=" + email);

  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      alert(response);
    }
  };
}

Step 4: Handle the Ajax request

Create add_user. php file that handles Ajax requests from JavaScript:

<?php
// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];

// Insert data into the database
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();

// Send a success message back to the client
echo "User added successfully!";

// Close the database connection
$conn->close();
?>

Step 5: Web Form

Create an HTML form for entering user name and email:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">

  <label for="email">Email:</label>
  <input type="text" id="email">

  <button type="button" onclick="addUser()">Add User</button>
</form>

Practical case

Now, you can run this Ajax application. Open your web browser's developer tools (such as Chrome's console) and click the "Add User" button. You should see a pop-up message confirming that the user was successfully added to the database.

Expand Learning

• Use JSON and Web services for data interaction
• Ajax and PHP libraries (such as jQuery)
• Ajax Security Best Practices

The above is the detailed content of PHP and Ajax: Building responsive Ajax applications. For more information, please follow other related articles on the PHP Chinese website!