1. Đối tượng XMLHttpRequest trong AJAX là gì?

Đối tượng XMLHttpRequest (viết tắt là XHR) là một API có thể được sử dụng bởi Js, Jscript, VBScript và một số ngôn ngữ khác. Nó truyền tải và thao tác dữ liệu XML tới và từ một WebServer bởi sử dụng HTTP bằng cách thiết lập một kênh kết nối độc lập giữa Client-Side và Server-Side. Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với một Server ở Background. Tức là với đối tượng XMLHttpRequest này, bạn có thể cập nhật các phần nhỏ của trang mà không cần tải lại toàn bộ trang.

Dữ liệu được trả về từ các lời gọi tới đối tượng XMLHttpRequest sẽ thường được cung cấp bởi Database ở Backend. Ngoài định dạng XML, đối tượng XMLHttpRequest còn được sử dụng để lấy dữ liệu trong các định dạng khác, chẳng hạn như JSON hay định dạng thuần text.

Hiểu nôm na và đơn giản nhất thì đối tượng XMLHttpRequest trong AJAX được sử dụng cho việc giao tiếp không đồng bộ giữa máy khách và máy chủ.

2. Tạo đối tượng XMLHttpRequest

Đối tượng XMLHttpReqrest là chìa khóa then chốt của kỹ thuật AJAX. Tất cả trình duyệt Web hiện đại đều hỗ trợ đối tượng XMLHttpRequest . Tất cả các trình duyệt hiện đại đều có một đối tượng XMLHttpRequest tích hợp sẵn.

Cú pháp : Ten_bien = new XMLHttpRequest();

Như mình đã nói thì với trình duyệt cũ hơn thì nó có tên là đối tượng ActiveXObject

Ten_bien = new ActiveXObject("Microsoft.XMLHTTP");

Để đảm bảo AJAX có thể hoạt động trên tất cả các trình duyệt dù mới hay cũ ta nên khai báo như sau:

var xhttp;
if (window.XMLHttpRequest){
   xhttp= new XMLHttpRequest();
   } else {
    //tạo đối tượng ActiveXObject nếu trình duyệt không hỗ trợ XMLHttpRequest
   xhttp= new ActiveXObject("Microsoft.XMLHTTP");
}

3. Gửi yêu cầu đến máy chủ

Để gửi yêu cầu đến máy chủ, ta có thể sử dụng phương thức open() và send() của đối tượng XMLHttpRequest.

Cú pháp :

xhttp.open("GET", "ajax_info.txt"); 
xhttp.send();

Ví dụ:

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Cick</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

4. Thuộc tính Onload trong trong Ajax

Với đối tượng XMLHttpRequest ta có thể xác định một hàm gọi lại sẽ được thực thi khi yêu cầu nhận được câu trả lời. Hàm được định nghĩa trong thuộc tính onload của đối tượng XMLHttpRequest

Ví dụ:

<div id="demo">
<h2>XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Click</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

5. Hàm Callback với Ajax

Hàm gọi lại là một hàm được truyền dưới dạng tham số cho một hàm khác. Trong trường hợp này, hàm gọi lại phải chứa mã để thực thi khi phản hồi sẵn sàng.

xhttp.onload = function() {
  // Code khi phản hồi đã sẵn sàng
}

Nếu ta có nhiều hơn một tác vụ AJAX trong một trang web, ta nên tạo một hàm để thực thi đối tượng XMLHttpRequest và một hàm gọi lại cho mỗi tác vụ AJAX. Lệnh gọi hàm phải chứa URL và hàm nào sẽ gọi khi phản hồi sẵn sàng.

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // hành động ở đây
}
function myFunction2(xhttp) {
  // hành động ở đây
}

6. Sự kiện onreadystatechange trong Ajax

Khi ta đã gửi một Request tới một Server , có thể sẽ muốn thực hiện một số hoạt động nào đó trên phần Response được trả về. Điều này có thể thực hiện thông qua sự kiện onreadystatechange trong AJAX.

Sự kiện onreadystatechange này sẽ được kích hoạt mỗi khi trạng thái readyState thay đổi. Mà thuộc tính readyState này giữ phần biểu diễn status của đối tượng XMLHttpRequest . Do đó dựa vào từng giá trị của readyState thì ta có thể cung cấp hoạt động tương ứng nào đó.

  • Thuộc tính readyState : định nghĩa trạng thái hiện tại của đối tượng XMLHttpRequest
    • 0: Requet chưa được khởi tạo
    • 1: Request đã được thiết lập
    • 2: Request đã được gửi
    • 3: Request đang được xử lý
    • 4: Kết thúc Request
  • Thuộc tính status : Trả về trạng thái dưới dạng một số (ví dụ: 404 cho “Not Found”, 200 cho “OK”)

Hàm onreadystatechange được gọi mỗi khi readyState thay đổi. Ta sẽ xác định xem điều gì sẽ xảy ra khi Response từ Server đã sẵn sàng để được xử lý. Khi readyState là 4 và status là 200 thì tức là Response đã sẵn sàng:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const 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");
  xhttp.send();
}
</script>

</body>
</html>

Lưu ý

Onreadystatechange được kích hoạt 5 lần (tương ứng với các giá trị của status).