AJAX Giới thiệu

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 tải lạ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ủ ở hậu trường

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>Giữ 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();
}

Điều gì là AJAX?

AJAX = Asynchronous JvaScript And XML.

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

AJAX chỉ là sự kết hợp của:

  • Đối tượng XMLHttpRequest tích hợp sẵn của trình duyệt (đặ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 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 (định dạng trang, nhấn nút)
  2. Tạo đối tượng XMLHttpRequest bởi JavaScript
  3. Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web
  4. Máy chủ xử lý yêu cầu
  5. Máy chủ gửi phản hồi trở lại trang web
  6. Đọc phản hồi bởi JavaScript
  7. Thực hiện hành động đúng đắn bởi JavaScript (ví dụ: cập nhật trang)