Bài 13: Khám phá Ajax với XMLHttpRequest và Fetch API

Ajax là công nghệ quan trọng trong phát triển ứng dụng web. Nó cho phép trang web gửi yêu cầu đến dịch vụ web hoặc nguồn tài nguyên bên ngoài để hiển thị dữ liệu mà không cần làm mới trang. Thay vì gửi yêu cầu đến máy chủ và đợi phản hồi, Ajax cho phép trang web tải dữ liệu một cách bất đồng bộ.

Ajax không phải là một công nghệ cụ thể, mà nó chỉ đề cập đến các kỹ thuật tải dữ liệu từ máy chủ bằng cách sử dụng mã nguồn mặt khách mà không cần làm mới toàn bộ trang web. Trong quá trình phát triển, đã có nhiều phương pháp Ajax được giới thiệu. Tuy nhiên, hai phương pháp chính vẫn tồn tại và hầu hết các framework JavaScript sử dụng ít nhất một trong số chúng.

Trong bài viết này, chúng ta sẽ tìm hiểu ưu điểm và nhược điểm của XMLHttpRequest - phương pháp cũ, và Fetch API - phiên bản hiện đại tương đương của nó. Nhờ đó, bạn có thể quyết định phương pháp Ajax nào phù hợp nhất cho ứng dụng của mình.

XMLHttpRequest

XMLHttpRequest xuất hiện lần đầu vào năm 1999 như một thành phần ActiveX không chuẩn trong trình duyệt Internet Explorer 5.0. Microsoft phát triển nó nhằm cung cấp khả năng cho phiên bản dựa trên trình duyệt của họ của Outlook. Lúc đó, XML là định dạng dữ liệu phổ biến nhất, nhưng XMLHttpRequest hỗ trợ cả văn bản và JSON mà chưa được phát minh.

Jesse James Garrett đề xuất thuật ngữ "AJAX" trong bài viết của mình năm 2005 có tựa đề "AJAX: Một Cách Tiếp Cận Mới Đối Với Ứng Dụng Web". Dự án như Gmail và Google Maps đã tồn tại trước đó, nhưng thuật ngữ này đã kích thích các nhà phát triển và dẫn đến sự bùng nổ của trải nghiệm Web 2.0 mượt mà.

AJAX là viết tắt của "Asynchronous JavaScript and XML", tuy nhiên thực tế, không cần thiết phải sử dụng các phương pháp không đồng bộ, JavaScript, hay XML. Ngày nay, thuật ngữ "Ajax" được sử dụng chung cho mọi quy trình phía máy khách nhằm lấy dữ liệu từ máy chủ và cập nhật DOM mà không cần làm mới toàn bộ trang web.

XMLHttpRequest được hỗ trợ bởi tất cả các trình duyệt phổ biến và trở thành tiêu chuẩn web chính thức từ năm 2006.

Sử dụng XMLHttpRequest

1. Cài đặt XMLHttpRequest

Bắt đầu bằng cách tạo và cấu hình đối tượng XMLHttpRequest. Dưới đây là một ví dụ đơn giản:

// Ví dụ về việc tạo đối tượng XMLHttpRequest
var xhttp = new XMLHttpRequest();

2. Gửi yêu cầu HTTP

Hướng dẫn cách gửi yêu cầu GET và POST sử dụng XMLHttpRequest.

// Gửi yêu cầu GET đến một API
xhttp.open("GET", "https://example.com/api/data", true);
xhttp.send();

// Gửi yêu cầu POST với dữ liệu
xhttp.open("POST", "https://example.com/api/postData", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(JSON.stringify({ key: "value" }));

3. Xử lý dữ liệu động

Hướng dẫn cách xử lý dữ liệu động trả về từ máy chủ và cập nhật giao diện người dùng.

// Xử lý dữ liệu khi nhận được phản hồi từ máy chủ
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    // Cập nhật giao diện người dùng với dữ liệu mới
  }
};

Khám phá Fetch API

Fetch là một API yêu cầu Ajax dựa trên Promise xuất hiện lần đầu vào năm 2015 và được hỗ trợ trên hầu hết các trình duyệt. Nó không được xây dựng trên XMLHttpRequest và cung cấp cú pháp ngắn gọn và nhất quán hơn.

1. Sử dụng Fetch API

Fetch API giúp việc gửi yêu cầu trở nên đơn giản hơn. Dưới đây là một ví dụ sử dụng Fetch để gửi yêu cầu GET:

// Sử dụng Fetch API để gửi yêu cầu GET
fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

2. Gửi yêu cầu POST với Fetch API

Tiếp theo, hướng dẫn cách sử dụng Fetch API để gửi yêu cầu POST với dữ liệu.

// Gửi yêu cầu POST với Fetch API
fetch("https://example.com/api/postData", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ key: "value" })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

3. Xử lý dữ liệu trả về

Cuối cùng, chúng ta sẽ tìm hiểu cách xử lý dữ liệu trả về từ máy chủ khi sử dụng Fetch API.

// Xử lý dữ liệu khi sử dụng Fetch API
fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    // Xử lý dữ liệu và cập nhật giao diện người dùng
  })
  .catch(error => console.error("Error:", error));

Fetch là một cách làm sạch, đơn giản và thường được sử dụng trong Service Workers. Với Fetch API, bạn chỉ cần quan tâm đến yêu cầu và phản hồi mà bạn muốn, các chi tiết phức tạp của HTTP đã được giấu đi.

Với hiểu biết vững về XMLHttpRequest và Fetch API, bạn có thể tối ưu hóa giao tiếp mạng trong ứng dụng web của mình. Lưu ý rằng phương pháp Ajax sử dụng phụ thuộc vào yêu cầu cụ thể của dự án và sự thoải mái của lập trình viên. Hãy tiếp tục thực hành để làm chủ những kỹ thuật này và phát triển kỹ năng lập trình web của bạn mỗi ngày!