AJAX - tương lai cho ứng dụng Web (2)
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:
- Anh-Việt (65.000 từ)
- Việt-Anh (30.000 từ)
- Anh-Anh (Webster's Unabridged Dictionary 182.696 từ)
- Đồng-Nghĩa (khoảng 40.000 từ)
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 'key%'
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)
|
