Khởi đầu các ứng dụng Java của bạn - Phần 2: Phát triển Ajax gọn nhẹ, dễ dàng

hị trong Hình 2, bạn sẽ thêm vào hoặc sửa đổi các thành phần ứng dụng Web trong bảng 1: Bảng 1. Các thành phần của ứng dụng Web về thông tin nhân viên Thành phần Mô tả employee.jsp Một trang JSP không có kịch bản lệnh (không nhúng mã Java). Nó xử lý tương tác của người dùng và sử dụng các thẻ JSTL SQL để truy vấn các thông tin của cơ sở dữ liệu DB2. Bạn nên thêm thành phần này. ShowPhoto.java servlet Một Java servlet để truy vấn cơ sở dữ liệu DB2 tìm thông tin ảnh nhân viên. Các ảnh nhân viên được lưu trữ theo nhiều định dạng trong cơ sở dữ liệu, trong các trường BLOB. Ở đây chỉ có các định dạng ảnh GIF được sử dụng. Servlet này viết kết quả đầu ra của nó theo một định dạng luồng tương thích với kiểu MIME, đúng yêu cầu của phần tử hiển thị của trình duyệt . Việc truy cập cơ sở dữ liệu được thực hiện thông qua một nguồn dữ liệu hệ thống, nhận được qua giao diện thư mục và đặt tên của Java (Java Naming and Directory Interface - JNDI) và được hỗ trợ bởi pool cơ sở dữ liệu toàn hệ thống đã cấu hình trên Máy chủ ứng dụng trong bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Bạn nên thêm thành phần này. dwstyles.css Bạn sẽ sửa đổi phiếu định kiểu (stylesheet) này để xử lý định dạng bổ sung cho trang employee.jsp mới. Làm thế nào để cho các thành phần ứng dụng phù hợp với nhau Hình 3 cho thấy cách các thành phần ứng dụng phù hợp với nhau như thế nào: Hình 3. Cấu trúc của ứng dụng thông tin - nhân viên Thành phần employee.jsp sinh ra trang web có chứa giao diện người dùng. Trang web đã tạo ra này được trình bày trên trình duyệt của người dùng. Người sử dụng tương tác với trang đã trình bày để truy vấn thông tin nhân viên bằng cách đệ trình một biểu mẫu (form) HTML. JSP xử lý dữ liệu biểu mẫu đã đệ trình và tìm thông tin nhân viên từ cơ sở dữ liệu. JSP sau đó tạo ra và trả về một trang web chứa các thông tin ấy. Ảnh nhân viên dưới định dạng GIF được tạo ra riêng biệt, do ShowPhoto servlet thực hiện. Servlet này nhận các dữ liệu hình ảnh từ cùng một cơ sở dữ liệu DB2 Express-C 9.5. Sử dụng bộ khởi đầu các ứng dụng Java của bạn để mã hoá, thử nghiệm và triển khai các ứng dụng Hình 4 cho thấy bộ khởi đầu trợ giúp tạo ra ứng dụng này như thế nào: Hình 4. Phát triển ứng dụng bằng các công cụ miễn phí Bạn sẽ viết mã cho ứng dụng trong Eclipse và sử dụng một cá thể của Máy chủ ứng dụng do Eclipse điều khiển để triển khai và thử nghiệm ứng dụng đó. Thành phần JSP của ứng dụng truy cập vào cơ sở dữ liệu mẫu của DB2 Express-C 9.5 thông qua một pool JDBC do Máy chủ ứng dụng quản lý. Thành phần servlet của ứng dụng cũng sử dụng cùng pool được quản lý ấy để truy cập vào các trường BLOB từ cơ sở dữ liệu, chuyển đổi chúng thành thông tin đồ họa để hiển thị như là các ảnh của nhân viên trong trình duyệt. JSP lựa chọn nhân viên Bắt đầu từ dự án dwapp trong Eclipse như thấy trong Hình 2, nhấn chuột phải vào thư mục WebContent trong khung nhìn Navigator và chọn New > Other... (hoặc ấn Ctrl+N). Chọn Web > JSP từ thủ thuật New, như hiển thị trong Hình 5: Hình 5. Tạo ra một JSP mới, sử dụng thủ thuật New của Eclipse Nhấn Next và sau đó nhập tên của JSP mới là employee.jsp. Nhấn vào Finish để hoàn thành việc tạo ra mẫu JSP ban đầu. Bây giờ, biên tập JSP đã tạo ra bằng cách thêm đoạn mã được in đậm như hiển thị trong Listing 1: Listing 1. Thành phần employee.jsp để xử lý các tương tác giao diện người sử dụng <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> dW Example Employee Information from DB2 Express C Table DB2 Employee Information SELECT * FROM EMPLOYEE ORDER BY LASTNAME ${employee.lastname}, ${employee.firstnme} SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' ${employee.lastname}, ${employee.firstnme} Employee number:${employee.empno} Position:${employee.job} Hired:${employee.hiredate} Department:${employee.workdept} Phone number:${employee.phoneno} Salary:$${employee.salary} Bonus:${employee.bonus} Tuân theo cách làm JSP tốt nhất, employee.jsp không chứa mã Java nhúng; việc tạo ra tất cả mã động được xử lý qua JSTL và Expression Language (EL). employee.jsp hoạt động như thế nào Hình 1 chỉ ra cách bố trí của employee.jsp. Một danh sách thả xuống — một phần tử HTML — duy trì danh sách các tên nhân viên. Người sử dụng chọn bất kỳ một trong những nhân viên từ danh sách và nhấn vào nút find employee. Thông tin chi tiết về nhân viên được chọn sau đó sẽ hiển thị, cùng với một bức ảnh của nhân viên đó nếu có. (Không phải tất cả các nhân viên đều có sẵn một ảnh trong cơ sở dữ liệu DB2 mẫu). Trong employee.jsp, sử dụng mã JSTL trong Listing 2 để tạo ra danh sách thả xuống: Listing 2. Tạo ra các tên nhân viên động để lựa chọn SELECT * FROM EMPLOYEE ORDER BY LASTNAME ${employee.lastname}, ${employee.firstnme} Bạn sử dụng thẻ JSTL SQL để thực hiện một truy vấn lựa chọn tất cả các bản ghi nhân viên từ cơ sở dữ liệu DB2. Điều này tương tự như truy vấn đã được bạn sử dụng trong ví dụ Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Lần này, thông tin nhân viên được trả về theo tên họ được sắp xếp theo thứ tự chữ cái abc (nhờ mệnh đề ORDER BY LASTNAME trong truy vấn SQL) để làm cho việc lựa chọn các tên từ danh sách thả xuống dễ dàng hơn. Bạn thực hiện truy vấn SQL đối với jdbc/DataSource Việc này được cấu hình trong kế hoạch triển khai geronimo-web.xml của ứng dụng và trỏ tới pool cơ sở dữ liệu toàn hệ thống có tên là dwDatasource, đã được cấu hình trên Máy chủ ứng dụng. Sau đó, bạn sử dụng thẻ vòng lặp để lặp theo danh sách các nhân viên được chọn mỗi lần một hàng. Một thẻ HTML được tạo ra cho mỗi nhân viên. Giá trị của là một số nhân viên và văn bản được hiển thị là họ và tên của nhân viên. Ví dụ, được tạo ra cho Bruce Adamson là: ADAMSON, BRUCE Toàn bộ phần tử tồn tại bên trong một thẻ HTML bao quanh, như hiển thị bằng chữ đậm trong Listing 3: Listing 3. Danh sách bên trong phần tử ... ... Thẻ tạo ra liên kết URL tạo ra một URL có định dạng đúng cho bạn, trỏ ngược lại tới chính employee.jsp này để xử lý biểu mẫu. URL này được đặt trong một biến gọi là empURL và được sử dụng trong thuộc tính hành động của thẻ . Khi người sử dụng lựa chọn một nhân viên — ví dụ, Bruce Adamson (empno=000150) — và nhấn vào nút find employee, thông tin biểu mẫu này được đệ trình ngược lại tới employee.jsp để xử lý bằng URL này: Xử lý đệ trình biểu mẫu HTML Trang employee.jsp có hai vai trò:  Để hiển thị danh sách các nhân viên để lựa chọn  Để xử lý việc đệ trình biểu mẫu sau khi một nhân viên được chọn Để xác định xem việc đệ trình biểu mẫu đã được thực hiện chưa, bạn cần phải kiểm tra xem có tồn tại một tham số empno HTTP GET không. Bạn có thể sử dụng toán tử empty trong JSTL cho việc kiểm tra này. Mã lệnh để trình bày thông tin và ảnh nhân viên được bao trong dấu ngoặc bằng một thẻ để thực hiện phép kiểm tra này. Đoạn mã này được hiển thị trong Listing 4: Kiểm tra sự tồn tại của tham số biểu mẫu empno SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' ... Nếu yêu cầu HTTP đầu vào không có tham số empno, thì không có thông tin chi tiết nhân viên nào được tạo ra. Để tạo thông tin chi tiết nhân viên, một khác được thực hiện đối với bảng EMPLOYEE (nhân viên). Lệnh SELECT này bây giờ xác định chính xác một nhân viên có số hiệu nhân viên tương ứng. Đối tượng ẩn JSTL, param, được sử dụng để trình bày giá trị tham số empno đầu vào trong lệnh SELECT như thấy trong Listing 5: Listing 5. Nhận được bản ghi của một nhân viên khi sử dụng một truy vấn SQL được tạo ra động SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' ... Mặc dù một cấu trúc được sử dụng ở đây, bạn đang làm việc với chỉ một hàng (vì mỗi nhân viên chỉ có một số nhân viên duy nhất). Cấu trúc JSTL này làm đơn giản hoá việc truy cập vào dữ liệu hàng trong tập kết quả được trả về. Để tạo ra thông tin văn bản, biến employee thiết lập bằng có thể được sử dụng trực tiếp. Ví dụ, biểu thức EL sau đây tạo ra số điện thoại của nhân viên trong cấu trúc : ${employee.phoneno} Để tạo ra ảnh nhân viên, bạn sử dụng một thẻ HTML Sử dụng thẻ JSTL tạo ra URL hiển thị hình ảnh này: Ví dụ, thẻ được tạo ra có hiệu lực cho Bruce Adamson (có empno là 00150) là: Điều này có nghĩa là URL sau phải tạo ra một luồng bit để biểu diễn ảnh của nhân viên: servlet ShowPhoto.java tạo ra luồng bit của ảnh. Hiển thị ảnh từ các trường BLOB DB2 Các bức ảnh nhân viên được lưu trữ trong bảng EMP_PHOTO của cơ sở dữ liệu mẫu DB2. Bảng 2 mô tả các trường của bảng này: Bảng 2. Các trường của bảng EMP_PHOTO Tên trường Mô tả empno Số hiệu nhân viên của nhân viên tương ứng. photo_format Định dạng của ảnh. Các ảnh được lưu trữ theo nhiều định dạng để giúp cho việc hiển thị hình ảnh dễ dàng hơn mà không cần mã chuyển đổi phức tạp. Ứng dụng này chỉ sử dụng cho các ảnh có định dạng GIF. picture Các bit nhị phân của hình ảnh, được lưu giữ trong một trường BLOB. Kích thước lớn nhất của trường này là 102.400 byte. Để tạo servlet ShowPhoto.java trong IDE Eclipse, đầu tiên hãy điểm sáng WebContent và chọn New > Other... (hoặc ấn Ctrl+N). Chọn Web > Servlet trong trình thủ thuật New. Nhập com.ibm.dw làm tên gói Java Package và ShowPhoto làm tên lớp, như được hiển thị trong Hình 6: Hình 6. Tạo một servlet mới bằng trình thủ thuật Create Servlet của WTP Eclipse Nhấn Next. Trên màn hình kế tiếp, bạn có thể thiết lập phép ánh xạ URL cho servlet. Phép ánh xạ URL này sẽ được đặt tự động vào trong bộ mô tả triển khai web.xml của ứng dụng dưới dạng một phần tử . Trong trường hợp này, bạn có thể giữ nguyên phép ánh xạ mặc định tới /ShowPhoto. Nhấn vào Finish. Nếu bạn nhìn vào khung nhìn Navigator, bạn sẽ thấy tệp tin com.ibm.dw.ShowPhoto.java trong thư mục src, bên ngoài thư mục WebContent. WTP Eclipse giữ mã nguồn ở đây để dễ dàng bảo trì và tổ chức, nhưng sao chép các tệp tin lớp được biên dịch vào đúng vị trí trong thư mục WEB-INF/classes để triển khai ứng dụng Web tự động. Các bước mà bạn vừa thực hiện xong tạo ra một khung sườn servlet trong ShowPhoto.java. Bây giờ hãy sửa đổi mã nguồn bằng cách thêm các dòng chữ đậm như hiển thị trong Listing 6: Listing 6. Mã lệnh bổ sung thêm cho servlet ShowPhoto.java package com.ibm.dw; import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import javax.naming.InitialContext; import javax.naming.NamingException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.sql.DataSource; /** * Servlet implementation class for Servlet: ShowPhoto * */ public class ShowPhoto extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet { public ShowPhoto() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String query = "select picture from emp_photo where photo_format='gif' and empno='" + request.getParameter("empno") + "'"; DataSource dsource = null; Statement stmt= null; Connection conn =null; ResultSet rset = null; try { InitialContext context = new InitialContext(); dsource = (DataSource)context.lookup("java:comp/env/jdbc/DataSource"); conn = dsource.getConnection(); stmt = conn.createStatement(); rset = stmt.executeQuery(query); if (rset.next()) { byte[] buffer = new byte[32000]; int size=0; InputStream istream; istream = rset.getBinaryStream(1); response.reset(); response.setContentType("image/gif"); while((size= istream.read(buffer))!= -1 ) { response.getOutputStream().write(buffer,0,size); } response.flushBuffer(); istream.close(); } } catch(NamingException e) { } catch(SQLException e) { } finally { try { if (rset != null) rset.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException ex ) {} } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } } Sử dụng trình tổ chức nhập khẩu (import) tự động của Eclipse Bạn có thể cắt và dán từ mã nguồn của hướng dẫn này (xem Tải về) nếu bạn muốn. Hoặc, nếu bạn đang nhập mã lệnh vào bằng tay, bạn không cần phải gõ phím cả danh sách lệnh nhập khẩu (import) lớn như trên. Eclipse có thể tìm kiếm tất cả các thư viện dự án có sẵn để tìm các ký hiệu nhập khẩu của bạn. Nhấn chuột phải vào trong trình soạn thảo mã và chọn Source > Organize Imports (hoặc ấn Ctrl+Shift+O). Thao tác này sẽ quét mã nguồn của bạn, tìm tất cả các ký hiệu nhập khẩu vào chưa được phân giải và bổ sung thêm tất cả các lệnh import cần thiết vào đầu tệp mã nguồn. Nếu Eclipse gặp bất kỳ sự nhập nhằng nào khi phân giải các ký hiệu nhập khẩu, nó sẽ nhắc bạn lựa chọn gói phần mềm thư viện, mà ký hiệu phải được nhập khẩu từ đó. Đặc tính này tránh cho bạn không phải mệt mỏi tìm kiếm bằng tay trong việc viết mã lệnh hàng ngày. Hoạt động của servlet ShowPhoto Yêu cầu HTTP đầu vào có chứa một tham số có tên là empno. Tham số này được sử dụng để tìm đúng ảnh từ bảng EMP_PHOTO. Truy vấn được thiết lập trong chuỗi sau: String query = "select picture from emp_photo where photo_format='gif' and empno='" + request.getParameter("empno") + "'"; Truy vấn thực hiện với jdbc/DataSource được thiết lập trong kế hoạch triển khai, geronimo-web.xml. Nguồn dữ liệu này liên kết tới pool cơ sở dữ liệu toàn hệ thống có tên là dwDatasource được cấu hình trên Máy chủ ứng dụng. Đối với các servlet lưu trú trên Máy chủ ứng dụng, bạn có thể thực hiện tìm kiếm, sử dụng JNDI sau: InitialContext context = new InitialContext(); dsource = (DataSource)context.lookup("java:comp/env/jdbc/DataSource"); Một khi các nguồn dữ liệu đã nhận được, bạn có thể thực hiện truy vấn sử dụng mã lệnh JDBC tiêu chuẩn: conn = dsource.getConnection(); stmt = conn.createStatement(); rset = stmt.executeQuery(query); Để tìm trường hình ảnh như là một luồng đầu vào nhị phân, hãy sử dụng phương thức getBinaryStream() trên trường #1 — trường hình ảnh trong ResultSet JDBC (tập kết quả JDBC) mà truy vấn SELECT trả về: InputStream istream; istream = rset.getBinaryStream(1); Bạn cần phải thiết lập contentType (kiểu nội dung) đúng cho nội dung trả lời của servlet để đảm bảo rằng trình duyệt có thể diễn giải được thuộc tính kiểu mime image/gif : response.reset(); response.setContentType("image/gif"); Tất cả những gì còn phải làm là đọc từ luồng nhị phân của trường hình ảnh và ghi nó ra luồng đầu ra trả lời: while((size= istream.read(buffer))!= -1 ) { response.getOutputStream().write(buffer,0,size); } Thao tác này hoàn tất servlet ShowPhoto.java. Tiếp theo, bạn sẽ thiết lập trang chào đón ban đầu của ứng dụng. Thiết lập trang chào đón của ứng dụng Web Theo mặc định, ứng dụng Web hiển thị index.jsp như là trang chào đón. Đây là trang được Máy chủ ứng dụng hiển thị khi URL sau được yêu cầu: index.jsp hiện đang chứa ứng dụng danh sách - nhân viên cũ. Bạn cần phải thay đổi trang chào đón để trỏ tới employee.jsp. Mở tệp tin web.xml từ khung nhìn Navigator và sau đó tìm phần tử . Phần tử này chứa các tệp tin mà Máy chủ ứng dụng tìm kiếm khi hiển thị trang chào đón của ứng dụng. Thực hiện thay đổi sau đây (hiển thị bằng chữ đậm trong Listing 7) cho phần tử này: Listing 7. Cấu hình employee.jsp làm trang chào đón của ứng dụng index.html index.htm employee.jsp default.html default.htm default.jsp Sửa đổi phiếu định kiểu Bạn cũng cần sửa đổi bản phiếu định kiểu gốc ban đầu dwstyles.css để bao gồm các phần tử kiểu bổ sung, như hiển thị bằng chữ đậm trong Listing 8, mà employee.jsp sử dụng: Listing 8. Các phần tử mới được thêm vào phiếu định kiểu dwstyles.css @CHARSET "ISO-8859-1"; h1 { font-family: arial; font-size: 38; align: left; font-weight: bold; font-style: italic; color: green; } h2 { font-family: serif, times; font-size: 18; align: left; color: blue; } th { font-family: verdana, arial; font-size: 13; font-weight: bold; align: left; background-color: black; color: white; } td { font-family: verdana, arial; font-size: 12; font-style: italic; text-align: left; } table { border-style: solid; border-width: thin; } .label { font-size: 16; font-weight: bold; font-style: normal; text-align: right; } .name { font-size: 24; font-weight: bold; font-style: italic; font-family: serif, times roman; } Thử nghiệm ứng dụng thông tin-nhân viên Trước khi bạn có thể chạy ứng dụng, bạn cần phải xây dựng dự án, tức là biên dịch mã Java và tạo ra tệp tin WAR. Nhấn chuột phải vào dwapp trong khung nhìn Navigator và chọn Build Project. Dự án Eclipse của bạn có thể được thiết lập để xây dựng tự động, trong trường hợp này bạn không cần phải xây dựng bằng tay mỗi lần. Kiểm tra trong trình đơn Project trên thanh trình đơn của Eclipse để xem dự án được thiết lập để xây dựng tự động chưa. Để triển khai ứng dụng mới của bạn lên Máy chủ ứng dụng và thử nghiệm nó, nhấn chuột phải vào dự án dwapp trong khung nhìn Navigator và chọn Run As > Run on Server. Kiểm tra khung nhìn Servers hai lần xem dự án dwapp đã ở trạng thái đã đồng bộ (Synchronized) chưa. Nếu không, chỉ cần nhấn chuột phải vào dự án dwapp trong khung nhìn Servers và chọn Publish. Eclipse sau đó sẽ đưa phiên bản WAR mới nhất tới máy chủ và dự án ở trong trạng thái đã đồng bộ. Nếu Máy chủ ứng dụng không phải đang chạy, Eclipse khởi động nó. Các ứng dụng được gói lại như một tệp tin WAR và được triển khai tới Máy chủ ứng dụng. Khởi chạy trình duyệt Web bên trong (hoặc bên ngoài) và truy cập vào URL của ứng dụng: (Tìm nút Open Web Browser trên thanh công cụ của Eclipse để tìm một trình duyệt bên trong). Bây giờ bạn có thể thử chọn các nhân viên khác trong cơ sở dữ liệu để xem thông tin chi tiết về họ. Nếu nhân viên bạn chọn có ảnh trong cơ sở dữ liệu, ảnh cũng sẽ được hiển thị. Cải thiện ứng dụng thông tin-nhân viên Phiên bản hệ thống thông tin nhân viên mà bạn vừa hoàn thành chỉ thích hợp cho một công ty rất nhỏ — có khoảng 30 nhân viên. Để xử lý được một công ty có vài trăm nhân viên, việc sử dụng một danh sách thả xuống để chọn nhân viên hầu như không khả thi. Hơn nữa, việc gửi qua gửi lại các thông tin của hàng trăm nhân viên từ DB2 tới JSP mỗi khi danh sách lựa chọn được hiển thị vừa không hiệu quả lại vừa chậm. Trong phần này, bạn sẽ chuẩn bị để xây dựng một nhánh hệ thống thông tin thứ hai nhằm cải thiện tình hình này với một bản thiết kế giao diện người dùng được hoàn thiện tốt hơn. Trải nghiệm của người dùng với thiết kế dựa trên trang so với việc cập nhật động trực quan Phiên bản dựa trên JSP xử lý việc tìm kiếm nhân viên bằng cách trả về một trang Web mới. Đây là hành động tiêu chuẩn của JSP, được gọi ngày càng phổ biến là thiết kế dựa trên trang có trước (legacy page-based design). Chuỗi tương tác liên tiếp là: 1. Người sử dụng chọn một biểu mẫu (trong trường hợp này là chọn nhân viên). 2. Dữ liệu biểu mẫu được đệ trình trở lại đến một trình xử lý biểu mẫu trên máy chủ (trong trường hợp này là employee.jsp). 3. Trình xử lý biểu mẫu trả về một trang HTML mới tới trình duyệt của người dùng. 4. Trình duyệt của người dùng sẽ hiển thị trang đáp ứng mới này. Kết quả là người sử dụng cảm thấy khá sốt ruột. Sư chậm trễ đệ trình dữ liệu và chờ trả lời là nhận thấy rõ. Các thay đổi được hiển thị theo mẫu tất cả-hoặc-không có gì (all-or-nothing) — ngay cả khi chỉ có một phần nhỏ của trang HTML cần thay đổi, toàn bộ trang được tìm về từ máy chủ và được trình bày lại. Nói ngắn gọn, cảm giác trải nghiệm của người dùng với các ứng dụng Web điển hình là rất khác với các ứng dụng trên máy tại chỗ như xử lý văn bản và lịch biểu. Để cải thiện cảm giác trải nghiệm của người dùng trên các kết nối tốc độ cao, có thể chọn một cách tiếp cận năng động hơn, bao gồm chuỗi các tương tác sau: 1. Người sử dụng thao tác chọn trên một trang HTML. 2. Không đệ trình ngay biểu mẫu, mã JavaScript trên trình duyệt gửi truy vấn do người sử dụng nhập vào đến máy chủ; điều này xảy ra trong nền và người dùng không nhìn thấy. 3. Không đợi câu trả lời, trình duyệt vẫn tiếp tục hiển thị trang Web này và cho phép tương tác với người dùng. 4. Sau một thời gian, trả lời cho truy vấn được máy chủ gửi lại và mã JavaScript trên trình duyệt nhận được câu trả lời này. Việc này người sử dụng vẫn không nhìn thấy và vẫn tiếp tục tương tác với giao diện người dùng. 5. Sử dụng mã HTML (DHTML) động, hiện đại để cho phép các trang Web được sửa đổi trong lúc đang hoạt động bằng cách dùng mã JavaScript. Trang Web được cập nhật động với các dữ liệu trả lời. Chỉ các phần tử hiển thị cần thay đổi mới được sửa đổi. Cảm giác trải nghiệm của người sử dụng được cải thiện rất nhiều. Việc chờ đợi đáp ứng từ máy chủ và việc làm mới/ cập nhật theo từng trang một không còn nữa. Thay vào đó, người sử dụng nhận thấy các trải nghiệm tương tác quen thuộc. Về cơ bản cảm thấy giống như dùng một ứng dụng tại chỗ. Ajax làm cho tương tác người sử dụng được đáp ứng tốt hơn Các thuộc tính chính của ứng dụng tương tác nhiều hơn này là:  Tính không đồng bộ (Asynchronicity): Truy vấn được mã lệnh phía trình duyệt gửi đi không đồng bộ, nghiã là không cần phải chờ đợi truy vấn trước được trả về; vì không đồng bộ nên không có phần tử giao diện người dùng nào bị đóng băng hay bị cấm.  JavaScript: Duy nhất JavaScript là ngôn ngữ lập trình phía trình duyệt được hỗ trợ mọi lúc mọi nơi. Tất cả các tương tác giao diện người dùng của ứng dụng được sắp đặt cẩn thận, sử dụng mã JavaScript chạy trên trình duyệt.  XML: Điều này không dễ thấy, nhưng truy vấn cần phải gửi đi gửi về từ trình duyệt đến máy chủ với các thông số gói kèm. Câu trả lời cũng có thể chứa các cấu trúc dữ liệu phức tạp (như là một danh sách các bản ghi nhân viên, với các trường có kích thước và kiểu khác nhau) phải được phân tích cú pháp bằng mã JavaScript của trình duyệt trước khi sử dụng. Một phương pháp đã được kiểm chứng và thử nghiệm để trao đổi qua lại các dữ liệu phức tạp này trên một kết nối HTTP là thông qua XML. Các thư viện xử lý XML có thể thực hiện phần lớn việc trao đổi qua lại dữ liệu ấy. Vì vậy, trải nghiệm tương tác cao của người dùng mà bạn nhận được là nhờ có Asynchronous JavaScript và XML — được gọi một cách đơn giản hơn trong cộng đồng phát triển là Ajax. Các thông tin chi tiết về các chủ đề Ajax nằm ngoài phạm vi của hướng dẫn này. Xem developerWorks Trung tâm tài nguyên Ajax (Ajax resource center) của developerWorks, và xem loạt bài Ajax dành cho các nhà phát triển Java (Ajax for Java developers) của Philip McCarthy (xem Tài nguyên), một nguồn tài nguyên tuyệt vời cho việc học tập về Ajax. Hướng dẫn này tập trung vào việc làm thế nào để bạn có thể áp dụng Ajax để cải thiện giao diện người dùng của ứng dụng thông tin nhân viên và làm thế nào để xây dựng các giải pháp dựa trên Ajax khi sử dụng Eclipse, DB2 Express-C 9.5, và Máy chủ ứng dụng. Thiết kế lại ứng dụng với Ajax Hình 7 cho thấy giao diện người dùng đã cải tiến của ứng dụng dựa trên Ajax mà bạn đang muốn xây dựng: Hình 7. Giao diện người dùng đã cải tiến cho ứng dụng thông tin-nhân viên Phiên bản này bao gồm một trường nhập dữ liệu và một hộp thả xuống. Người dùng có thể: 1. Nhập bao nhiêu chữ cái đầu của tên họ nhân viên như họ muốn vào trường nhập dữ liệu. 2. Gõ phím Tab ra khỏi trường nhập dữ liệu để liệt kê động trong danh sách thả xuống dãy tên họ nhân viên khớp với các chữ cái đã gõ nhập. 3. Chọn một nhân viên từ danh sách thả xuống. Khi người sử dụng gõ phím Tab ra khỏi danh sách thả xuống, ứng dụng ngay lập tức cập nhật tất cả các thông tin nhân viên, bao gồm cả ảnh. 4. Ngay lập tức lặp lại bước 1 và 2 để xem thông tin từ một nhân viên khác. Lưu ý rằng không lúc nào người dùng phải chịu đựng sự chậm trễ đệ trình biểu mẫu hoặc đáp ứng trang. Thiết kế này cũng còn có những khác biệt sau đây so với phiên bản dựa trên JSP:  Số lượng các lựa chọn trong danh sách thả xuống là giảm đáng kể, cho phép các ứng dụng xử lý một số lượng nhân viên lớn hơn.  Có ít mục hơn trong danh sách thả xuống có nghĩa là có ít dữ liệu hơn phải chuyển từ các cơ sở dữ liệu DB2 đến Máy chủ ứng dụng, do đó cải thiện hiệu năng ứng dụng về tổng thể.  Sự tương tác của giao diện người dùng được cải thiện rất nhiều, nhờ Ajax.  Các trang được hiển thị là trang thuần tuý hương vị HTML, không phải là một trang JSP được tạo ra.  Ứng dụng này không phụ thuộc trực tiếp vào một thùng chứa (container) Java EE. Nó không trực tiếp dựa vào JSP, servlets hoặc các EJB trong các hoạt động của mình. Do thiết kế không dùng thùng chứa (containerless) của nó và sử dụng trang thuần hương vị HTML, giải pháp theo phong cách này thường được gọi là kiến trúc nhẹ (lightweight construction). Trên thực tế, bạn có thể chỉ cần viết mã JavaScript vào một trang HTML và sau đó điều khiển động các phần tử giao diện người dùng và truy vấn các cơ sở dữ liệu ở mặt sau với nó. Bạn có thể xây dựng mặt sau hoàn toàn bằng công nghệ thay thế khác, như là khung công tác nhẹ Spring (Spring lightweight framework) hoặc thậm chí là công nghệ không phải Java như là Ruby on Rails (xem Tài nguyên). Giới thiệu Web trực tiếp từ xa Việc nghiên cứu chi tiết về viết mã Ajax mức thấp không phải dành cho người nhát gan. Tất cả các mã Ajax đều sử dụng một đối tượng có sẵn trong tất cả các trình duyệt hiện đại — bao gồm cả các phiên bản mới nhất của các trình duyệt Firefox, Safari, và Internet Explorer — gọi là XMLHttpRequest. Mã JavaScript có thể thực hiện các cuộc gọi không đồng bộ đến máy chủ thông qua đối tượng này. Thật không may, các trình duyệt khác nhau thực hiện triển khai đối tượng XMLHttpRequest hơi khác nhau một chút. Còn rắc rối thêm nữa là các phiên bản hỗn hợp, khác nhau của cùng một trình duyệt (ví dụ như Internet Explorer) cũng triển khai thực hiện đối tượng này khác nhau. Thêm vào thực tế này là mã JavaScript tự nó cũng khác nhau đối với các trình duyệt và các phiên bản khác nhau, và bạn có một vấn đề hắc búa đang chờ đợi. Độ phức tạp còn được kết hợp thêm với sự thiếu vắng tiêu chuẩn hóa về cách thức dữ liệu được trao đổi qua lại trên các yêu cầu và đáp ứng XML giữa mã trình duyệt và máy chủ ở mặt sau như thế nào. Nhiều giải pháp cạnh tranh khác có mặt, và một số nhà phát triển bị thất vọng đơn giản vứt bỏ luôn. Để đánh giá được một số khó khăn tiềm tàng, xem loạt bài Ajax for Java developers (xem Tài nguyên). May quá, với tư cách là một nhà phát triển Java, bạn có thể sử dụng một chồng thư viện để tách ra hầu hết các sự khác biệt mà tôi đã mô tả và cung cấp một giải pháp Ajax viết mã dễ dàng, khả thi ngày hôm nay. Thư viện này được gọi là Direct Web Remoting (DWR) (xem Tài nguyên). DWR là đứa con tinh thần của Joe Walker và Mark Goodwin. Đây là một tổ hợp giữa thư viện mã JavaScript và Java servlet để cho phép bạn thực hiện các cuộc gọi từ xa trong suốt tới các phương thức của đối tượng Java phía máy chủ từ một trang Web, khi sử dụng Ajax. Trọng tâm phát triển của thư viện này là giúp cho các nhà phát triển sử dụng dễ dàng. DWR được phát hành theo giấy phép phần mềm Apache 2.0, chính là giấy phép hào phóng mà các dự án mã nguồn mở lớn rất thành công như Apache Tomcat, Apache Ant và Apache Geronimo đã tuân theo. Bạn có thể tạo ra các ứng dụng, thương mại hoặc không, khi sử dụng thư viện DWR mà không có nghĩa vụ đóng góp lại cho dự án. Xem các điều khoản cấp phép với đầy đủ chi tiết. Hình 8 cho thấy DWR làm đơn giản hoá hoạt động lập trình Ajax của bạn như thế nào: Hình 8. Các thành phần của DWR DWR hoạt động như thế nào DWR gồm có hai thành phần:  Một thư viện JavaScript chạy trên trình duyệt của người dùng (utils.js và engine.js).  Một servlet để chạy trên Máy chủ ứng dụng. Các mã JavaScript do bạn viết có thể sử dụng thư viện JavaScript của DWR. Thư viện này cung cấp các đặc tính cốt yếu sau đây:  Nó tránh cho bạn khỏi các khác biệt của trình duyệt trong việc xử lý các cuộc gọi Ajax.  Nó tạo thuận lợi cho một số thao tác DHTML nhất định khi sửa đổi động các phần tử của trang Web mà nếu trái lại (không dùng DWR) có thể phải viết mã JavaScript và DHTML khá phức tạp. Quan trọng hơn, DWR cho phép bạn truy cập từ xa (remote) các đối tượng Java nhất định. Trong Hình 8, đối tượng Employee của Java phía máy chủ (một đối tượng thuần Java cũ - POJO) được truy cập từ xa. DWR làm cho đối tượng này xuất hiện để sẵn sàng cho mã JavaScript chạy trên trình duyệt của người dùng. Các mã JavaScript có thể truy cập vào các đối tượng Employee phía máy chủ cứ như chúng là các đối tượng JavaScript tại chỗ. Để tận dụng đặc tính truy nhập từ xa này, đối tượng Employee phía máy chủ nhận dữ liệu của nó thông qua một kết nối JDBC trực tiếp với dữ liệu nhân viên trên DB2 Express-C 9.5. Do đối tượng ở xa nên dữ liệu này sẽ tự động tạo sẵn cho mã JavaScript trên trình duyệt phía khách. Bên dưới vỏ bọc, DWR thực hiện các cuộc gọi không đồng bộ thông qua đối tượng XMLHttpRequest được trình duyệt cung cấp tới servlet riêng của nó đang chạy trên Máy chủ ứng dụng. Servlet này truy cập đối tượng Employee phía máy chủ và gửi lại dữ liệu đã yêu cầu qua một đáp ứng HTTP đã định dạng theo định dạng JavaScript Object Notation (JSON). Định dạng JSON là một định dạng tuần tự hóa thân thiện với mã JavaScript để cho phép bộ thông dịch mã JavaScript trong trình duyệt Web tạo ra trực tiếp các đối tượng JavaScript bản địa (phản ánh đối tượng Employee phía máy chủ). Hướng tới một thiết kế nhẹ Ứng dụng thông tin-nhân viên mới, khi sử dụng DWR để triển khai thực hiện Ajax, chứa mã lệnh đơn giản hơn và trực tiếp hơn ứng dụng tiền nhiệm cũ. Hình 9 cho thấy thiết kế mới này hoạt động như thế nào: Hình 9. Ứng dụng thông tin nhân viên gọn nhẹ mới Trong Hình 9, trang web hiển thị thông tin nhân viên hiện nay là một trang HTML, không phải là một JSP. Trong trường hợp này Máy chủ ứng dụng chỉ hoạt động như là một máy chủ Web, phục vụ các trang Web tĩnh cho trình duyệt của người sử dụng. Nó không hoạt động như là một thùng chứa JSP. Mã JavaScript trong trang HTML truy cập các đối tượng Employee đang ở xa, sử dụng DWR. Các đối tượng Employee phía máy chủ không cần thiết phải lưu trú bên trong một thùng chứa truyền thống. Trong thiết kế này, Máy chủ ứng dụng được sử dụng chỉ cho ba mục đích:  Để hoạt động như một máy chủ Web tĩnh và phục vụ trang HTML tĩnh có chứa mã Ajax  Để hỗ trợ thực hiện các DWR  Để hỗ trợ servlet ShowPhoto hiển thị các ảnh của nhân viên Thực nghiệm với DWR Máy chủ ứng dụng bao gồm phiên bản 1.1.4 ổn định của DWR theo mặc định. Ví dụ này tận dụng thực tế đó và không yêu cầu tải về hay cài đặt thêm một DWR để hoạt động. Bạn chỉ nên sử dụng thư viện mặc định của Máy chủ ứng dụng, phiên bản 1.1.4, với ví dụ này. Các phiên bản mới hơn có thể có sẵn qua các trang Web tải về DWR để bạn tìm hiểu thêm. Để thực nghiệm ngay bây giờ với DWR và hiểu rõ hơn về hoạt động của nó, hãy vào Tải về DWR và chỉ tải về tệp tin dwr.war cho DWR phiên bản 1.1.4 (hãy chắc chắn rằng bạn nhận được phiên bản đúng). Tệp tin dwr.war là một ứng dụng trình diễn, cũng có chứa một số bộ thử nghiệm đơn vị và chẩn đoán có ích. Cuộc gặp gỡ lần đầu tiên với Ajax trên DWR Để thấy bạn có thể khởi động nhanh chóng như thế nào, đầu tiên hãy triển khai các ứng dụng Web mẫu trong tệp tin dwr.war. Hãy chắc chắn rằng Eclipse không chạy, và sau đó khởi động Máy chủ ứng dụng. Tiếp theo, khởi động bàn quản trị Máy chủ ứng dụng và triển khai ứng dụng dwr.war: 1. Với Máy chủ ứng dụng đang chạy, hãy vào URL 2. Đăng nhập vào bàn quản trị, sử dụng tên người dùng là system và mật khẩu là manager. 3. Trong trình đơn Console Navigation, nhấn vào Applications > Deploy New. 4. Duyệt tìm tệp tin dwr.war đã tải về của bạn (sử dụng nút Browse) và nhấn vào Install. Để trống hộp Plan. Xem Hình 10: Hình 10. Triển khai ứng dụng web thử nghiệm DWR Bây giờ, trỏ trình duyệt của bạn vào trang trước của ứng dụng thử nghiệm DWR: Bạn sẽ thấy DWR và Ajax làm việc ngay lập tức. Các trang đầu tiên mà bạn đã hiển thị là trang chào đón, như thấy trong Hình 11: Hình 11. Trang chào đón của ứng dụng DWR Nếu bị nhấp nháy, bạn có thể đã bỏ qua hoàn toàn trang chào đón như hiển thị trong Hình 11 (Hãy chú ý dấu hiệu Đang tải-Loading màu đỏ ở góc trên bên phải). Sử dụng XMLHttpRequest, các mã JavaScript nhúng đã tìm về, một cách không đồng bộ, nội dung của trang "DWR đang hoạt động đúng" thứ hai từ máy chủ và thay thế trang chào đón bằng trang này khi sử dụng DHTML. Kết quả là, bạn chỉ nhìn thấy trang thứ hai, như thấy trong Hình 12: Hình 12. Trang thử nghiệm được ứng dụng tải về không đồng bộ khi sử dụng DWR Bạn có thể muốn duyệt qua các thử nghiệm đơn vị do ứng dụng ví dụ này thực hiện. Điều này có thể giúp bạn đánh giá một số chi tiết bên trong DWR. Phần kế tiếp cho thấy làm thế nào để thêm DWR vào ứng dụng thông tin-nhân viên. Tạo ứng dụng thông tin-nhân viên mới Bạn đang sẵn sàng để nâng cấp ứng dụng thông tin nhân viên thành một phiên bản Ajax. Phần này sẽ đưa bạn đi qua các bước. Ứng dụng thông tin-nhân viên mới Ứng dụng thông tin nhân viên mới bao gồm các thành phần mã được mô tả trong Bảng 3: Bảng 3. Các thành phần của ứng dụng thông tin nhân viên mới với Ajax Thành phần Mô tả employee.html Một trang HTML có các mã JavaScript để thực hiện ứng dụng thông tin-nhân viên. Employee.java Một lớp Java phía máy chủ để truy cập các cơ sở dữ liệu DB2 Express-C 9.5 khi sử dụng JDBC. Lớp này được truy cập từ xa đối với trình duyệt phía khách khi sử dụng DWR. ShowPhoto.java Chính là servlet ShowPhoto trong ứng dụng (dựa trên JSP) đầu tiên. Nó được sử dụng để tìm kiếm thông tin về ảnh nhân viên từ cơ sở dữ liệu DB2 Express-C 9.5 và chuyển tới trình duyệt của người dùng. dwstyles.css Chính là phiếu định kiểu được sử dụng trong ứng dụng đầu tiên. Thêm DWR tới ứng dụng Để thêm DWR vào dự án dwapp, tắt Máy chủ ứng dụng và làm theo các bước sau trong Eclipse: 1. Trong tệp tin web.xml, thêm vào các dòng mã in đậm như hiển thị trong Listing 10: Listing 10. Tích hợp servlet hỗ trợ DWR vào trong ứng dụng <web-app xmlns:xsi="" xmlns="" xmlns:web="" xsi:schemaLocation= " " id="WebApp_ID" version="2.5"> dwapp index.html index.htm employee.jsp default.html default.htm default.jsp jdbc/DataSource javax.sql.DataSource Container Shareable ShowPhoto ShowPhoto com.ibm.dw.ShowPhoto DWR Servlet dwr-invoker uk.ltd.getahead.dwr.DWRServlet debug true dwr-invoker /dwr/* ShowPhoto /ShowPhoto ... 2. Trong tệp tin geronimo-web.xml, thêm phụ thuộc vào các thư viện DWR phiên bản 1.1.4 mặc định đã có trong Máy chủ ứng dụng. Thực hiện điều này bằng cách bổ sung thêm mục như hiển thị trong Listing 11: Listing 11. Trưng ra các thư viện DWR phiên bản 1.1.4 mặc định có sẵn cho ứng dụng <web-app xmlns="" xmlns:nam="" xmlns:sec="" xmlns:sys=""> default dwapp 1.0 car console.dbpool dwDatasource dwr dwr 1.1.4 ... 3. Thêm một tệp tin cấu hình DWR mới , dwr.xml, vào thư mục WebContent \ WEB-INF. Bạn sẽ tìm thấy các tệp tin web.xml và geronimo-web.xml đã ở sẵn đó. Tệp tin dwr.xml cần phải chứa các mã trong Listing 12: Listing 12. Tệp tin dwr.xml cho cấu hình DWR <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" ""> Tệp tin cấu hình dwr.xml báo cho DWR biết lớp Java nào có sẵn để thực hiện truy cập từ xa. Trong trường hợp này, nó ra lệnh trưng ra lớp com.ibm.dw.Employee như là lớp JEmployee trong mã JavaScript. Dòng chỉ rõ rằng DWR cần phải cho phép chuyển giao các đối tượng kiểu com.ibm.dw.Employee giữa máy chủ và máy khách. Tạo POJO Employee phía máy chủ Thêm một lớp Employee mới vào gói com.ibm.dw, bằng cách sử dụng trình thủ thuật New trong Eclipse như bạn đã làm với ShowPhoto.java (xem phần Hiển thị các ảnh từ các trường DB2 BLOB-Showing photographs from DB2 BLOB fields): 1. Điểm sáng WebContent. 2. Nhấn Ctrl+N. 3. Chọn Class trong trình thủ thuật New. Thêm các trường được hiển thị dưới dạng in đậm trong Listing 13 vào bộ khung sườn Employee do Eclipse tạo ra: Listing 13. Thêm các trường vào POJO Employee package com.ibm.dw; import java.util.Date; public class Employee { private String empno; private String firstnme; private String lastname; private String job; private Date hiredate; private String workdept; private String phoneno; private int salary; private int bonus; private String fullname; ... Sử dụng Eclipse tự động tạo ra các phương thức get (getters) Viết mã của các phương thức get cho các trường của đối tượng Java là một công việc thường xuyên — và vô cùng nhàm chán — trong phát triển. Eclipse thực hiện công việc này dễ dàng bằng cách cung cấp một dụng cụ tạo mã tự động. Trong trình soạn thảo Employee.java, nhấn chuột phải và chọn Source > Generate Getters and Setters. Điều này khởi động trình thủ thuật Generate Getters and Setters như hiển thị trong Hình 13: Trình thủ thuật tạo ra các phương thức get và các phương thức set của Eclipse Nhấn vào Select Getters và sau đó nhấn OK. Thao tác này tạo tự động tất cả các phương pháp get mà bạn cần cho lớp Employee. Sử dụng JDBC để tìm về các bản ghi nhân viên từ cơ sở dữ liệu Tiếp theo, thêm hàm tạo riêng tư (private constructor) được hiển thị bằng chữ in đậm trong Listing 14 vào lớp Employee. Hãy chắc chắn rằng bạn có hàm tạo công cộng (public constructor) không có đối số mặc định (cũng được hiển thị trong Listing14) đã được định nghĩa: Listing 14. Hai hàm tạo mã cho các đối tượng Employee public Employee() { } private Employee(String empno, String firstnme, String lastname, String job, Date hiredate, String workdept, String phoneno, int salary, int bonus) { this.empno = empno; this.firstnme = firstnme; this.lastname = lastname; this.job = job; this.hiredate = hiredate; this.workdept = workdept; this.phoneno = phoneno; this.salary = salary; this.bonus = bonus; this.fullname = lastname + ", " + firstnme; } Trường fullname (tên đầy đủ) được sử dụng để hiển thị các tên trong danh sách thả xuống của ứng dụng. Cuối cùng nhưng không kém quan trọng là thêm phương thức findStartsWith(), như hiển thị trong Listing15, để tìm kiếm các bản ghi nhân viên từ pool cơ sở dữ liệu jdbc/DataSource. Phương thức này trả về một mảng các nhân viên có tên phù hợp với chuỗi startText đã cho startText. Listing 15. Phương thức findStartsWith() public static Employee [] findStartsWith(String startText) { String query = "select * from employee where lastname like '" + startText + "%'"; DataSource dsource = null; Statement stmt= null; Connection conn =null; ResultSet rset = null; ArrayList result = new ArrayList(); try { InitialContext context = new InitialContext(); dsource = (DataSource)context.lookup("java:comp/env/jdbc/DataSource"); conn = dsource.getConnection(); stmt = conn.createStatement(); rset = stmt.executeQuery(query); while (rset.next()) { result.add( new Employee( rset.getString("empno"), rset.getString("firstnme"), rset.getString("lastname"), rset.getString("job"), rset.getDate("hiredate"), rset.getString("workdept"), rset.getString("phoneno"), rset.getInt("salary"), rset.getInt("bonus") ) ); } } catch(NamingException e) { // add handler or logging code here } catch(SQLException e) { // add handler or logging code here } finally { try { if (rset != null) rset.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException ex ) {} } int arraylen = result.size(); Employee [] retArray = new Employee[arraylen]; for (int i=0; i < arraylen; i++) retArray[i] = (Employee) result.get(i); return retArray; } Trước khi bạn lưu tệp tin Employee.java, nhấn Ctrl+Shift+O để thêm vào tất cả các lệnh nhập khẩu cần thiết, sử dụng đặc tính tổ chức nhập khẩu tự động của Eclipse. Lưu ý rằng mặc dù tệp tin Employee.java được viết mã bằng tay trong ví dụ này, nhưng trong một số dự án, không phải là bất bình thường khi sinh tự động mã truy nhập dữ liệu phía máy chủ này bằng cách sử dụng công nghệ Java lâu bền như JPA hoặc một trình ánh xạ đối tượng-quan hệ ví dụ như: Hibernate, Castor, hoặc JDO (xem Tài nguyên). Kiểm tra việc trưng ra từ xa lớp Employee Để kiểm tra xem lớp Employee được trưng ra từ xa một cách đúng đắn chưa khi sử dụng DWR, hãy thực hiện theo các bước sau: 1. Xây dựng và triển khai dự án cho máy chủ bằng cách nhấn chuột phải vào dwapp và chọn Run As > Run on Server. 2. Trỏ trình duyệt đến Bạn sẽ thấy DWR báo cáo rằng com.ibm.dw.Employee đã được trưng ra như là JEmployee, như thấy trong Hình 14: Hình 14. DWR xác nhận trưng ra từ xa lớp Employee 3. Nhấn vào liên kết JEmployee . DWR bây giờ tạo ra một trang có danh sách tất cả các phương thức có sẵn với JEmployee (các phương thức của Employee được trưng ra từ xa). Tìm phương thức findStartsWith() được hiển thị trong Hình 15: Hình 15. Trang được DWR tạo ra hiển thị tất cả các phương thức được trưng ra từ xa 4. Nhập chữ cái M bên trong dấu nháy kép và nhấn Execute. Thao tác này sẽ gọi phương thức trên đối tượng JavaScript JEmployee, mà đến lượt nó lại gọi phương thức phía máy chủ, sử dụng Ajax. Đối tượng Employee phía máy chủ truy vấn cơ sở dữ liệu DB2 Express-C 9.5 tìm các bản ghi nhân viên cần thiết và sau đó DWR chuyển các dữ liệu tìm được về trình duyệt một cách không đồng bộ theo định dạng JSON. Bạn sẽ thấy một hộp cảnh báo JavaScript với các dữ liệu đã tìm thấy, tương tự như Hình 16. Trong trường hợp này, ba cá thể JEmployee được trả về. Hình 16. Các bản ghi nhân viên dưới dạng các cá thể của đối tượng JEmployee JavaScript, có chứa các dữ liệu tìm thấy từ cơ sở dữ liệu Viết mã JavaScript trong employee.html Phần mã hóa duy nhất còn lại để cho bạn viết là trang web employee.html. Mã JavaScript trong trang này xử lý tất cả các tương tác với người sử dụng. Sử dụng trình thủ thuật New của Eclipse để tạo ra bộ khung sườn. Chọn Web > HTML và đặt tên cho nó là employee.html. Trong phần của trang web được tạo ra, thêm vào tiêu đề và tham chiếu đến phiếu định kiểu, như hiển thị bằng các dòng in đậm trong Listing 16: Listing 16. Thêm tiêu đề và tham chiếu đến phiếu định kiểu dW Example Employee Data - AJAX version Trong đoạn mở đầu của phần thêm vào mã JavaScript in đậm từ Listing 17: Listing 17. Thêm vào các tham chiếu để bao gồm mã thư viện JavaScript DWR <script type='text/javascript' src='/dwapp/dwr/interface/JEmployee.js'> var employees; function update() { JEmployee.findStartsWith(DWRUtil.getValue ("searchblank").toUpperCase(),updatechoice); } function updatechoice(emps) { employees = emps; DWRUtil.removeAllOptions("empselect"); DWRUtil.addOptions("empselect", emps, "empno", "fullname"); } function setinfo() { selected = DWRUtil.getText("empselect"); emplength = employees.length; for(count = 0; count < emplength; count++) { with (employees[count]) { if (fullname == selected) { DWRUtil.setValue("fullname", fullname); DWRUtil.setValue("empno", empno); DWRUtil.setValue("job", job); DWRUtil.setValue("workdept", workdept); DWRUtil.setValue("phoneno", phoneno); DWRUtil.setValue("salary", salary); DWRUtil.setValue("bonus", bonus); DWRUtil.setValue("hiredate", hiredate.getFullYear()); $("photo").src = "/dwapp/ShowPhoto?empno=" + empno; break; } } } } Các tham chiếu in đậm trong Listing17 bao gồm các thư viện mã JavaScript DWR và mã được tạo ra cần thiết cho hoạt động đúng của DWR. Phần còn lại của các hàm được sử dụng để xử lý các tương tác người dùng. Thêm mã trong Listing18 vào tệp tin employee.html. Mã này tạo ra giao diện người dùng và hiển thị thông tin-nhân viên. Listing 18. Tạo ra giao diện người dùng và hiển thị thông tin-nhân viên DB2 Employee Information    AJAX lightweight interactive version Employee number: Position: Hired: Department: Phone number: Salary:$ Bonus:$ Sau khi người dùng nhập một phần tên họ của nhân viên vào trong hộp nhập dữ liệu và gõ phím Tab ra khỏi trường này, sự kiện onblur được kích hoạt (onblur - sự kiện “thành mờ đi” của một yếu tố giao diện người sử dụng). Hàm JavaScript update() được gọi thực hiện trong trường hợp này: Hàm update() gọi phương thức JEmployee.findStartsWith() để tìm kiếm các bản ghi JEmployee từ xa. Cuộc gọi này là không đồng bộ. Nó trở về ngay lập tức, và mã lệnh chỉ rõ rằng hàm có tên là updatechoice() cần được gọi ra khi kết quả quay về từ máy chủ. Trong hàm updatechoice() mảng các đối tượng JEmployee đã trả về được gán cho biến, có phạm vi hiệu lực trong trang, tên là employees. Tiếp theo, danh sách được làm rỗng và sau đó điền đầy bằng trường fullname từ đối tượng JEmployee. Điều này được thực hiện bằng cách sử dụng mã DHTML. Các hàm DWRUtil.removeAllOptions() and DWUtil.addOptions() từ các thư viện JavaScript của DWR thực hiện việc này dễ dàng và tránh cho bạn khỏi phải viết mã đặc thù riêng cho trình duyệt. Đây là cách phần tử được điền đầy bằng tên nhân viên đã chọn một cách động như thế nào. Khi người sử dụng chọn một trong các tên nhân viên từ phần tử và sau đó thoát ra khỏi trường này, trình xử lý sự kiện onblur của phần tử được gọi thực hiện. Phần tử chỉ rõ việc này là hàm setinfo(): Phương thức setinfo() xác định mã nhận dạng ID của nhân viên được người sử dụng chọn và sử dụng mã nhận dạng ID này để đọc lướt qua mảng các nhân viên, có phạm vi hiệu lực trong trang, tìm cá thể JEmployee được chọn. Sau đó cá thể này sẽ được dùng để thiết lập giá trị của các phần tử thông tin, sử dụng DHTML. Một lần nữa, phương thức DWRUtil.setValue() của thư viện JavaScript DWR làm cho việc này đơn giản và độc lập với các phong cách riêng của từng trình duyệt. Thiết lập trang chào đón của các ứng dụng web Trang chào đón mặc định trước đây đã được thiết lập tới employee.jsp. Bạn cần phải thay đổi nó thành employee.html. Thực hiện thay đổi với web.xml được tô đậm trong Listing 19: Listing 19. Thay đổi trang chào đón mặc định employee.html index.htm employee.jsp default.html default.htm default.jsp Thử nghiệm ứng dụng thông tin nhân viên dựa trên Ajax Nhấn chuột phải vào dwapp trong khung nhìn Navigator và chọn Run As > Run on Server. Thao tác này triển khai ứng dụng lên Máy chủ ứng dụng và khởi động nó. Bạn sẽ thấy ứng dụng mới, không có dữ liệu nhân viên được lựa chọn, như được hiển thị trong Hình 17: Hình 17. Khởi động ứng dụng thông tin-nhân viên mới Nhập a vào trong hộp soạn thảo và ấn Tab. Trong giây lát, bạn sẽ thấy danh sách thả xuống được điền tên ADAMSON, BRUCE. Gõ phím Tab ra khỏi danh sách chọn và thông tin của Bruce Adamson được tự động tìm về. Hãy thử gõ w vào trong hộp soạn thảo và sau đó ấn tab. Lúc này, WALKER, JAMES được hiển thị trong danh sách thả xuống. Gõ phím Tab ra khỏi danh sách chọn và thông tin về James Walker được tìm về tự động (xem Hình 18). Bạn cũng có thể muốn thử phím l, là tùy chọn để điền một danh sách có nhiều hơn một lựa chọn. Hình 18. Ứng dụng Ajax với thông tin nhân viên được tìm về không đồng bộ Hãy chú ý giao diện Ajax này tương tác hơn nhiều và cảm nhận “tự nhiên” hơn nhiều, đối lập với giao diện người dùng kiểu một trang mỗi lần mà ứng dụng đầu tiên trình bày. Phong cách dùng giao diện người sử dụng có khả năng đáp ứng cao, cập nhật động này thực hiện được nhờ có các máy chủ tầng sau hùng mạnh và các kết nối mạng tốc độ cao. Xu hướng này — thường được gọi là Web 2.0 — là làn sóng tương lai trong ứng dụng Web. Tóm tắt Trong hướng dẫn này, bạn:  Đã tạo ra một ứng dụng thông tin - nhân viên, sử dụng công nghệ JSP và servlet truyền thống  Đã viết mã cho dự án trong Eclipse và triển khai nó trên Máy chủ ứng dụng để thử nghiệm  Đã tạo ra một servlet để gửi về các ảnh của nhân viên tìm trong các trường cơ sở dữ liệu BLOB của DB2 Express-C 9.5  Đã tải xuống và thử nghiệm DWR để phát triển Ajax trong Eclipse  Đã chuyển một ứng dụng sang thiết kế Ajax nhẹ khi sử dụng thư viện mã JavaScript của DWR  Đã viết mã cho POJO Employee để truy cập từ xa qua DWR  Đã viết mã và thử nghiệm ứng dụng Ajax mới trong Eclipse và đã triển khai và thử nghiệm nó khi sử dụng Máy chủ ứng dụng Eclipse, Máy chủ ứng dụng và DB2 Express-C 9.5 không hề hạn chế bạn chỉ phát triển Java EE. Trong thực tế, bộ Khởi đầu các ứng dụng Java của bạn là một nền tảng lý tưởng để khai thác công nghệ giao diện - người dùng tương tác nhẹ, thay thế. Bạn có thể thử nghiệm và gỡ lỗi bất kỳ sản phẩm ứng dụng nào do bạn phát triển trong quá trình khai thác môi trường quen thuộc của IDE Eclipse, và bạn có thể triển khai chúng để sử dụng thực sự trên tổ hợp DB2 Express-C 9.5 và Máy chủ ứng dụng hùng mạnh và đã qua kiểm chứng .