Ví dụ sử dụng AJAX với PHP trong JavaScript
Javascript nâng cao | by
Trong thời đại web hiện đại, người dùng mong muốn các ứng dụng hoạt động mượt mà, phản hồi nhanh chóng và không cần tải lại toàn bộ trang mỗi khi thực hiện một thao tác nhỏ. Đây chính là lúc công nghệ AJAX phát huy sức mạnh. AJAX cho phép trình duyệt gửi và nhận dữ liệu từ máy chủ một cách bất đồng bộ – nghĩa là người dùng có thể tiếp tục tương tác với giao diện trong khi dữ liệu đang được xử lý ở phía server.
Khi kết hợp AJAX với ngôn ngữ PHP – một công cụ xử lý phía máy chủ phổ biến – chúng ta có thể tạo ra các ứng dụng web linh hoạt và tối ưu trải nghiệm người dùng hơn rất nhiều. Thay vì gửi cả trang đến server, bạn chỉ cần gửi dữ liệu cần thiết, để PHP xử lý và trả lại kết quả, giúp tiết kiệm tài nguyên và thời gian.
Trong bài viết này, mình sẽ cùng tìm hiểu cách sử dụng AJAX trong JavaScript để giao tiếp với các file PHP, qua những ví dụ thực tế như gửi dữ liệu form, nhận danh sách từ server, và xử lý phản hồi hiệu quả.
Tổng quan về AJAX và PHP trong JavaScript
AJAX là gì?
AJAX (Asynchronous JavaScript and XML) là một kỹ thuật lập trình web cho phép gửi và nhận dữ liệu từ máy chủ một cách bất đồng bộ, mà không cần tải lại toàn bộ trang web. AJAX không phải là một ngôn ngữ mới, mà là sự kết hợp của nhiều công nghệ:
-
HTML/CSS: để hiển thị nội dung trên trang.
-
JavaScript: để xử lý logic, tương tác với DOM và gửi yêu cầu.
-
XMLHttpRequest (hoặc Fetch API): để gửi và nhận dữ liệu.
-
JSON/XML/Text: là định dạng dữ liệu trao đổi giữa client và server.
PHP là gì?
PHP (Hypertext Preprocessor) là một ngôn ngữ kịch bản phía máy chủ (server-side scripting language), được sử dụng phổ biến trong phát triển web. PHP có thể:
-
Xử lý dữ liệu từ biểu mẫu HTML.
-
Truy vấn cơ sở dữ liệu như MySQL.
-
Trả về dữ liệu dưới dạng JSON, XML, hoặc text để trình duyệt sử dụng.
AJAX + PHP là gì?
Khi kết hợp AJAX và PHP, chúng ta có thể tạo ra giao tiếp linh hoạt giữa client và server:
-
JavaScript (AJAX) gửi yêu cầu dữ liệu tới file PHP.
-
File PHP xử lý logic, truy vấn cơ sở dữ liệu, hoặc thực hiện thao tác cần thiết.
-
Sau đó, PHP trả kết quả (thường là JSON) về cho client.
-
JavaScript nhận và hiển thị dữ liệu mà không cần tải lại trang.
Mô hình hoạt động tổng quan của AJAX – PHP
[Trình duyệt người dùng]
|
| (1) Gửi yêu cầu AJAX bằng JS
v
[AJAX (XMLHttpRequest hoặc Fetch API)]
|
| (2) Gửi dữ liệu đến file PHP
v
[PHP (Server)]
|
| (3) Xử lý dữ liệu, truy vấn DB, tạo phản hồi
v
[AJAX nhận dữ liệu phản hồi từ PHP]
|
| (4) Hiển thị kết quả lên giao diện
v
[Giao diện người dùng]
Với mô hình này, trải nghiệm người dùng sẽ mượt mà hơn, đặc biệt trong các thao tác như: tìm kiếm theo thời gian thực, gửi form không reload, tải danh sách sản phẩm, bình luận,...
Thiết lập môi trường trong JavaScript
Để sử dụng AJAX kết hợp với PHP, bạn cần thiết lập một môi trường làm việc bao gồm file HTML (giao diện + JavaScript) và file PHP (xử lý phía server). Dưới đây là hướng dẫn cụ thể:
Cài đặt môi trường máy chủ cục bộ
Để chạy file PHP, bạn cần máy chủ ảo như:
-
XAMPP (Windows, macOS, Linux): https://www.apachefriends.org
-
WAMP (Windows): https://www.wampserver.com
-
MAMP (macOS, Windows): https://www.mamp.info
Khuyến nghị: Sử dụng XAMPP – dễ cài đặt, tích hợp sẵn Apache và PHP.
Sau khi cài XAMPP:
-
Mở XAMPP Control Panel.
-
Start Apache (máy chủ web) và MySQL (nếu bạn có thao tác cơ sở dữ liệu).
-
Đặt toàn bộ file PHP và HTML vào thư mục:
C:\xampp\htdocs\ten_thu_muc_du_an\
Tạo file HTML (Giao diện + JavaScript)
Tạo file index.html trong thư mục dự án, ví dụ:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX với PHP</title>
</head>
<body>
<h3>Nhập tên:</h3>
<input type="text" id="username">
<button onclick="sendData()">Gửi</button>
<p id="result"></p>
<script>
function sendData() {
const xhr = new XMLHttpRequest();
const username = document.getElementById("username").value;
xhr.open("POST", "process.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("result").innerText = xhr.responseText;
}
};
xhr.send("username=" + encodeURIComponent(username));
}
</script>
</body>
</html>
Tạo file PHP để xử lý dữ liệu
Tạo file process.php cùng thư mục với index.html:
<?php
if (isset($_POST['username'])) {
$name = htmlspecialchars($_POST['username']);
echo "Xin chào, " . $name . "!";
} else {
echo "Không nhận được dữ liệu.";
}
?>
Truy cập và chạy thử
-
Mở trình duyệt, truy cập:
https://localhost/ten_thu_muc_du_an/index.html
Nhập tên và nhấn Gửi, AJAX sẽ gửi dữ liệu đến process.php, sau đó PHP xử lý và trả về kết quả, hiển thị ngay trên trang mà không cần reload.
Gửi dữ liệu đơn giản từ client đến PHP trong JavaScript
Mục tiêu:
Gửi tên người dùng từ giao diện HTML (form input) đến server (file PHP), sau đó nhận phản hồi và hiển thị nội dung trả về mà không cần reload trang.
Tạo file HTML (giao diện + JavaScript)
Tên file: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX gửi tên người dùng</title>
</head>
<body>
<h2>Nhập tên của bạn:</h2>
<input type="text" id="username" placeholder="Ví dụ: Kiên">
<button onclick="sendName()">Gửi</button>
<p id="responseText"></p>
<script>
function sendName() {
const name = document.getElementById("username").value;
const 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("responseText").innerText = xhr.responseText;
} else {
document.getElementById("responseText").innerText = "Có lỗi xảy ra!";
}
};
xhr.send("username=" + encodeURIComponent(name));
}
</script>
</body>
</html>
Tạo file PHP để xử lý dữ liệu từ client
Tên file: process.php
<?php
if (isset($_POST['username']) && !empty($_POST['username'])) {
$name = htmlspecialchars($_POST['username']); // Xử lý tránh XSS
echo "Xin chào, " . $name . "!";
} else {
echo "Vui lòng nhập tên của bạn.";
}
?>
Cách hoạt động của ví dụ này
| Bước | Mô tả |
|---|---|
| 1. | Người dùng nhập tên và nhấn Gửi |
| 2. | JavaScript dùng XMLHttpRequest gửi dữ liệu bằng phương thức POST |
| 3. | File process.php nhận dữ liệu qua biến $_POST |
| 4. | PHP xử lý và phản hồi lại một chuỗi HTML |
| 5. | JavaScript nhận phản hồi và hiển thị kết quả lên trang |
Lấy dữ liệu từ server bằng PHP trong JavaScript
Trong ví dụ này, JavaScript sẽ gửi một yêu cầu AJAX đến một file PHP, và PHP sẽ trả về danh sách sản phẩm dưới dạng JSON. Sau đó JavaScript sẽ phân tích dữ liệu JSON và hiển thị lên giao diện mà không cần tải lại trang.
Tạo file HTML và JavaScript
Tên file: products.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lấy danh sách sản phẩm bằng AJAX</title>
</head>
<body>
<h2>Danh sách sản phẩm</h2>
<button onclick="getProducts()">Tải sản phẩm</button>
<ul id="productList"></ul>
<script>
function getProducts() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "get-products.php", true);
xhr.onload = function () {
if (xhr.status === 200) {
const products = JSON.parse(xhr.responseText); // Phân tích JSON
const list = document.getElementById("productList");
list.innerHTML = ""; // Xóa dữ liệu cũ nếu có
products.forEach(function(product) {
const li = document.createElement("li");
li.textContent = `${product.name} - Giá: ${product.price} VNĐ`;
list.appendChild(li);
});
} else {
alert("Lỗi khi lấy dữ liệu từ server!");
}
};
xhr.send();
}
</script>
</body>
</html>
Tạo file PHP trả về dữ liệu JSON
Tên file: get-products.php
<?php
$products = [
["name" => "Chuột không dây", "price" => 200000],
["name" => "Bàn phím cơ", "price" => 800000],
["name" => "Tai nghe gaming", "price" => 350000]
];
// Thiết lập header để trình duyệt hiểu là JSON
header('Content-Type: application/json');
// Trả về dữ liệu JSON
echo json_encode($products);
?>
