AJAX – Hoạt động (Action)

Posted by Vũ Bá Phương 05/10/2021

Chương này cung cấp cho bạn một bức tranh rõ ràng về các bước chính xác của hoạt động AJAX.

Các bước của hoạt động AJAX

  • Một sự kiện client xảy ra.
  • Một đối tượng XMLHttpRequest được tạo.
  • Đối tượng XMLHttpRequest được cấu hình.
  • Đối tượng XMLHttpRequest thực hiện một yêu cầu không đồng bộ tới Máy chủ trang web.
  • Máy chủ web trả về kết quả chứa tài liệu XML.
  • Đối tượng XMLHttpRequest gọi hàm callback () và xử lý kết quả.
  • HTML DOM đã được cập nhật.

Hãy để chúng tôi thực hiện từng bước một.

Sự kiện client xảy ra trong hoạt động AJAX

  • Một hàm JavaScript được gọi là kết quả của một sự kiện.
  • Ví dụ – hàm JavaScript validateUserId () được ánh xạ như một trình xử lý sự kiện tới một sự kiện onkeyup trên trường biểu mẫu đầu vào có id được đặt thành “userid”
  • <input type = “text” size = “20” id = “userid” name = “id” onkeyup = “validateUserId ();”>.

Đối tượng XMLHttpRequest được tạo

var ajaxRequest;  // Biến giúp Ajax có thể thực hiện được!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Trình duyệt Internet Explorer
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Đã xảy ra sự cố
            alert("Trình duyệt của bạn không hỗ trợ!");
            return false;
         }
      }
   }
}

Đối tượng XMLHttpRequest được định cấu hình

Trong bước này, chúng ta sẽ viết một hàm sẽ được kích hoạt bởi sự kiện client và một hàm callback processRequest () sẽ được đăng ký.

function validateUserId() {
   ajaxFunction();
   
   // Ở đây processRequest () là hàm callback.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Đưa ra yêu cầu không đồng bộ đối với máy chủ trang web

Mã nguồn có sẵn trong đoạn mã trên. Mã được viết bằng kiểu chữ in đậm có trách nhiệm đưa ra yêu cầu tới máy chủ web. Tất cả điều này đang được thực hiện bằng cách sử dụng XMLHttpRequest với đối tượng ajaxRequest.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Giả sử bạn nhập Zara vào ô userid, sau đó trong yêu cầu trên, URL được đặt thành “validate? Id = Zara“.

Máy chủ trang web trả về kết quả chứa tài liệu XML

Bạn có thể triển khai tập lệnh phía máy chủ của mình bằng bất kỳ ngôn ngữ nào. Tuy nhiên logic của nó phải như sau.

  • Nhận yêu cầu từ client.
  • Phân tích cú pháp đầu vào từ client.
  • Thực hiện xử lý bắt buộc.
  • Gửi đầu ra cho client.

Nếu chúng tôi giả định rằng bạn sẽ viết một servlet, thì đây là đoạn mã.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Hàm gọi lại processRequest () được gọi

Đối tượng XMLHttpRequest đã được định cấu hình để gọi hàm processRequest () khi có sự thay đổi trạng thái đối với readyState của đối tượng XMLHttpRequest. Lúc này chức năng này sẽ nhận kết quả từ máy chủ và sẽ thực hiện các xử lý theo yêu cầu. Như trong ví dụ sau, nó đặt một thông báo có thể thay đổi thành true hoặc false dựa trên giá trị trả về từ Webserver.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

DOM HTML được cập nhật

Đây là bước cuối cùng. Và trong bước này, trang HTML của bạn sẽ được cập nhật. Nó xảy ra theo cách sau:

  • JavaScript nhận tham chiếu đến bất kỳ phần tử nào trong trang bằng API DOM.
  • Cách được khuyến nghị để có được một tham chiếu đến một phần tử là gọi.
document.getElementById("userIdMessage"), 
// trong đó "userIdMessage" là thuộc tính ID
// của một phần tử xuất hiện trong tài liệu HTML
  • JavaScript bây giờ có thể được sử dụng để sửa đổi các thuộc tính của phần tử; sửa đổi các thuộc tính kiểu của phần tử; hoặc thêm, bớt hoặc sửa đổi các phần tử con. Đây là một ví dụ :
<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // nếu phần tử messageBody đã được tạo đơn giản
      // thay thế nó nếu không thì nối thêm phần tử mới
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Nếu bạn đã hiểu các bước nêu trên, thì bạn gần như đã hoàn thành với AJAX. Trong phần tiếp theo, chúng ta sẽ xem chi tiết hơn về đối tượng XMLHttpRequest.

Tags: