(Post 18/11/2005) Trong bài viết trước đã giới thiệu cho bạn một cái nhìn tổng quát về AJAX, trong bài viết này sẽ tiếp tục giới thiệu về AJAX thông qua một ví dụ cụ thể: từ điển Ajax...

Các bộ từ điển bao gồm:

Tất cả đều là Unicode. Để cho ứng dụng nhẹ nhàng và nhanh như tên gọi của nó (Fast Dictionary) tôi không tích hợp bộ gõ Unicode vào trang Web, nên khi tra từ điển Việt-Anh, bạn phải dùng các bộ gõ như Unikey/Vietkey.

Khác với các cuốn từ điển online trước đây, ở cuốn từ điển AJAX này, ngay khi bạn gõ vào một từ lập tức từ này được tra trong từ điển và hiện ra nghĩa gần như đồng thời. Việc chuyển từ bộ từ điển này sang từ điển khác rất dễ dàng và đặc biệt ngay khi chuyển đổi từ bạn vừa gõ vào sẽ được tra trong từ điển mới. Xin xem một vài screenshots khi tra từ "song " với các từ điển khác nhau.

Từ điển Anh-Việt:

Từ điển Việt-Anh:

Từ điển Anh-Anh:

Từ điển Đồng Nghĩa:

Kỹ Thuật

Kỹ thuật ở đây thật giản dị như chính AJAX! Khi bạn gõ từ cần tra vào sự kiện "onkeyup" được "bắt" và kích họat hàm javascript "searchWord". Đây là một hàm AJAX, gửi từ cần tra tới máy chủ và nhận kết quả rồi gán vào DIV "searchResult".

<input id="searchInput" size=65 type="text"
onkeyup=searchWord(this.value)></input>

function searchWord(key) {
var url = "servlet/EnViDictRender?k=" + key;
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
}
else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.send();
}
}
}

Việc gửi request và hiển thị kết quả bằng Ajax như thế nào xin các bạn tham khảo thêm ở bài viết AJAX - tương lai của ứng dụng Web (phần 1)!

Phía Server-side, khi nhận được request truy vấn bạn chỉ cần lục trong CSDL từ điển với câu SQL có dạng:

SELECT TOP 10 * FROM dictionary WHERE WORD LIKE &apos;key%&apos;

Câu SQL sẽ lấy 10 từ giống với từ cần tra nhất trong từ điển. Việc của bạn là format kết quả thành dạng HTML và trả lại cho client.

Khó Khăn và Kinh Nghiệm

Kinh nghiệm thú vị nhất khi làm cuốn từ điển này là tìm từ trong từ điển "Việt-Anh". Điều may mắn duy nhất đó là cuốn từ điển này dùng 100% Unicode nên có vẻ như là khi gửi request đi Java sẽ đọc ngay được chuỗi tiếng Việt (máy chủ của tôi dùng Java 1.5 nên hỗ trợ UTF-8 rất tốt). Nhưng mọi chuyện không đơn giản như vậy, khi xử lý chuỗi request kiểu thế này:

String key = (String)request.getParameter("k");

thì từ "Việt Nam" biến thành "Vi?t Nam". Thì ra các request đều được biến thành dạng "ISO-8859-1" chuẩn và để có được tiếng Việt Unicode ta phải convert lại:

String key = new String(request.getParameter("k").
getBytes("ISO8859_1"), "UTF8");

Một vấn đề nữa nảy sinh là khi dùng Firefox/Opera thì rất tốt, nhưng khi chuyển sang Internet Explorer thì hiện tượng "Vi?t Nam" lại xuất hiện.

Hóa ra nếu dùng chuỗi Unicode với "GET" trong IE thì không được , bạn cần dùng "POST". Tóm lại khi truy vấn từ điến "Việt-Anh" thì hàm "searchWord()" sẽ có dạng:

function searchWordVE(key) {
var url = "servlet/ViEnDictRender";
var pars = "k=" + key;
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("POST", url);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(pars);
} catch (e) {
alert(e);
}
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange;
req.open("POST", url);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(pars);
}
}
}

Hy vọng các kinh nghiệm này sẽ giúp chút ít cho các bạn trong các dự án khác liên quan đến tiếng Việt Unicode.

Kết Quả

Chúng ta có một cuốn từ điển "FAST and COOL!", bạn có thể dùng ở đây

http://myjavaserver.com/~fastdict/

Tôi nghĩ ứng dụng này bọc lộ sự đơn giản và "vẻ đẹp" của AJAX. Không phải cái gì tốt cũng phức tạp phải không các bạn?

(theo JavaVietnam Organization)