Lessons XXX : Xây dựng một ứng dụng Ajax cơ bản

Xây dựng một ứng dụng Ajax cơ bản

Thứ tư, 20 Tháng 8 2008 02:08 w3schools.com Hướng dẫn lập trình Ajax-JavaScript
Email In

AJAX (Asynchronous JavaScript and XML) – là một kỹ thuật môt tả cách JavaScript có thể nhận dữ liệu từ server bằng cách xử dụng đối tượng XML HTTP Request và sau đó chèn dữ liệu nầy vào website dùng DOM. Những tiến trình nầy được thực hiện đồng thời – tức là chỉ thay đổi thông tin cần được thay đổi mà không cần phải load lại toàn bộ trang.

Để hiểu cách hoạt động của AJAX, chúng ta sẻ tạo một ứng dụng đơn giản bằng AJAX.
Đầu tiên, chúng ta tạo một form HTML có 2 text fields: username và time. Ô username sẻ do người dùng điền vào và ô time sẻ được tự động điền bởi AJAX.

File HTML sẻ có tên là “testAjax.htm” như sau (chú ý là trong đoạn code sau đây không hề có nút submit!):

<html>
   <body>
   <form name="myForm">
   Name: <input type="text"   name="username" />
   Time: <input type="text"   name="time" />
   </form>
   </body>
   </html>

Nguyên tắc cơ bản của AJAX là đối tượng XMLHttpRequest.
Các trình duyệt khác nhau sẻ có các phương thức tạo đối tượng XMLHttpRequest khác nhau.

Internet Explorer sử dụng ActiveXObject, trong khi các trình duyệt khác sử dụng một đối tượng JavaScript xây dựng sẵn có tên XMLHttpRequest.

Để tạo đối tượng nầy mà vẫn sử dụng được cho nhiều trình duyệt khác nhauchúng ta cần sử dụng “try và catch” (hoặc có thể dùng if – else).

Bây giờ hãy cập nhật lại file “testAjax.htm” với đoạn JavaScript dùng tạo ra đối tượng XMLHttpRequest:

<html>
   <body>
   <script type="text/javascript">
  function ajaxFunction()
     {
    var xmlHttp;
     try
       {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
     catch (e)
       {
      // Internet Explorer
      try
         {
        xmlHttp=new   ActiveXObject("Msxml2.XMLHTTP");
        }
       catch (e)
         {
        try
           {
          xmlHttp=new   ActiveXObject("Microsoft.XMLHTTP");
          }
         catch (e)
           {
          alert("Your browser does   not support AJAX!");
          return false;
          }
        }
      }
    }
  </script>
   <form name="myForm">
   Name: <input type="text"   name="username" />
   Time: <input type="text"   name="time" />
   </form>
   </body>
   </html>

Giải thích đoạn code trên 1 chút: đầu tiên chúng ta tạo một biến xmlHttp để giữ đối tượng XMLHttpRequest.

Sau đó tạo đối tượng nầy:

XMLHttp=new XMLHttpRequest().

dĩ nhiên là dành cho e Firefox, Opera, và Safari. Nếu fail thì sẻ xử lý dòng nầy:

xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”)

dành cho Internet Explorer 6.0+, nếu sai thì xử lý dòng nầy:

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

dành cho Internet Explorer 5.5+

Nếu nằm ngoài 3 trường hợp trên sẻ xuất ra thông báo trình duyệt không hỗ trợ AJAX.

Tiếp theo chúng ta tìm hiểu cách đối tượng XMLHttpRequest giao tiếp với server.

Đối tượng XMLHttpRequest có 3 thuộc tính quan trọng:

Thuộc tính onreadystatechange

Sau khi gửi request lên server, chúng ta cần có một function làm nhiệm vụ nhận dữ liệu trả về từ server.

Thuộc tính onreadystatechange có chức năng xử lý response từ server. Code sau định nghĩa một function (rỗng) và set thuộc tính onreadystatechange tại cùng thời điểm:

xmlHttp.onreadystatechange=function()
     {
     // code xử lí
     }

Thuộc tính readyState

Thuộc tính readyState lưu giữ trạng thái của response từ server. Mỗi lần readyState thay đổi thì function onreadystatechange sẻ được thực thi.

Các giá trị của thuộc tính readyState:

Giá trịMô tả 0 Request chưa khởi tạo 1 Request đã được set up 2 Request đã được gửi 3 Request đang xử lý 4 Request đã hoàn tất
Chúng ta sẻ thêm một đoạn lệnh If vào bên trong function onreadystatechange để kiểm tra xem resquest đã gửi lên hoàn tất chưa:

xmlHttp.onreadystatechange=function()
     {
       if(xmlHttp.readyState==4)
       {
       // Code lấy dữ   liệu từ response của server
       }
     }

Thuộc tính responseText

Dữ liệu trả về từ server có thể nhận bằng thuộc tính responseText.
Đoạn code sau sẻ set giá trị cho ô “time” thông qua thuộc tính responseText:

xmlHttp.onreadystatechange=function()
     {
       if(xmlHttp.readyState==4)
       {
         document.myForm.time.value=xmlHttp.responseText;
       }
     }

Tiếp theo chúng ta sẻ tìm hiểu cách lấy dữ liệu từ server!

Để gửi request lên server, chúng ta dùng 2 phương thức open()send().

Phương thức open() có 3 đối số. Đối số đầu tiên định nghĩa phương thức sử dụng để gửi request (GET hoặc POST). Đối số thứ hai chỉ ra địa chỉ URL của script xử lý phía server. Đối số cuối cùng chỉ ra request cần được xử lý đồng bộ (asynchronously).

Phương thức send() gửi request tới server. Nếu trang HTML và trang ASP (dĩ nhiên là bạn có thể dùng ngôn ngữ khác ngoài ASP như JSP hay PHP…) nằm cùng thư mục thì đoạn code sẻ là:

xmlHttp.open("GET","time.asp",true);
   xmlHttp.send(null);

Bây giờ chúng ta sẻ quy định thời điểm mà AJAX sẻ được thực thi. Cách thông thường nhất là dùng phương thức onkeyup, bằng cách nầy khi người dùng gõ gì đó vào ô username thì function AJAX của chúng ta sẻ được thực thi:

<form name="myForm">
   Name: <input type="text"
   onkeyup="ajaxFunction();" name="username" />
   Time: <input type="text"   name="time" />
   </form>

Bây giờ hãy cập nhật lại file “testAjax.htm” hoàn chỉnh như sau:

          <html>
  <body>
   <script type="text/javascript">
  function ajaxFunction()
     {
    var xmlHttp;
     try
       {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
     catch (e)
       {
      // Internet Explorer
      try
         {
        xmlHttp=new   ActiveXObject("Msxml2.XMLHTTP");
        }
       catch (e)
         {
        try
           {
          xmlHttp=new   ActiveXObject("Microsoft.XMLHTTP");
          }
         catch (e)
           {
          alert("Your browser does   not support AJAX!");
          return false;
          }
        }
      }
         xmlHttp.onreadystatechange=function()
         {
         if(xmlHttp.readyState==4)
           {
             document.myForm.time.value=xmlHttp.responseText;
           }
         }
         xmlHttp.open("GET","time.asp",true);
         xmlHttp.send(null);
    }
  </script>
   <form name="myForm">
   Name: <input type="text"
   onkeyup="ajaxFunction();"   name="username" />
   Time: <input type="text"   name="time" />
   </form>
   </body>
   </html>

Tiếp theo chúng ta sẻ hoàn tất ứng dụng AJAX nầy bằng đoạn code xử lý phía server – file “time.asp”.

Thuộc tính responseText sẻ lưu giữ dữ liệu trả về từ server. Để đơn giản chúng ta sẻ set time = giờ hiện tại:

<%
   response.expires=-1
   response.write(time)
   %>

Chú ý: Thuộc tính Expires chỉ định thời gian (tính bằng phút) mà trang sẻ được cached trước khi nó expires. Response.Expires=-1 chỉ ra rằng page sẻ ko được cached.

Phù, bây giờ là lúc chúng ta chạy ứng dụng

Gõ vào ô Name và thời gian sẻ hiện ra ở ô Time

Ô Time sẻ chứa giá trị time từ file “time.asp” trên server mà không cần reload page!

Nguồn: w3schools.com

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: