Giới thiệu về AJAX trong JavaScript

Trong thời đại web hiện đại, người dùng không còn muốn phải chờ đợi một trang web tải lại toàn bộ chỉ để cập nhật một phần nhỏ thông tin. Việc tải lại trang không chỉ gây mất thời gian mà còn làm giảm trải nghiệm người dùng, đặc biệt trong các ứng dụng có tính tương tác cao như mạng xã hội, hệ thống quản lý hay các trang thương mại điện tử. Để giải quyết vấn đề này, công nghệ AJAX (Asynchronous JavaScript and XML) ra đời như một giải pháp hiệu quả. AJAX cho phép các ứng dụng web giao tiếp với máy chủ một cách bất đồng bộ, nghĩa là dữ liệu có thể được gửi và nhận mà không cần tải lại toàn bộ trang. Nhờ đó, trải nghiệm người dùng trở nên mượt mà, linh hoạt và nhanh chóng hơn bao giờ hết.

Trong bài viết này, mình sẽ cùng tìm hiểu AJAX là gì, cách hoạt động, cách sử dụng trong JavaScript cũng như những lợi ích và ứng dụng thực tiễn của nó.

AJAX là gì?

AJAX (viết tắt của Asynchronous JavaScript and XML) là một kỹ thuật lập trình giúp các trang web có thể giao tiếp với máy chủ một cách bất đồng bộ — tức là gửi và nhận dữ liệu từ server mà không cần tải lại toàn bộ trang web.

Điều này mang lại trải nghiệm người dùng mượt mà và linh hoạt hơn, vì chỉ phần dữ liệu cần cập nhật mới được thay đổi thay vì phải refresh lại toàn bộ giao diện.

AJAX không phải là một ngôn ngữ lập trình mới

Thực chất, AJAX là sự kết hợp của nhiều công nghệ web quen thuộc, bao gồm:

• HTML/CSS: Dùng để xây dựng cấu trúc và định dạng hiển thị cho nội dung của trang web.

• JavaScript: Điều khiển các hành vi động trên giao diện, như gửi yêu cầu đến server, xử lý dữ liệu phản hồi, cập nhật nội dung hiển thị.

• XMLHttpRequest (XHR) hoặc Fetch API: Đây là thành phần chính giúp gửi và nhận dữ liệu giữa trình duyệt và server một cách bất đồng bộ.

• XML hoặc JSON: Là định dạng dùng để truyền dữ liệu. Ngày nay, JSON phổ biến hơn XML vì cú pháp ngắn gọn và dễ sử dụng trong JavaScript.

Tại sao gọi là “bất đồng bộ” (Asynchronous)?

Với AJAX, các yêu cầu tới server được thực hiện song song với các thao tác khác của người dùng. Điều này có nghĩa là:

• Giao diện không bị “đóng băng” khi đang lấy dữ liệu.

• Người dùng có thể tiếp tục tương tác với trang trong khi dữ liệu đang được xử lý.

Ví dụ: Khi bạn tìm kiếm trên Google, chỉ vài ký tự bạn gõ vào ô tìm kiếm là kết quả đã xuất hiện ngay lập tức mà không cần reload trang — chính là nhờ kỹ thuật AJAX.

Cách hoạt động của AJAX trong JavaScript

Để hiểu rõ AJAX hoạt động như thế nào, ta có thể hình dung toàn bộ quy trình gồm 4 bước cơ bản sau:

Người dùng thực hiện một hành động trên giao diện

Đây là điểm khởi đầu cho quá trình AJAX. Người dùng có thể:

• Nhấn vào một nút (ví dụ: “Xem thêm”, “Tải bình luận”).

• Nhập dữ liệu vào ô tìm kiếm.

• Chọn một mục từ danh sách dropdown.

• Di chuyển chuột hoặc thực hiện thao tác cuộn trang.

Các hành động này sẽ kích hoạt một sự kiện JavaScript như click, input, change, v.v.

JavaScript tạo một yêu cầu (request) gửi đến server

Sau khi người dùng thao tác, JavaScript (thường dùng XMLHttpRequest hoặc Fetch API) sẽ gửi một yêu cầu HTTP đến server. Yêu cầu này có thể là:

• GET: Lấy dữ liệu từ server (ví dụ: danh sách sản phẩm).

• POST: Gửi dữ liệu người dùng nhập (ví dụ: thông tin đăng ký).

• PUT, DELETE: Dùng trong các ứng dụng nâng cao như quản lý dữ liệu.

Ví dụ (với Fetch API):

fetch('/api/products')
  .then(response => response.json())
  .then(data => console.log(data));

Server xử lý và gửi phản hồi (response)

Trên server (thường là Node.js, PHP, Python, v.v.), dữ liệu được tiếp nhận và xử lý:

• Truy xuất từ cơ sở dữ liệu.

• Kiểm tra, xác thực đầu vào.

• Tính toán hoặc tạo dữ liệu mới.

Sau khi xử lý xong, server sẽ gửi lại một phản hồi (thường ở định dạng JSON) cho phía trình duyệt.

Ví dụ phản hồi:

{
  "products": [
    { "id": 1, "name": "Áo thun", "price": 150000 },
    { "id": 2, "name": "Quần jeans", "price": 300000 }
  ]
}

JavaScript nhận dữ liệu phản hồi và cập nhật nội dung trang

Khi nhận được phản hồi, JavaScript sẽ phân tích (parse) dữ liệu và cập nhật nội dung trang web mà không cần reload.

Ví dụ:

• Thêm sản phẩm mới vào danh sách hiển thị.

• Hiển thị thông báo “Đăng ký thành công”.

• Hiển thị bản đồ, hình ảnh, nội dung động...

.then(data => {
  document.querySelector('#product-list').innerHTML = renderProducts(data.products);
});

Hành động người dùng → Gửi yêu cầu → Server xử lý → Nhận phản hồi → Cập nhật giao diện

Cơ chế hoạt động này giúp trang web linh hoạt hơn, tối ưu trải nghiệm người dùng và giảm tải cho server nhờ chỉ cập nhật những phần cần thiết.

Sử dụng XMLHttpRequest với AJAX trong JavaScript

Trước khi có Fetch API, XMLHttpRequest (XHR) là phương pháp phổ biến để thực hiện các yêu cầu AJAX trong JavaScript. Dù đã có cách làm mới hiện đại hơn, XMLHttpRequest vẫn được sử dụng rộng rãi và hiểu rõ cơ chế của nó giúp bạn nắm vững nền tảng của AJAX.

Tạo đối tượng XMLHttpRequest

Đầu tiên, bạn cần khởi tạo một đối tượng XHR để bắt đầu gửi yêu cầu đến server:

var xhr = new XMLHttpRequest();

Gửi yêu cầu đến server

Sử dụng .open() để cấu hình yêu cầu (phương thức và URL), sau đó gọi .send() để gửi đi:

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.send();

• "GET": phương thức HTTP

• URL: đường dẫn đến tài nguyên hoặc API

• true: bật chế độ bất đồng bộ (nên luôn để true)

Xử lý phản hồi từ server

Sau khi gửi yêu cầu, bạn cần lắng nghe các sự kiện để xử lý phản hồi. Có hai cách phổ biến:

Cách 1: Dùng onreadystatechange

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

Giải thích:

• readyState === 4: nghĩa là yêu cầu đã hoàn thành.

• status === 200: yêu cầu thành công.

• xhr.responseText: chuỗi JSON nhận từ server.

Cách 2: Dùng onload

xhr.onload = function () {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log("Dữ liệu nhận được:", data);
  } else {
    console.error("Lỗi khi tải dữ liệu:", xhr.status);
  }
};

onload là cách viết ngắn gọn hơn, chỉ chạy khi yêu cầu đã hoàn tất.

Ví dụ minh họa đơn giản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>AJAX với XMLHttpRequest</title>
</head>
<body>
  <button onclick="loadData()">Tải dữ liệu</button>
  <pre id="result"></pre>

  <script>
    function loadData() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);

      xhr.onload = function () {
        if (xhr.status === 200) {
          var users = JSON.parse(xhr.responseText);
          document.getElementById("result").textContent = JSON.stringify(users, null, 2);
        } else {
          document.getElementById("result").textContent = "Lỗi tải dữ liệu: " + xhr.status;
        }
      };

      xhr.onerror = function () {
        document.getElementById("result").textContent = "Lỗi kết nối đến server.";
      };

      xhr.send();
    }
  </script>
</body>
</html>

Khi người dùng nhấn nút, trang sẽ gửi yêu cầu AJAX đến một API và hiển thị dữ liệu người dùng dạng JSON mà không cần tải lại trang.

Sử dụng AJAX với Fetch API (hiện đại hơn) trong JavaScript

Fetch API là một API hiện đại được trình duyệt cung cấp để thay thế cho XMLHttpRequest. Fetch sử dụng Promise để xử lý các thao tác bất đồng bộ, giúp mã ngắn gọn, dễ đọc, và dễ kết hợp với async/await.

Cách sử dụng cơ bản

Cú pháp:

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // Xử lý dữ liệu nhận được
  })
  .catch(error => {
    // Xử lý lỗi
  });

Ví dụ: Gửi yêu cầu GET

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error("Lỗi HTTP: " + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log("Dữ liệu nhận được:", data);
  })
  .catch(error => {
    console.error("Lỗi khi fetch dữ liệu:", error);
  });

Giải thích:

• fetch() gửi request GET đến server.

• .then() xử lý Promise trả về.

• response.ok kiểm tra mã trạng thái HTTP.

• response.json() đọc dữ liệu dạng JSON.

Ví dụ: Gửi yêu cầu POST

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Tiêu đề mới",
    body: "Nội dung bài viết",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log("Kết quả POST:", data);
  })
  .catch(error => {
    console.error("Lỗi khi gửi POST:", error);
  });

Lưu ý:

• method: "POST" khai báo phương thức gửi.

• headers: định nghĩa kiểu dữ liệu là application/json.

• body: chứa dữ liệu gửi đi, phải được chuyển sang chuỗi JSON.

Sử dụng Fetch với async/await (dễ đọc hơn)

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    if (!response.ok) {
      throw new Error("Lỗi HTTP: " + response.status);
    }
    const data = await response.json();
    console.log("Dữ liệu:", data);
  } catch (error) {
    console.error("Lỗi:", error);
  }
}

Ưu điểm: Viết theo kiểu tuần tự, dễ hiểu, gọn gàng hơn Promise chaining.

Tổng kết sự khác biệt với XMLHttpRequest:

input.addEventListener("input", function () {
  fetch(`/search?q=${this.value}`)
    .then(res => res.json())
    .then(data => {
      // Hiển thị danh sách gợi ý
    });
});

form.addEventListener("submit", function (e) {
  e.preventDefault();
  const formData = new FormData(form);
  fetch("/submit", {
    method: "POST",
    body: formData,
  })
    .then(res => res.json())
    .then(data => {
      alert("Gửi thành công!");
    });
});

button.addEventListener("click", function () {
  fetch(`/posts?page=2`)
    .then(res => res.text())
    .then(html => {
      document.querySelector("#post-list").innerHTML += html;
    });
});

setInterval(() => {
  fetch("/dashboard/stats")
    .then(res => res.json())
    .then(data => {
      // Cập nhật số liệu lên giao diện
    });
}, 5000);

fetch("/api/data")
  .then(response => {
    if (!response.ok) throw new Error("Lỗi server!");
    return response.json();
  })
  .catch(error => {
    alert("Không thể kết nối server. Vui lòng thử lại!");
  });

document.querySelector("#submit").disabled = true;
document.querySelector("#loading").style.display = "block";

fetch("/submit", { method: "POST" })
  .then(() => {
    document.querySelector("#message").textContent = "Gửi thành công!";
  })
  .catch(() => {
    document.querySelector("#message").textContent = "Lỗi gửi dữ liệu!";
  })
  .finally(() => {
    document.querySelector("#submit").disabled = false;
    document.querySelector("#loading").style.display = "none";
  });