Ví dụ ứng dụng AJAX

Qua các chương trước, có lẽ bạn đã dần mường tượng ra cách một ứng dụng AJAX hoạt động. Để minh họa chi tiết hơn, chương này mình sẽ cung cấp một ví dụ về một ứng dụng AJAX đơn giản, sau đó giải thích chi tiết các hoạt động xảy ra trong ứng dụng AJAX này.

Các bước tạo ứng dụng AJAX

• Một sự kiện xảy ra trên Client (ví dụ nhập thông tin vào một form nào đó).
• Tạo đối tượng XMLHttpRequest.
• Cấu hình cho đối tượng XMLHttpRequest.
• Đối tượng XMLHttpRequest tạo một Ansyn Request (ansyn: không đồng bộ) tới Webserver.
• Webserver trả về kết quả dưới dạng XML.
• Đối tượng XMLHttpRequest gọi một hàm callback và xử lý kết quả.
• Cuối cùng HTML DOM được cập nhật.

Sự kiện xảy ra trên Client

Tất nhiên trong khi lập trình, tương ứng với mỗi sự kiện xảy ra thì bạn sẽ có hành động tương ứng, và kết quả là một hàm JavaScript được gọi.

Ví dụ: hàm validateUserId() được sử dụng để xử lý sự kiện người dùng nhập thông tin vào một form nào đó.

Tạo đối tượng XMLHttpRequest trong AJAX

Bước tiếp theo và cũng là bước khởi tạo ứng dụng AJAX là bước tạo đối tượng XMLHttpRequest. Đối tượng này là chìa khóa then chốt, là nền tảng của kỹ thuật AJAX.

var ajaxRequest;  // Khai bao ten mot bien
function ajaxFunction(){
   try{


      //Voi cac trinh duyet dien dai: Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){


      //Voi trinh duyet IE
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {


         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){


            // Thong bao khi xay ra bat ky error nao
            alert("Trinh duyet cua ban da bi hong!");
            return false;
         }
      }
   }
}

Cấu hình đối tượng XMLHttpRequest trong AJAX

Sau khi đã tạo đối tượng XMLHttpRequest, chúng ta sẽ viết một hàm mà sẽ được kích hoạt bởi sự kiện trên Client. Tại đây, hàm callback có tên là processRequest() sẽ được kích hoạt để xử lý sự kiện tương ứng trên.

function validateUserId() {
   ajaxFunction();


   // Ham processRequest() la mot ham 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);
}

Tạo Ansyn Request tới Webserver trong AJAX

Để tạo một Request không đồng bộ tới Server, trong phương tức open() của đối tượng XMLHttpRequest bạn cần thiết lập giá trị true cho tham số thứ ba.

function validateUserId() {
   ajaxFunction();


   // Ham processRequest() la mot ham callback.
   ajaxRequest.onreadystatechange = processRequest;


   <b>if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);


   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);</b>
}

Giả sử trong UserId Box, bạn nhập giá trị VietJack thì với Request ở trên thì URL sẽ được thiết lập thành validate?id=VietJack.

Server trả về kết quả dưới dạng XML

Bạn có thể lập trình ở Server-Side bằng bất kỳ ngôn ngữ lập trình nào, tuy nhiên logic chung cho ví dụ này nên là như sau:

• Nhận một Request từ Client.
• Parse thông tin nhập vào từ Client.
• Thực hiện quá trình xử lý dữ liệu cần thiết.
• Cuối cùng, gửi kết quả trả về tới Client.

Nếu bạn đang sử dụng Servlet, thì chương trình sẽ có dạng:

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

Gọi hàm callback trong AJAX

Giả sử hàm callback có tên gọi là processRequest(). Đối tượng XMLHttpRequest sẽ gọi hàm này khi trạng thái readyState (thuộc tính của đối tượng XMLHttpRequest) thay đổi. Lúc này, hàm callback này sẽ nhận kết quả từ Server và sẽ thực hiện quá trình xử lý cần thiết.

Như trong ví dụ sau, hàm này thiết lập giá trị cho một biến là true hoặc false dựa trên giá trị trả về từ Server.

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

Cập nhật HTML DOM trong AJAX

Cuối cùng là bước HTML DOM sẽ được cập nhật. Để có được một tham chiếu tới một phần tử nào đó, bạn có thể làm theo cách

document.getElementById("userIdMessage"), 
// userIdMessage la ten thuoc tinh ID cua phan tu

Với cách này, bạn có thể sửa đổi các thuộc tính của phần tử hoặc thêm, sửa, hoặc xóa các phần tử con. Ví dụ:

<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
   var userMessageElement = document.getElementById("userIdMessage");
   var messageText;


   if (message == "false") {
      userMessageElement.style.color = "red";
      messageText = "UserID khong hop le";
   }
   else 
   {
      userMessageElement.style.color = "green";
      messageText = "UserID hop le";
   }


   var messageBody = document.createTextNode(messageText);


   // Neu phan tu messageBody da duoc tao: thay the phan tu nay 
   // Neu phan tu messageBody chua duoc tao: phu them mot phan tu moi
   if (userMessageElement.childNodes[0]) {
      userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
   } 
   else
   {
      userMessageElement.appendChild(messageBody);
   }
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>

Phần trên là các bước đơn giản sẽ xuất hiện trong một ứng dụng AJAX đơn giản. Mình mong rằng với lượng thông tin bạn đã thu được qua các bài hướng dẫn này, các bạn đã có thể tự thực hành về AJAX.

Các chương sau mình sẽ trình bày thêm một số ví dụ khi sử dụng kỹ thuật AJAX trong các chương trình Server-Side viết bằng PHP hay ASP, một số hoạt động liên quan tới Database và cách lấy thông tin từ một XML file.