• Thứ Năm, 02/11/2006 09:38 (GMT+7)

    Sử dụng Ajax trong lập trình JavaServer Pages

    Như chúng ta đã biết Ajax ngày càng được sử dụng phổ biến vì khả năng tương tác cao với người dùng, làm cho ứng dụng web gần với ứng dụng desktop. Trong số báo TGVT A tháng 3/2006, tác giả Đỗ Quyết Tiến đã có bài hướng dẫn cách sử dụng Ajax trong lập trình ASP.NET. Trong bài viết này tôi muốn giới thiệu cách sử dụng Ajax trong lập trình JavaServer Page (JSP) nhờ vào thư viện "Ajax JSP Tag Library 1.2". Nếu bạn chưa có khái niệm gì về Ajax thì nên tham khảo bài viết giới thiệu tổng quát của tác giả Phạm Công Định trên số báo TGVT A tháng 12/2005.

    AJAX JSP TAG LIBRARY 1.2

     

    Hình 1

    Ajax Tag Library là tập thẻ (taglib) nhằm đơn giản hóa việc sử dụng công nghệ Ajax trong một ứng dụng JSP. Thực chất Ajax là việc sử dụng JavaScript để yêu cầu dữ liệu từ phía server, nhưng không phải ai cũng rành về lập trình ở phía client và việc bảo trì là cả một vấn đề. Điều này lại trở nên đơn giản hơn nếu thêm vào những thẻ JSP để lập trình phía server thay vì gọi những hàm JavaScript.

    Việc lập trình bây giờ đơn giản chỉ còn là việc kết hợp giữa các lớp Java và các file nguồn JavaScript. Java độc lập với hệ điều hành, tuy nhiên bạn phải dùng JDK phiên bản 1.4+ và phía client các trình duyệt dĩ nhiên phải hỗ trợ JavaScript và XMLHttpRequest cụ thể là FireFox 1.0+ và Internet Explorer 5.0+.

    Các thẻ Ajax JSP Tag Library 1.2 hỗ trợ

    Trong ví dụ này tôi chỉ giới thiệu cách sử dụng và các thuộc tính của thẻ HtmlContent áp dụng cho các liên kết, nút radio và select (combobox) khi nhấn vào liên kết, nút nhấn radio hoặc chọn trong select thì Ajax sẽ được gọi để tải nội dung của ảnh đó và hiển thị ở phía bên phải như trong hình 1. Đây là một ví dụ đơn giản về Ajax JSP TagLib. Các bạn có thể tải về thư viện này để tìm hiểu thêm ở địa chỉ http://sourceforge.net/projects/ajaxtags/. Các bạn nên tải bản ajaxtags-1.2-beta2-bin.zip, trong này có toàn bộ tài liệu hướng dẫn cách cài đặt và sử dụng.

    Bạn có thể tham khảo ứng dụng minh hoạ của bài viết này tại http://www.viettutorial.com/ajaxtags/photogallery.zip.

     

    PhotoGallery.jsp                                                                                             
    <%
    String photo = request.getParameter("photo");
    java.util.Date date = new java.util.Date();
    if(photo.equalsIgnoreCase("Docked Boats")){
    out.print(""
    + "
    Description: Docked Boats"
    + "
    One of these is my dream boat."
    + "
    Update: " + date + "");
    }else if(photo.equalsIgnoreCase("Coral Reef")){
    out.print(""
    + "
    Description: Coral Reef"
    + "
    I eat that for breakfast. Yummy!"
    + "
    Update: " + date + "");
    }else if(photo.equalsIgnoreCase("Eiffel Tower")){
    out.print(""
    + "
    Description: Eiffel Tower"
    + "
    I dove of that. Splat!"
    + "
    Update: " + date + "");
    }else if(photo.equalsIgnoreCase("Diver")){
    out.print(""
    + "
    Description: Diver"
    + "
    Smile your on candid camera."
    + "
    Update: " + date + "");
    }else if(photo.equalsIgnoreCase("Thames River")){
    out.print(""
    + "
    Description: Thames River"
    + "
    Going on a suicide run and swim in that thing."
    + "
    Update: " + date + "");
    }else if(photo.equalsIgnoreCase("Cute Snail")){
    out.print(""
    + "
    Description: Cute Snail"
    + "
    Its me, it really is!"
    + "
    Update: " + date + "");
    }
    %>
    Index.jsp
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>










    ${pageContext.request.contextPath}

    A Demo Ajax JSP Tag Library Web App.





    Select by ANCHOR link



    <>
    baseUrl="${contextPath}/photogallery.jsp"
    sourceClass="anchor_link"
    target="photo_content"
    parameters="photo={ajaxParameter}"
    />

    Select by RADIO option


    Docked Boats

    Coral Reef

    Eiffel Tower

    Diver

    Thames River

    Cute Snail



    Select by SELECT option




    <>
    baseUrl="${contextPath}/photogallery.jsp"
    sourceClass="radiobtn"
    target="photo_content"
    parameters="photo={ajaxParameter}"
    />
    <>
    baseUrl="${contextPath}/photogallery.jsp"
    source="photo_sel"
    target="photo_content"
    parameters="photo={photo_sel}"
    eventType="change"
    />


    Page loaded at: <% java.util.Date date = new java.util.Date(); out.print(date); %>

     

    CÀI ĐẶT BAN ĐẦU

    Trước hết, máy tính của bạn phải có JDK 1.4 trở lên, Tomcat 5.x và đặc biệt không thể thiếu thư viện Ajax JSP Tag Library. Nếu chưa có bạn có thể tải về về ở các địa chỉ sau.

    JDK: http://java.sun.com/j2se/1.5.0/download.jsp

    Tomcat: http://tomcat.apache.org

    Ajax JSP Tag Library: http://sourceforge.net/projects/ajaxtags/

    XÂY DỰNG DỰ ÁN

    1. Cấu trúc dự án

    Để bắt đầu, bạn tạo một ứng dụng web JSP có tên là photogallery có cấu trúc thư mục như sau:

     

    photogallery
      |-photos (chứa các ảnh trong ví dụ này)
      |-js (chứa các file JavaScript)
      |-WEB-INF
      | |-lib (các thư viện cần thiết để chạy ứng dụng web)
      | |-web.xml (file mô tả ứng dụng web JSP, trong bản demo không dùng đến file này)
      |
      |-index.jsp (trang chủ của demo)
      |-photogallery.jsp (sẽ trả về ảnh tương ứng được truy vấn từ trang index)

     

    Ứng dụng demo này gồm có 2 trang JSP:

    - Index.jsp dùng để hiển thị ảnh và tương tác với người dùng.

    - Photogallery.jsp để nhận request từ phía trang index và trả về nội dung html của hình tương ứng.

    Bạn có thể hình dung cách làm việc của chương trình này như trong hình 2.

    2. Chép các file cần thiết vào dự án

     

    Hình 2

    Sau khi tạo cấu trúc thư mục như trên, bạn chép toàn bộ thư viện trong 2 thư mục lib và dist trong file nén ajaxtags-1.2-beta2-bin.zip được tải về từ địa chỉ ở trên vào thư mục lib và các file trong thư mục js vào thư mục js của dự án của bạn, có thể một số thư viện không cần thiết như Struts (nếu như bạn không dùng đến Struts trong ứng dụng) nhưng ta nên chép hết toàn bộ thư viện để tránh thiếu sót, với các file JavaScript cũng thế (trong đó chỉ có file ajaxtags-1.2.jar, ajaxtags-1.2.js và prototype-1.4.0.js là thư viện của Ajax JSP Tag Library).

    Trong trang JSP bạn nên khai báo các file script ở phần header và file prototype-1.4.0.js phải nằm trước file ajaxtags-1.2.js.

    3. Tạo file photogallery.jsp

    Trang JSP này không làm chức năng hiển thị nội dung giống như các trang JSP thông thường. Nó chỉ đơn thuần nhận request của Ajax từ phía trang chủ và trả về nội dung html của ảnh tương ứng. Ở đây ta có thể dùng servlet và database nhưng để đơn giản và chỉ là ứng dụng demo nên tôi dùng JSP để nhận và xử lý request.

    Trong trường hợp dùng servlet để nhận request từ phía client thì bạn phải kế thừa servlet của bạn từ lớp BaseAjaxServlet của thư viện ajaxtags như bên dưới.

    import org.ajaxtags.servlets.BaseAjaxServlet;

    public class inherit_HtmlServlet extends BaseAjaxServlet {

    public String getXmlContent(HttpServletRequest request, HttpServletResponse response)

    throws Exception {

    //Do something here

    }

    }

    Đối với một số TagLib của ajaxtags, cấu trúc trả về của servlet phải là cấu trúc xml dựa vào tham số truy vấn từ client như sau:









    Record 1

    1





    Record 2

    2





    Record 3

    3







    Các hàm Ajax sẽ phân tích dữ liệu trả về dựa trên cấu trúc xml này và nếu không đúng thì ở phía client sẽ gặp lỗi khi phân tích. Tuy nhiên đối với thẻ htmlContent thì không, dữ liệu trả về của nó có cấu trúc là html thay vì xml, tùy thuộc vào cách dùng của bạn cũng có thể là text thuần túy.

    4. Xây dựng file index.jsp

    Đối với trang JSP nào có dùng Ajax taglib thì bạn phải định nghĩa trước giống như các thư viện taglib thông thường:

    <%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

    Bạn có thể tham khảo qua file index.jsp, tôi sẽ giải thích từng thuộc tính và taglib được khai báo trong trang này ngay bên dưới.

    Trong ví dụ này, ta thấy thẻ htmlContent được sử dụng ở 3 chỗ cho 3 kiểu html element là a (link), input (radio) và select (combobox). Cấu trúc khai báo thẻ htmlContent như sau:

    <>

    baseUrl="${contextPath}/photogallery.jsp"

    sourceClass="anchor_link"

    target="photo_content"

    parameters="photo={ajaxParameter}"

    />

    Để gọi được thẻ htmlContent hay các thẻ của ajaxtags thì bạn phải có:

    baseUrl: là đường dẫn đến servlet hoặc trang JSP ở phía server mà đối tượng Ajax sẽ gọi đến để truy vấn dữ liệu.

    soureClass: tên của class CSS của element được gán sự kiện.

    source: id của element được gán sự kiện.

    Đối với thẻ htmlContent thì thuộc tính sourceClass hoặc source bắt buộc phải có.

    target: ID của thẻ div hoặc bất kỳ html element nào khác dùng để chứa dữ liệu trả về từ phía server.

    parameters: tham số để truy vấn khi Ajax thực hiện hành động POST/GET về phía server. Nếu có nhiều tham số thì cách nhau bằng dấu phẩy. Trong ví dụ này chỉ dùng một tham số đó là tenanh.

    Đối với một số thẻ như ajax:htmlContent và ajax:callout thì giá trị của các tham số có thể được hiểu mặc định là giá trị của element bằng cách khai báo như trên ={ajaxParamenter}

    Lưu ý: Tất cả các thẻ phải được khai báo sau Web form, trong trường hợp có sử dụng web form.

    Phía client thì nơi khai báo thẻ htmlContent thay vào đó là đối tượng JavaScript AjaxJspTag.HtmlContent được tạo để bắt sự kiện khi người dùng tương tác với web và tạo request đến server để lấy dữ liệu khi người dùng nhấn chọn và nạp dữ liệu đó vào html element (div/span/...) để hiển thị.

       

    Photogallery
      |-photos
      | |-boats.jpg
      | |-...
      |-js
      | |-ajaxtags-1.2-beta2.js
      | |-controls.js
      | |-prototype-1.4.0.js
      |-WEB-INF
      | |-lib
      | | |-ajaxtags-1.2-beta2.jar
      | | |-...
      | |-web.xml
      |
      |-index.jsp
      |-photogallery.jsp

     

    5. Định nghĩa file đặc tả web.xml

    Trong file web.xml bạn phải khai báo servlet-name và servlet-mapping của servlet nếu bạn dùng servlet thay vì JSP như tôi dùng trong ví dụ này. Nếu bạn dùng phiên bản servlet container cũ hơn 2.4 thì bạn phải chép file đặc tả ltd của ajaxtags là ajaxtags.ltd vào thư mục WEB-INF và trong file web.xml bạn phải khai báo thêm taglib như sau. (Nếu bạn không dùng servlet và phiên bản servlet container của bạn là 2.4 hoặc mới hơn thì bạn có thể bỏ không cần dùng file đặc tả này).



    http://ajaxtags.org/tags/ajax

    /WEB-INF/ajaxtags.tld



    Biên dịch và triển khai ứng dụng

    Nếu dùng servlet thì bạn phải biên dịch các file java của mình thành class và bỏ vào thư mục class trong WEB-INF, chép cả thư mục dự án vào webapps của Tomcat, sau đó chạy service của Tomcat hoặc chạy startup từ dòng lệnh để khởi động Tomcat. Giờ bạn có thể chạy trình duyệt để thử chương trình của mình.

    Ứng dụng hoàn chỉnh của ví dụ này có cấu trúc như cấu trúc cây trong hình 3.

    Chúc bạn thành công và tìm được nhiều điều hữu ích từ Ajax JSP Tag Library.

     

    Tên thẻ

       

    Mô tả

     

     

    Autocomplete

       

    Liệt kê danh sách các giá trị trùng hoặc gần giống với chuỗi ký tự mà người dùng gõ vào.

     
     

    Callout

       

    Hiển thị một chuỗi mô tả dạng "tool tip" cho một đối tượng HTML (HTML element) thông qua sự kiện onClick hoặc onMouseOver.

     
     

    HTML Content Replace

       

    Dùng để tải nội dung cho một đối tượng hiển thị, ví dụ thẻ DIV khi người dùng nhấn chuột vào một liên kết, hình ảnh...

     
     

    Portlet

       

    Hiển thị nội dung dạng hộp thoại có thể thu nhỏ hay làm mới lại dữ liệu.

     
     

    Select/dropdown

       

    Dựa vào nội dung được chọn ở một đối tượng select để hiển thị hoặc kích hoạt, tải dữ liệu cho một select khác.

     
     

    Tab Panel

       

    Tạo các tab tự động nạp dữ liệu khi được chọn.

     
     

    Toggle

       

    Tạo hệ thống bình chọn hay nút nhấn bằng hình.

     
     

    Update Field

       

    Tự động cập nhật thông tin cho một số trường (form field) dựa vào thông tin được nhập vào từ một trường nào đó.

     
     

    Area và Anchor

       

    Tự động làm mới dữ liệu của web.

     
     

    Ajax DisplayTag

       

    Khả năng trình diễn của Ajax.

     

    Phan Anh Tuấn
    FCG Vietnam (PSV)
    taphan@fcg.com
    ---------------------------------------------
    Tài liệu tham khảo:

    Ajax JSP Tag Library: http://sourceforge.net/projects/ajaxtags/
    Diễn đàn thảo luận về AjaxTags: http://sourceforge.net/forum/forum.php?forum_id=471271

    ID: A0608_127