Tiếp sau bài giới thiệu về AJAX của chúng tôi, đây là một ví dụ mà sử dụng XMLHttpRequest API để khởi tạo một yêu cầu AJAX.

Ví dụ AJAX

Hãy xem cấu trúc cơ bản sau đây:

      <div>
          <img src="Einstein.jpg" alt="Einstein">
          <button id="request">Learn more about Einstein</button>
          <div id="bio"></div>
      </div>

Đồng thời, xem minh hoạ liên quan:

Đây là những gì chúng ta muốn xảy ra: khi chúng ta nhấp lên nút, một yêu cầu AJAX sẽ được thực thi. Sau đó, phần tử với id là bio sẽ xuất hiện và nội dung của nó sẽ được gắn vào bằng các dữ liệu trả về. Dữ liệu đó là tĩnh và được lưu trữ trong tập tin Bio.txt.

Lưu ý: tập tin được tải lên máy chủ Codepen. Bằng cách này, chúng ta hạn chế các vấn đề cross-origin có thể xảy ra.

Phía dưới là mã AJAX được yêu cầu:

      var btn = document.getElementById('request');
      var bio = document.getElementById('bio');

      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if(request.readyState === 4) {
          bio.style.border = '1px solid #e8e8e8';
          if(request.status === 200) { 
            bio.innerHTML = request.responseText;
          } else {
          	bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
          } 
        }
      }

      request.open('Get', 'Bio.txt');

      btn.addEventListener('click', function() {
        this.style.display = 'none';
        request.send();
      });

Chia nhỏ thành các bước

Bây giờ hãy mô tả các bước cho yêu cầu này:

• Tạo một đối tượng XMLHttpRequest.

• Viết hàm sẽ chạy khi máy chủ gửi dữ liệu trả về. Đối tượng XMLHttpRequest có thuộc tính onreadystatechange lưu trữ chức năng này. Mỗi khi trạng thái của các yêu cầu thay đổi, hàm callback này được thực hiện.

• Theo dõi một số các thuộc tính khác của đối tượng XMLHttpRequest. Đầu tiên, thuộc tính readyState chỉ định trạng thái của yêu cầu của chúng ta. Thông qua việc gọi AJAX giá trị của nó thay đổi và có thể nhận các giá trị từ 0 đến 4 (ví dụ giá trị 4 có nghĩa là dữ liệu trả về sẵn có cho chúng ta). Thứ hai, thuộc tính status xác định yêu cầu có thành công hay không (ví dụ giá trị 200 định nghĩa một yêu cầu thành công). Trong ví dụ này, giả sử rằng chúng ta truy vấn dữ liệu trả về và các cuộc gọi AJAX là thành công, chúng ta cập nhật các nội dung của các phần tử mục tiêu. Nếu không, chúng ta hiển thị một thông báo với các thông tin được chiết xuất từ các đối tượng XMLHttpRequest.

• Chỉ định các loại yêu cầu bằng cách sử dụng các phương thức open. Phương thức này chấp nhận hai tham số và ba tùy chọn. Tham số đầu tiên xác định phương thức HTTP (ví dụ: GET hoặc POST). Cái thứ hai xác định URL mà chúng ta sẽ gửi yêu cầu. Không bắt buộc, chúng ta truyền một tham số boolean thứ ba xác định yêu cầu là có đồng bộ hay không (true là giá trị mặc định). Hai tham số tùy chọn khác có thể được sử dụng cho mục đích xác thực.

• Gửi yêu cầu khi nút được nhấp thông qua phương thức send. Thêm nữa, tại thời điểm này chúng ta ẩn nút đi.

Lưu ý: Nếu bạn thực sự cần phải hỗ trợ các phiên bản của Internet Explorer cũ (tức là IE6 và thấp hơn), bạn cần phải tạo một thể hiện của đối tượng ActiveXObject (xem phần Bước 1).

Minh hoạ tiếp theo cho thấy phần thân của yêu cầu khi nó được in trong giao diện dòng lệnh của trình duyệt.

Demo cuối cùng trông như thế này:

Mặt khác, nếu chúng ta yêu cầu một tập tin không tồn tại, chúng ta sẽ thấy một thông điệp tương tự như sau:

Lưu ý: Nếu bạn chạy ví dụ từ môi trường cục bộ của bạn (và lưu trữ các tập tin Bio.txt trong nó), các thông báo lỗi có thể sẽ khác nhau. Ví dụ, bạn có thể thấy kết quả sau đây:

Đây là bản demo được nhúng từ Codepen:

Kết luận

Trong hướng dẫn này, chúng ta đã khám phá cách thực hiện một yêu cầu AJAX đơn giản bằng JavaScript thuần tuý.

Trong phần tiếp theo của loạt bài này, chúng ta sẽ tập trung vào hàm và các phương thức liên quan đến AJAX của jQuery. Sau đó, ở phần cuối cùng của bộ loạt bài, chúng ta sẽ làm việc với một ví dụ phức tạp hơn. Nhớ theo dõi nhé!