Ajax là công nghệ cốt lõi đằng sau phần lớn các ứng dụng web. Nó cho phép một trang web gửi yêu cầu đến một dịch vụ web (hoặc bất kỳ nguồn tài nguyên ngoại vi nào) để dữ liệu có thể được hiển thị mà không cần phải làm mới trang thông qua việc gửi yêu cầu đến máy chủ và đợi phản hồi.
Thuật ngữ Ajax thực sự không phải là một công nghệ; thay vào đó, nó đề cập đến các kỹ thuật có thể tải dữ liệu từ máy chủ thông qua một kịch bản phía máy khách mà không kích hoạt việc làm mới trang web đầy đủ. Nhiều tùy chọn đã được giới thiệu qua các năm. Hai phương pháp chính vẫn tồn tại, và hầu hết các frameworks JavaScript sẽ sử dụng ít nhất một trong số chúng.
Trong bài viết này, chúng ta sẽ xem xét ưu và nhược điểm của XMLHttpRequest, công nghệ cũ, và Fetch API, đối tượng tương đương hiện đại của nó, để quyết định API Ajax nào phù hợp nhất cho ứng dụng của bạn.
XMLHttpRequest xuất hiện lần đầu tiên như một thành phần ActiveX không chuẩn trong Internet Explorer 5.0 vào năm 1999. Microsoft phát triển nó để cung cấp năng lực 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 (hoặc được quảng bá), nhưng XMLHttpRequest hỗ trợ cả văn bản và JSON 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". Các ứng dụng dựa trên AJAX như Gmail và Google Maps đã tồn tại từ 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ổ trong trải nghiệm Web 2.0 mượt mà.
AJAX là viết tắt của "Asynchronous JavaScript and XML", mặc dù, nói chính xác, nhà phát triển không cần phải sử dụng các phương pháp không đồng bộ, JavaScript, hoặc XML. Ngày nay, chúng ta sử dụng thuật ngữ "Ajax" chung cho bất kỳ quy trình phía máy khách nào lấy dữ liệu từ máy chủ và cập nhật DOM mà không yêu cầu làm mới trang web đầy đủ.
XMLHttpRequest được hỗ trợ bởi tất cả các trình duyệt phổ biến và trở thành một tiêu chuẩn web chính thức từ năm 2006.
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:
// Một ví dụ đơn giản về việc tạo đối tượng XMLHttpRequest
var xhttp = new XMLHttpRequest();
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" }));
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
}
};
Fetch là một API yêu cầu Ajax dựa trên Promise hiện đại xuất hiện lần đầu tiên 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 sự nhất quán tốt hơn với cú pháp ngắn gọn hơn.
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));
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));
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 hơn, đơn giản hơn và thường được sử dụng trong Service Workers. Với phương pháp Fetch API, bạn thực sự chỉ cần quan tâm đến yêu cầu bạn muốn gửi và phản hồi bạn muốn nhận lại. Các chi tiết phức tạp của HTTP đã được ẩn đi.
Với sự 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 sự chọn lựa giữa chúng thườ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!
Đăng ký tư vấn miễn phí
