Các ví dụ về AJAX về thực tế trong JavaScript
Javascript nâng cao | by
Trong thời đại phát triển mạnh mẽ của các ứng dụng web tương tác, người dùng ngày càng kỳ vọng vào những trải nghiệm mượt mà, nhanh chóng và tiện lợi. Một trong những công nghệ cốt lõi giúp hiện thực hóa điều đó chính là AJAX (Asynchronous JavaScript and XML). Thay vì phải tải lại toàn bộ trang mỗi khi người dùng thao tác, AJAX cho phép gửi và nhận dữ liệu từ server một cách bất đồng bộ, từ đó nâng cao hiệu suất và cải thiện trải nghiệm người dùng rõ rệt.
Trong JavaScript, AJAX không chỉ là một khái niệm kỹ thuật mà còn là công cụ thiết yếu để xây dựng các tính năng hiện đại như tìm kiếm gợi ý, nạp nội dung động, gửi form không tải lại trang, và rất nhiều ứng dụng thực tế khác. Bài viết này sẽ giới thiệu những ví dụ cụ thể, gần gũi và dễ triển khai giúp bạn hiểu rõ hơn cách ứng dụng AJAX trong lập trình JavaScript một cách hiệu quả và chuyên nghiệp.
Tổng quan ngắn về cách hoạt động của AJAX trong JavaScript
AJAX (Asynchronous JavaScript and XML) là một kỹ thuật cho phép các trang web giao tiếp với máy chủ và lấy dữ liệu mà không cần tải lại trang. Cách hoạt động của AJAX có thể được chia thành ba bước chính:
Gửi yêu cầu bất đồng bộ từ client đến server
Khi người dùng thực hiện một thao tác trên giao diện người dùng (ví dụ: nhấp vào nút, thay đổi một ô nhập liệu, cuộn trang), JavaScript sẽ gửi một yêu cầu đến máy chủ để lấy hoặc gửi dữ liệu. Yêu cầu này được gửi một cách bất đồng bộ (asynchronously), có nghĩa là giao diện người dùng vẫn tiếp tục hoạt động mà không bị gián đoạn.
Có hai phương pháp chính để gửi yêu cầu AJAX:
-
XMLHttpRequest (XHR): Đây là phương pháp cổ điển, được sử dụng phổ biến trong các ứng dụng trước khi Fetch API ra đời. Với
XMLHttpRequest, chúng ta tạo một đối tượng XHR, thiết lập loại yêu cầu (GET, POST), URL và gửi yêu cầu. -
Fetch API: Đây là phương pháp hiện đại hơn, được phát triển để thay thế XMLHttpRequest, với cú pháp đơn giản và hỗ trợ Promise. Fetch API cho phép gửi yêu cầu HTTP và xử lý phản hồi bằng cách sử dụng
.then()và.catch().
Ví dụ về gửi yêu cầu bằng Fetch API:
fetch('https://api.example.com/data')
.then(response => response.json()) // Phản hồi được chuyển thành JSON
.then(data => console.log(data)) // Dữ liệu nhận được
.catch(error => console.error('Lỗi:', error));
Server xử lý yêu cầu và trả về dữ liệu
Khi máy chủ nhận được yêu cầu từ client, nó sẽ xử lý yêu cầu đó (có thể truy vấn cơ sở dữ liệu, thực hiện tính toán, hoặc các thao tác khác) và trả lại một phản hồi. Phản hồi này có thể ở nhiều định dạng khác nhau, nhưng phổ biến nhất là:
-
JSON: Định dạng dữ liệu nhẹ, dễ dàng sử dụng với JavaScript nhờ phương thức
JSON.parse()vàJSON.stringify(). -
XML: Mặc dù ít phổ biến hơn JSON trong các ứng dụng hiện đại, XML vẫn được sử dụng trong một số hệ thống cũ hoặc API.
-
Text: Đối với những dữ liệu không cần cấu trúc như thông báo đơn giản hoặc giá trị trả về từ server.
Một ví dụ về phản hồi JSON từ server:
{
"status": "success",
"message": "Dữ liệu đã được cập nhật"
}
JavaScript nhận phản hồi và cập nhật nội dung trang mà không cần reload
Sau khi server trả về dữ liệu, JavaScript trên client sẽ nhận được phản hồi và tiếp tục xử lý. Tùy thuộc vào loại dữ liệu (JSON, XML, hoặc text), JavaScript có thể cập nhật nội dung trang mà không cần tải lại trang (refresh). Điều này mang lại trải nghiệm người dùng mượt mà và tiết kiệm băng thông, vì chỉ các phần cần thiết của trang mới được thay đổi.
Ví dụ: Nếu nhận được dữ liệu JSON từ server, bạn có thể cập nhật giao diện người dùng như sau:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Cập nhật nội dung trang bằng dữ liệu nhận được
document.getElementById('result').innerHTML = data.message;
})
.catch(error => console.error('Lỗi:', error));
Trong ví dụ trên, sau khi nhận được phản hồi JSON, JavaScript sẽ sử dụng dữ liệu để cập nhật phần tử có id result trên trang mà không cần phải tải lại toàn bộ trang web.
Gửi form không cần tải lại trang trong JavaScript
Trong ví dụ này, chúng ta sẽ tạo một form đăng ký hoặc liên hệ và sử dụng AJAX để gửi thông tin mà không cần tải lại trang. Việc này giúp trải nghiệm người dùng trở nên mượt mà hơn, giảm thiểu thời gian chờ đợi và không làm gián đoạn tương tác của người dùng với trang web.
Các bước thực hiện:
HTML form
Trước tiên, ta tạo một form cơ bản trong HTML, nơi người dùng có thể điền thông tin và gửi đi mà không cần phải tải lại trang. Ví dụ, đây là form đăng ký thông tin người dùng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng ký</title>
</head>
<body>
<h2>Đăng ký người dùng</h2>
<form id="registrationForm">
<label for="name">Họ và tên:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Thông điệp:</label><br>
<textarea id="message" name="message" required></textarea><br><br>
<button type="submit">Gửi</button>
</form>
<div id="responseMessage"></div>
<script src="app.js"></script>
</body>
</html>
Ở đây, form có ba trường thông tin: Họ và tên, Email và Thông điệp. Khi người dùng nhấn nút "Gửi", dữ liệu sẽ được gửi qua AJAX thay vì tải lại trang.
JavaScript gửi dữ liệu bằng phương thức POST
Tiếp theo, chúng ta sẽ sử dụng JavaScript và AJAX (qua Fetch API hoặc XMLHttpRequest) để gửi dữ liệu từ form tới server. Sau khi form được gửi, dữ liệu sẽ được gửi tới server mà không cần tải lại trang.
Dưới đây là mã JavaScript sử dụng Fetch API để gửi dữ liệu từ form:
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Ngăn chặn hành động mặc định (tải lại trang)
// Lấy dữ liệu từ form
const formData = new FormData(this);
// Gửi dữ liệu tới server bằng Fetch API (phương thức POST)
fetch('processForm.php', {
method: 'POST',
body: formData
})
.then(response => response.json()) // Xử lý phản hồi từ server dưới dạng JSON
.then(data => {
// Hiển thị thông báo thành công/thất bại
const responseMessage = document.getElementById('responseMessage');
if (data.status === 'success') {
responseMessage.innerHTML = `<p style="color: green;">${data.message}</p>`;
} else {
responseMessage.innerHTML = `<p style="color: red;">${data.message}</p>`;
}
})
.catch(error => {
console.error('Lỗi:', error);
});
});
Giải thích mã JavaScript:
-
event.preventDefault(): Ngừng hành động mặc định của form (tải lại trang).
-
FormData(this): Thu thập tất cả dữ liệu từ form và chuẩn bị chúng cho việc gửi đi.
-
fetch('processForm.php', {...}): Gửi dữ liệu tới server bằng phương thức POST. Dữ liệu được gửi dưới dạng
FormData, giúp dễ dàng xử lý trên server mà không cần phải chuyển đổi. -
response.json(): Server trả về dữ liệu dưới dạng JSON, và JavaScript sẽ xử lý phản hồi này.
-
Cập nhật giao diện: Sau khi nhận được phản hồi từ server, JavaScript sẽ hiển thị thông báo thành công hoặc thất bại trong phần tử
#responseMessage.
PHP/Node.js nhận dữ liệu, xử lý, và trả kết quả
Ở phía server, chúng ta sẽ sử dụng PHP hoặc Node.js để xử lý dữ liệu nhận được từ client. Ví dụ dưới đây sử dụng PHP để nhận và xử lý dữ liệu từ form.
PHP (processForm.php):
<?php
header('Content-Type: application/json'); // Đảm bảo phản hồi là JSON
// Kiểm tra xem dữ liệu đã được gửi qua POST chưa
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Lấy dữ liệu từ form
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// Xử lý dữ liệu (ví dụ: lưu vào cơ sở dữ liệu, gửi email, v.v.)
// Ở đây, ta chỉ kiểm tra xem dữ liệu có hợp lệ không
if (empty($name) || empty($email) || empty($message)) {
echo json_encode(['status' => 'error', 'message' => 'Vui lòng điền đầy đủ thông tin.']);
} else {
echo json_encode(['status' => 'success', 'message' => 'Thông tin của bạn đã được gửi thành công!']);
}
}
?>
Giải thích mã PHP:
-
$_POST: Lấy dữ liệu gửi từ client qua phương thức POST.
-
json_encode(): Trả về phản hồi dưới dạng JSON. Dữ liệu JSON này sẽ được JavaScript xử lý và hiển thị cho người dùng.
JavaScript hiển thị thông báo thành công/thất bại
Sau khi nhận được phản hồi từ server, JavaScript sẽ kiểm tra giá trị của trường status trong dữ liệu JSON và hiển thị thông báo phù hợp.
-
Nếu
statuslàsuccess, sẽ hiển thị thông báo màu xanh với nội dung "Thông tin của bạn đã được gửi thành công!". -
Nếu
statuslàerror, sẽ hiển thị thông báo màu đỏ với nội dung "Vui lòng điền đầy đủ thông tin."
Kiểm tra tên người dùng trùng khi đăng ký trong JavaScript
Trong ví dụ này, chúng ta sẽ sử dụng AJAX để kiểm tra tên người dùng khi người dùng nhập vào ô đăng ký, giúp người dùng biết ngay liệu tên họ chọn đã tồn tại trong cơ sở dữ liệu hay chưa mà không cần phải gửi toàn bộ form. Điều này giúp cải thiện trải nghiệm người dùng và giảm thiểu thời gian phản hồi.
Các bước thực hiện:
HTML: Tạo form đăng ký
Chúng ta sẽ tạo một form đơn giản với ô nhập tên người dùng và một trường nhập email. Khi người dùng gõ tên người dùng vào ô input, hệ thống sẽ tự động kiểm tra xem tên người dùng đó đã tồn tại trong cơ sở dữ liệu hay chưa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng ký người dùng</title>
</head>
<body>
<h2>Đăng ký tài khoản</h2>
<form id="registrationForm">
<label for="username">Tên người dùng:</label><br>
<input type="text" id="username" name="username" required><br>
<span id="usernameResponse" style="color: red;"></span><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Đăng ký</button>
</form>
<script src="app.js"></script>
</body>
</html>
Trong form này, chúng ta có trường "Tên người dùng" (username). Khi người dùng gõ vào ô này, chúng ta sẽ kiểm tra tên người dùng đó có tồn tại trong cơ sở dữ liệu hay không. Nếu tên đã tồn tại, hệ thống sẽ thông báo ngay lập tức.
JavaScript: Gửi yêu cầu AJAX khi người dùng gõ
Sử dụng sự kiện onkeyup hoặc onblur của ô input để gửi yêu cầu AJAX tới server để kiểm tra tên người dùng. Dưới đây là cách sử dụng onkeyup để gửi yêu cầu khi người dùng nhập vào ô input.
document.getElementById('username').addEventListener('keyup', function() {
const username = this.value;
// Kiểm tra nếu tên người dùng không trống
if (username.length > 0) {
// Gửi yêu cầu AJAX để kiểm tra tên người dùng
fetch('checkUsername.php?username=' + encodeURIComponent(username))
.then(response => response.json())
.then(data => {
const responseMessage = document.getElementById('usernameResponse');
if (data.status === 'exists') {
responseMessage.innerHTML = 'Tên người dùng này đã tồn tại.';
} else {
responseMessage.innerHTML = 'Tên người dùng này có thể sử dụng.';
}
})
.catch(error => {
console.error('Lỗi:', error);
});
} else {
document.getElementById('usernameResponse').innerHTML = ''; // Nếu ô trống, xóa thông báo
}
});
