Giới thiệu về AJAX

AJAX là giấc mơ của các nhà phát triển vì bạn có thể:

  • Cập nhật trang web mà không cần làm mới trang
  • Yêu cầu dữ liệu từ máy chủ sau khi trang được tải
  • Nhận dữ liệu từ máy chủ sau khi trang được tải
  • Gửi dữ liệu lên máy chủ từ hậu trường

Mô hình AJAX

Nhấn nút dưới đây để Ajax thay đổi đoạn văn này:

Thử ngay

Giải thích ví dụ AJAX

Trang HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Để AJAX thay đổi đoạn văn này</h2>
  <button type="button" onclick="loadDoc()">Thay đổi văn bản</button>
</div>
</body>
</html>

Trang HTML này chứa một <div> và một <button>.

<div> Để hiển thị thông tin từ máy chủ.

<button> Gọi hàm (khi nó được nhấn).

Chức năng này từ máy chủ web yêu cầu dữ liệu và hiển thị nó:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Giải thích AJAX là gì?

AJAX = Asynchronous JvaScript And XML.

AJAX không phải là ngôn ngữ lập trình.

AJAX chỉ kết hợp:

  • Đối tượng XMLHttpRequest được cài đặt sẵn trong trình duyệt (yêu cầu dữ liệu từ máy chủ web)
  • JavaScript và HTML DOM (hiển thị hoặc sử dụng dữ liệu)

Ajax là một tên gây hiểu lầm. Ứng dụng Ajax có thể sử dụng XML để truyền dữ liệu, nhưng việc truyền dữ liệu dưới dạng văn bản thuần hoặc văn bản JSON cũng rất phổ biến.

Ajax cho phép cập nhật trang web một cách đồng bộ bằng cách trao đổi dữ liệu với máy chủ web phía sau cảnh. Điều này có nghĩa là có thể cập nhật phần của trang web mà không cần tải lại toàn bộ trang.

Cách hoạt động của AJAX

AJAX
  1. Xảy ra một sự kiện trong trang web (nạp trang, nhấn nút)
  2. Tạo đối tượng XMLHttpRequest bằng JavaScript
  3. Đối tượng XMLHttpRequest trong trình duyệt (yêu cầu dữ liệu từ máy chủ web)
  4. Máy chủ xử lý yêu cầu này
  5. Máy chủ sẽ gửi phản hồi trở lại trang web
  6. Đọc phản hồi bằng JavaScript
  7. Thực hiện hành động chính xác bằng JavaScript (ví dụ: cập nhật trang)