Skip to content Skip to navigation

Connexions

You are here: Home » Content » Ứng dụng AJAX xây dựng module Từ điển trực tuyến

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.
  • VOCW

    This module is included inLens: Vietnam OpenCourseWare's Lens
    By: Vietnam OpenCourseWareAs a part of collections: "Giáo trình về Ajax và Wap", "Giáo trình tổng quan về Ajax và Wap"

    Click the "VOCW" link to see all content affiliated with them.

Recently Viewed

This feature requires Javascript to be enabled.
 

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

Module by: Đặng Việt Phương, Do Ngoc Minh. E-mail the authors

Summary: Sau khi nắm được nguyên lý của AJAX, bạn đọc có thể sử dụng một công cụ lập trình web bất kỳ để xây dựng các ứng dụng tiện ích như tra cứu từ điển (giống google suggest), tự động sao lưu văn bản đang soạn (auto save), tự động sao lưu các giá trị form đang nhập...

Mô tả ứng dụng

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

Hình 1: vidu
Hình 1 (graphics1.png)

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)

Hình 2: hinh minh hoa 2
Hình 2 (graphics2.png)

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

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

<!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>&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);"> </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>

Tệp ajax.js

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 ajax_search.js

//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 search_suggest.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Module tu dien</title>

</head>

<%

//Writen by Minhdn

//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 Search_mearning.asp

<%@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

%>

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

Content actions

Download module as:

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks