AJAX (Asynchronous JavaScript and XML) is a web development technique used to create dynamic and interactive web applications. It allows data to be sent and received from a server asynchronously without refreshing the entire page. When combined with PHP, AJAX becomes a powerful tool for creating seamless user experiences.
This tutorial will cover the basics of AJAX, its types, and how to use it with PHP through practical examples.
What is AJAX?
AJAX is not a programming language. It’s a combination of technologies:
- HTML & CSS for page structure and design
- JavaScript for client-side interactivity
- XMLHttpRequest or the
fetch()API for sending requests - PHP (or any server-side language) for handling backend logic
- JSON (or XML) for data exchange
Types of AJAX Requests
There are primarily two types of AJAX requests:
- GET Request
- Sends data through the URL
- Ideal for retrieving data
- Less secure but faster
- Has a length limit
- POST Request
- Sends data through the request body
- Better for sending large or sensitive data
- Slower than GET but more secure
- No length limit
AJAX with PHP: Step-by-Step Tutorial
Let’s walk through a simple example using both GET and POST methods.
1. HTML + JavaScript Frontend (GET Example)
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>AJAX PHP GET Example</title>
</head>
<body>
<h2>Enter your name:</h2>
<input type="text" id="name" />
<button onclick="loadGreeting()">Greet</button>
<p id="result"></p>
<script>
function loadGreeting() {
var name = document.getElementById("name").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "greet.php?name=" + encodeURIComponent(name), true);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
</body>
</html>
2. PHP Backend (greet.php)
phpCopyEdit<?php
if (isset($_GET['name'])) {
$name = htmlspecialchars($_GET['name']);
echo "Hello, " . $name . "! Welcome to AJAX with PHP.";
}
?>
Using POST Method with AJAX and PHP
HTML + JavaScript (POST Example)
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>AJAX PHP POST Example</title>
</head>
<body>
<h2>Login Form</h2>
Username: <input type="text" id="username" /><br/>
Password: <input type="password" id="password" /><br/>
<button onclick="login()">Login</button>
<p id="response"></p>
<script>
function login() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.send(data);
}
</script>
</body>
</html>
PHP Backend (login.php)
phpCopyEdit<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
// Dummy check
if ($username === 'admin' && $password === '1234') {
echo "Login successful!";
} else {
echo "Invalid credentials.";
}
}
?>
Conclusion
AJAX and PHP together allow for building responsive web applications without page reloads. By understanding the GET and POST request types, and seeing real examples, you can begin integrating AJAX into your PHP-based applications. AJAX can also be used with modern tools like jQuery, Axios, and fetch() API for more advanced use cases.
Once mastered, AJAX enhances user experience dramatically by making web applications faster and more interactive.