30. Ajax trong lập trình javascript

Ajax (Asynchronous JavaScript and XML) là một phương pháp trong lập trình JavaScript cho phép trao đổi dữ liệu với máy chủ mà không cần phải tải lại trang web hoặc cửa sổ trình duyệt. Nó cho phép bạn gửi và nhận dữ liệu từ máy chủ ở nền (asynchronously), tức là không làm gián đoạn trải nghiệm người dùng trên trang web.

Ajax không chỉ hạn chế trong việc trao đổi dữ liệu XML như tên gọi, mà nó cũng hỗ trợ định dạng dữ liệu khác như JSON hoặc văn bản thuần túy.

Để thực hiện Ajax trong JavaScript, bạn có thể sử dụng đối tượng XMLHttpRequest (XHR) hoặc các thư viện/framework như Axios, Fetch API hoặc jQuery AJAX.

Dưới đây là một ví dụ về cách sử dụng XMLHttpRequest để thực hiện một yêu cầu Ajax GET đơn giản:

javascript

// Tạo đối tượng XMLHttpRequest
var xhr = new XMLHttpRequest();

// Xác định hàm xử lý khi nhận được phản hồi từ máy chủ
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Xử lý dữ liệu nhận được từ máy chủ
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};

// Xác định yêu cầu
xhr.open("GET", "https://api.example.com/data", true);

// Gửi yêu cầu
xhr.send();

Trong ví dụ trên, chúng ta tạo một đối tượng XMLHttpRequest, xác định hàm xử lý để xử lý dữ liệu nhận được từ máy chủ khi yêu cầu đã hoàn thành (readyState = 4) và thành công (status = 200). Sau đó, chúng ta mở yêu cầu GET đến URL “https://api.example.com/data” và gửi nó đi.

Lưu ý rằng XMLHttpRequest không hỗ trợ trình duyệt cũ hơn, vì vậy sử dụng Fetch API hoặc các thư viện/framework là cách thông dụng hơn để thực hiện Ajax trong các dự án thực tế.