Wikiversity

Ứng dụng AJAX xây dựng module Từ điển trực tuyến

Bài viết được Nguyễn Kim Kha viết lại từ bài viết của Đặng Việt Phương (giấy phép CC-BY)

Xem thêm các bài liên quan tại Các công nghệ AJAX

Mô tả ứng dụng

edit

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.

Mã nguồn minh họa

edit

Đ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.

Tập tin index.html

edit 
<!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>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <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>&nbsp;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>&nbsp;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>&nbsp;</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);"><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>

Tập tin style.css

edit 
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;
    float:left
    text-align: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
}

Tập tin ajax.js

edit 
function createRequestObject()
{
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer") {
        // on IE, we have to use ActiveX
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        // on every other browser, we can directly create a new XMLHttpRequest object
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();
// this function should be called for user input
// the response in this case is formatted as follows:
// object|text
// where object is the id of the HTML element we are going to update
// and text is what it will be updated to
// this could obviously work a lot better with some XML
function handleResponse()
{
    if(http.readyState == 4) {
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1)) {
            update = response.split("|");
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}
// this function should be called for user input
// it opens up the usercheck.asp page with a querystring of 'action'
function sndUserCheck(action)
{
    http.open("get", "searchMeaning.asp?formWord=" + action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

Tập tin ajax_search.js

edit 
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about formWorde to upgrade don't you think?");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('formWord').value);
        searchReq.open("GET", 'searchSuggest.asp?formWord=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("<br>");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string. This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
            suggest += 'onmouseout="javascript:suggestOut(this);" ';
            suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
            suggest += 'class="suggest_link">' + str[i] + '</div>';
            ss.innerHTML += suggest;
        }
    }
}

//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
    document.getElementById('formWord').value = value;
    document.getElementById('search_suggest').innerHTML = '';
}

Tập tin search_suggest.asp

edit 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Module tu dien</title>
</head>
<%
    //Lay bien search bang request, sau do search trong CSDL
    //nhung dong nao co title like bien search thi lay ra
%>
<!--#include file="connection.asp"-->
<%
    //Make sure that a value was sent.
    formWord=request("formWord")
    //Get every page title for the site.
    if len(formWord)>=1 then
        str = "SELECT * FROM dictionary WHERE word like '"&formWord&"%' ORDER BY word"
        rs.open str,conn
        do until rs.eof
%>
<%=rs("word")%><br>
<%
            rs.movenext
        loop
        rs.close
        set rs=nothing
    end if
%>

Tập tin search_mearning.asp

edit 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
dim strConn, dbConn, RS 
set dbconn= server.createObject("ADODB.connection")
dbConn.Open "PROVIDER=MSDASQL;DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.Mappath("dictionary.mdb") 
set rs = server.createobject("ADODB.recordset")
'query the database
str="SELECT * FROM dictionary WHERE word = '" & 
request.querystring("formWord")&"'"
set RS = dbConn.execute(str)
'is this name taken or not
if not RS.eof then
response.write "TakenOrNot|<b>"&request.querystring("formWord") &": </b><br>"&rs("meaning")
else
response.write "TakenOrNot|Thong bao: " & "Khong co tu nay"
'end if
end if
%>

Kết luận

edit

Tương tự như vậy, các ứng dụng kiểm tra tên đăng nhập (người dùng chọn tên đăng nhập và check xem tên đó đã có chưa), tự động sao lưu văn bản đang soạn thảo (auto save), tự động sao lưu nội dung làm việc của người dùng (ví dụ điền form) cũng được thực hiện thông qua cơ chế này.

Chúc các bạn thành công

Retrieved from "https://beta.wikiversity.org/w/index.php?title=Ứng_dụng_AJAX_xây_dựng_module_Từ_điển_trực_tuyến&oldid=323279"