AJAX là gì? Các ví dụ về AJAX

Khám phá AJAX là gì và vai trò của nó trong hệ thống web server.

AJAX là một giải pháp tuyệt vời cho các nhà phát triển, bởi vì bạn có thể:

Đọc dữ liệu từ máy chủ web – sau khi trang web đã được tải
Cập nhật một trang web mà không cần tải lại trang
Gửi dữ liệu đến máy chủ web – trong background

Nội dung

Giải thích về ví dụ AJAX là gì?

Trang HTML

<!DOCTYPE html>
<html>
<body>
    <div id="demo">
      <h2>Let AJAX change this text</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
    </div>
  </body>
</html>

Trang HTML chứa phần <div> và nút <button>

Phần <div> được sử dụng để hiển thị thông tin từ máy chủ.

Nút <button> gọi một chức năng (nếu nó được bấm).

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

Hàm 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();
}

AJAX là gì?

Trước tiên, AJAX = Asynchronous JavaScript And XML.

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

AJAX chỉ sử dụng kết hợp:

Một đối tượng XMLHttpRequest tích hợp 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 nhầm. Các ứng dụng AJAX có thể sử dụng XML để vận chuyển dữ liệu, nhưng nó cũng phổ biến không kém khi vận chuyển dữ liệu dưới dạng văn bản thuần túy hoặc văn bản JSON.

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

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

AJAX là gì

1. Một sự kiện xảy ra trong một trang web (trang được tải, một nút được nhấp)
2. Một đối tượng XMLHttpRequest được tạo 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. Phản hồi được đọc bởi JavaScript
7. Thực thi hành động (như cập nhật trang) được JavaScript thực hiện

Hi vọng bài viết này giúp bạn hiểu AJAX là gì và cách thức hoạt động của nó trong hệ thống web server.

Theo w3schools

lập trình máy tính phần mềm website