| << Chapter < Page | Chapter >> Page > |
Dưới đây là màn hình module phần mềm từ điển trực tuyến sử dụng công nghệ AJAX Lien ket
Người dùng gõ vào một từ cần tra cứu bất kỳ, sau mỗi ký tự được nhập vào ô tra cứu, danh sách các từ trong CSDL từ điển có các ký tự tương ứng ngay lập tức hiện ra trong một danh sách đổ xuống, giúp người dùng dễ dàng nhập liệu và lựa chọn (giống cách làm việc của Google Suggest)
Sau khi có từ cần tra cứu, người dùng nhấn ok, nghĩa của từ đó ngay lập tức hiện ra phía dưới (không cần reload lại trang)
Phía người dùng chỉ biết đến 1 trang duy nhất là index.html. Hậu trường của ứng dụng là cơ chế Ajax được thực hiện trong các file javascript included và các file asp hỗ trợ truy xuất CSDL qua các tham số gửi theo đường XMLHTTPRequest từ file ajax.js và ajax_search.js.
Đoạn code minh họa đơn giản dưới đây (viết trên ASP và CSDL Access) sẽ giúp bạn hiểu rõ hơn cơ chế này.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
<head>
<style type="text/css" media="screen">
body {
font: 11px arial;}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;}
label {
width:4em;
folat:left
text-allign:right;
margin-right:0.5em;
display:block;}
.submit input{
margin-left:4.5em;}
fieldset{
boder:1px solid #781351;
width:20em;}
Legend {
color:#fff;
background:#ffa20c;
border:1px solid #781351;
padding:2px 6px}
</style>
<script language="JavaScript" type="text/javascript"
src="ajax_search.js"></script>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<fieldset><legend>Từ điển thuật ngữ Tin học</legend>
<p>Tính năng:<br> 1. Tự động gợi ý các từ có trong từ điển tương ứng với chữ cái gõ vào<br> 2. Hiển thị nhanh chóng nghĩa của từ trong ô mà không cần reload lại cả trang</p>
<p>Mời bạn nhập thuật ngữ tin học cần tra cứu trong ô dưới đây:<br> </p>
</fieldset>
<form name=frmSearch id="frmSearch" method=get>
<input type="text" id="formWord" name="formWord" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
<input type="button" value="OK"
onclick="sndUserCheck(document.frmSearch.formWord.value);"></td><br>
<div id="search_suggest"></div>
</form>
<p></p>
<fieldset style="width: 220; height: 39">
<legend>Nghĩa từ</legend>
<div id="TakenOrNot"></div>
</fieldset>
</body>
</html>
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer") {
Notification Switch
Would you like to follow the 'Giáo trình tổng quan về ajax và wap' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|