AJAX - Hành động

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 khách hàng 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ả.
DOM HTML được cập nhật.

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

Sự kiện khách hàng xảy ra

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;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            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 máy khách và một hàm gọi lại processRequest () sẽ được đăng ký.

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);
}

Đưa ra yêu cầu không đồng bộ cho 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ó nhiệm vụ đư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 đối tượng XMLHttpRequest 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ừ khách hàng.
Phân tích cú pháp đầu vào từ máy khách.
Thực hiện xử lý bắt buộc.
Gửi đầu ra cho máy khách.

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 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 một trang bằng API DOM.
Cách được khuyến nghị để có được tham chiếu đến một phần tử là gọi.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

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, xóa 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);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      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 bảy bước nêu trên, thì bạn gần như đã hoàn thành với AJAX. Trong chương tiếp theo, chúng ta sẽ xem đối tượng XMLHttpRequest chi tiết hơn.