AJAX và đối tượng XMLHttpRequest trong JavaScript

AJAX không phải là một công nghệ đơn lẻ mà là sự kết hợp của nhiều công cụ, trong đó đối tượng XMLHttpRequest đóng vai trò nền tảng giúp JavaScript có thể giao tiếp với máy chủ một cách bất đồng bộ. Nhờ vào XMLHttpRequest, các website có thể gửi và nhận dữ liệu trong nền, giúp cập nhật nội dung ngay lập tức mà không làm gián đoạn người dùng.

Trong bài viết này, mình sẽ cùng tìm hiểu chi tiết về AJAX, cách hoạt động của XMLHttpRequest, cú pháp, ví dụ minh họa cũng như các ứng dụng thực tế phổ biến trong phát triển web.

AJAX là gì?

AJAX là viết tắt của Asynchronous JavaScript and XML, là một kỹ thuật được sử dụng trong phát triển web để gửi và nhận dữ liệu từ máy chủ một cách bất đồng bộ, nghĩa là không cần tải lại toàn bộ trang web. Điều này giúp nâng cao trải nghiệm người dùng, làm cho các ứng dụng web trở nên mượt mà, nhanh nhạy và hiện đại hơn.

AJAX không phải là một công nghệ riêng biệt

Thay vì là một ngôn ngữ hay framework độc lập, AJAX là sự kết hợp của nhiều công nghệ web hoạt động cùng nhau:

• HTML/CSS: dùng để tạo giao diện và trình bày nội dung.

• JavaScript: xử lý các sự kiện của người dùng (như click, nhập liệu...), thực hiện logic gửi và nhận dữ liệu.

• XMLHttpRequest (hoặc hiện nay có thể thay thế bằng Fetch API): là công cụ giúp gửi request và nhận response từ server.

• JSON hoặc XML: là định dạng dữ liệu được sử dụng để trao đổi giữa client và server.

Cơ chế hoạt động nổi bật của AJAX

AJAX cho phép cập nhật một phần nội dung của trang web, mà không cần reload toàn bộ. Ví dụ: khi bạn gõ tìm kiếm trên Google và kết quả hiện ra ngay lập tức, đó chính là AJAX đang hoạt động.

Ưu điểm chính của AJAX

• Giao tiếp bất đồng bộ: Gửi yêu cầu và tiếp tục xử lý các tác vụ khác trong khi chờ phản hồi từ server.

• Tải nội dung nhanh hơn: Chỉ cần cập nhật phần cần thiết thay vì tải lại toàn trang.

• Cải thiện trải nghiệm người dùng: Mọi thao tác diễn ra mượt mà, không bị gián đoạn.

• Giảm tải cho server: Do không phải truyền lại toàn bộ nội dung trang mỗi khi có tương tác.

Đối tượng XMLHttpRequest là gì?

XMLHttpRequest (XHR) là một đối tượng do trình duyệt cung cấp, cho phép JavaScript gửi yêu cầu HTTP/HTTPS đến máy chủ và nhận phản hồi mà không cần tải lại trang. Đây chính là nền tảng cốt lõi giúp kỹ thuật AJAX hoạt động, đặc biệt là trong giai đoạn trước khi Fetch API được giới thiệu.

Tính năng chính của XMLHttpRequest

• Gửi yêu cầu đến máy chủ một cách bất đồng bộ hoặc đồng bộ (mặc dù bất đồng bộ được khuyến khích sử dụng).

• Hỗ trợ nhiều phương thức HTTP như:

  • GET: lấy dữ liệu.

  • POST: gửi dữ liệu (thường dùng cho form).

  • PUT, DELETE: thường dùng trong RESTful API.

• Nhận dữ liệu phản hồi từ server dưới dạng văn bản (text), XML, hoặc JSON (tuỳ cách xử lý).

• Có thể thiết lập các header tùy chỉnh trong request.

• Cho phép theo dõi trạng thái của request thông qua thuộc tính readyState.

Ứng dụng phổ biến

• Tìm kiếm gợi ý theo thời gian thực (autocomplete).

• Tải thêm bình luận, bài viết, sản phẩm khi người dùng cuộn xuống.

• Gửi form đăng nhập, đăng ký mà không cần tải lại trang.

• Tự động cập nhật dữ liệu bảng điều khiển (dashboard).

Vì sao XMLHttpRequest vẫn quan trọng?

Mặc dù Fetch API đã thay thế dần trong các dự án mới vì cú pháp hiện đại hơn và hỗ trợ Promise, XMLHttpRequest vẫn rất phổ biến vì:

• Được hỗ trợ bởi tất cả các trình duyệt, kể cả các trình duyệt cũ.

• Một số thư viện JavaScript lớn (ví dụ jQuery) vẫn sử dụng XMLHttpRequest bên trong.

• Cho phép kiểm soát chi tiết hơn về trạng thái kết nối, theo dõi tiến độ tải (upload/download), v.v.

IV. Các bước sử dụng XMLHttpRequest

Để thực hiện một yêu cầu HTTP bất đồng bộ với XMLHttpRequest, bạn cần thực hiện theo các bước cơ bản sau:

1. Tạo đối tượng XMLHttpRequest

Đầu tiên, bạn cần khởi tạo một đối tượng XMLHttpRequest:

const xhr = new XMLHttpRequest();

Đây là bước tạo một thể hiện (instance) của công cụ giúp JavaScript giao tiếp với server.

2. Cấu hình yêu cầu với .open()

Sử dụng phương thức .open() để cấu hình loại yêu cầu, URL và chế độ đồng bộ/bất đồng bộ:

xhr.open("GET", "https://api.example.com/data", true);

• "GET": phương thức HTTP (có thể là "POST", "PUT", "DELETE"…).

• "https://api.example.com/data": URL của tài nguyên cần lấy hoặc gửi dữ liệu đến.

• true: chỉ định đây là yêu cầu bất đồng bộ (giá trị mặc định nên luôn dùng).

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

Sau khi gửi yêu cầu, bạn cần xử lý dữ liệu phản hồi bằng một trong hai cách phổ biến:

a. Sử dụng onreadystatechange:

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Dữ liệu nhận được:", xhr.responseText);
  }
};

• readyState === 4: yêu cầu đã hoàn tất.

• status === 200: phản hồi thành công từ server.

b. Hoặc dùng onload (cách đơn giản hơn):

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log("Phản hồi thành công:", xhr.responseText);
  } else {
    console.error("Lỗi từ server:", xhr.statusText);
  }
};

4. Gửi yêu cầu với .send()

Sau khi đã cấu hình xong, bạn gửi yêu cầu:

xhr.send();

xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ username: "admin", password: "1234" }));

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log("Dữ liệu:", xhr.responseText);
  }
};
xhr.send();

xhr.open("GET", "https://api.example.com/data", true);

xhr.send(); // Đối với GET

xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    // xử lý dữ liệu
  }
};

if (xhr.status === 200) {
  console.log("Thành công!");
} else {
  console.log("Lỗi:", xhr.statusText);
}

const jsonData = JSON.parse(xhr.responseText);

const xmlDoc = xhr.responseXML;

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

xhr.onload = function () {
  if (xhr.status === 200) {
    const 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);
  }
};

xhr.onerror = function () {
  console.error("Lỗi kết nối mạng.");
};

xhr.send();

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
  if (xhr.status === 201) {
    const response = JSON.parse(xhr.responseText);
    console.log("Phản hồi từ server:", response);
  } else {
    console.error("Lỗi khi gửi dữ liệu:", xhr.status);
  }
};

const data = {
  title: "Bài viết mới",
  body: "Nội dung bài viết",
  userId: 1
};

xhr.send(JSON.stringify(data));

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/khongton_tai", true);

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log("Dữ liệu:", xhr.responseText);
  } else {
    alert(`Có lỗi xảy ra: ${xhr.status} - ${xhr.statusText}`);
  }
};

xhr.onerror = function () {
  alert("Không thể kết nối tới server.");
};

xhr.send();

if (xhr.readyState === 4 && xhr.status === 200) {
  // xử lý dữ liệu
}