Giới thiệu về AJAX trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Giới thiệu về AJAX trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

AJAX được xem như là giải pháp dành cho nhà phát triển, bởi vì bạn có thể:

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

Ví dụ về AJAX:

Giải thích ví dụ trên

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 một phần <div> và một <button>. Phần <div> được sử dụng để hiển thị thông tin từ máy chủ. Nút <button> sẽ gọi một hàm (nếu nó được nhấp vào). Hàm yêu cầu dữ liệu từ một máy chủ web và hiển thị:

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ì?

AJAX = Asynchronous JavaScript And XML (không đồng bộ JavaScript và XML). Đây không phải là một ngôn ngữ lập trình.

AJAX chỉ sử dụng một sự kết hợp của:

  • Một trình duyệt được xây dựng trong XMLHttpRequest đối tượng (để yêu cầu dữ liệu từ mộ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 phổ biến như nhau để truyền dữ liệu dưới dạng văn bản thuần 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ột máy chủ web đằng sau hậu trường. Điều này có nghĩa là có thể cập nhật các phần của một trang web mà không cần tải lại toàn bộ trang.

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

  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 vào)
  2. Một đối tượng XMLHttpRequest được tạo bằng JavaScript
  3. Đối tượng XMLHttpRequest gửi yêu cầu đến một máy chủ web
  4. Máy chủ xử lý yêu cầu
  5. Máy chủ gửi phản hồi về trang web
  6. Phản hồi đã được đọc bởi JavaScript
  7. Hành động thích hợp (như cập nhật trang) được thực hiện bởi JavaScript