基于Ａｊａｘ技術(shù)的網(wǎng)絡(luò)教學(xué)環(huán)境的開發(fā)與應(yīng)用研究

【摘要】本文研究Ajax技術(shù)中的三個(gè)主要部分即CSS技術(shù)、DOM技術(shù)及Javascript代碼在網(wǎng)絡(luò)教學(xué)環(huán)境中的應(yīng)用并給出的實(shí)例。教師在使用WEB頁(yè)面講授時(shí)，可以對(duì)自己要講解的內(nèi)容加標(biāo)顯示，這樣可以讓學(xué)生立刻跟上老師講授的內(nèi)容。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動(dòng)態(tài)生成下劃線加標(biāo)顯示增加了學(xué)生網(wǎng)絡(luò)閱讀的樂趣，另一方面可以直接通過internet訪問課程網(wǎng)頁(yè)，并將自己對(duì)某一處的疑問直接提交給老師。

【關(guān)鍵詞】Ajax技術(shù)，批注功能，加標(biāo)顯示

【中圖分類號(hào)】G434 【文獻(xiàn)標(biāo)識(shí)碼】B 【論文編號(hào)】1009—8097（2007）08—0061—03

一、 引言

當(dāng)前，在信息行業(yè)的企業(yè)所思考的是web2.0技術(shù)所帶來(lái)的商業(yè)模式。而對(duì)研究教育信息化的人來(lái)說(shuō)，web2.0技術(shù)也沖擊著教育信息傳統(tǒng)模式。從概念上說(shuō)，Web2.0代表著互聯(lián)網(wǎng)從由靜態(tài)網(wǎng)頁(yè)集合向提供軟件服務(wù)（特別是那些支持自助出版、參與和協(xié)作的服務(wù)）的載體演進(jìn)的概念。

AJAX是WEB2.0的核心之一。Adaptive Path公司的Jesse James Garrett[1]這樣定義Ajax：Ajax不是一種技術(shù)。實(shí)際上，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：基于CSS標(biāo)準(zhǔn)的表示；使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；使用JavaScript綁定一切。

AJAX能夠滿足在現(xiàn)有的Web網(wǎng)站上增添交互性等。這種構(gòu)造更好的Web的能力也必將為網(wǎng)絡(luò)教學(xué)環(huán)境帶來(lái)巨大的沖擊。Ajax使WEB中的界面與應(yīng)用分離，而在以前兩者是沒有清晰的界限的，數(shù)據(jù)與呈現(xiàn)分離的分離，有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。

本文首先介紹如何使用CSS技術(shù)生成WEB頁(yè)面中給定元素的下劃線樣式，在此基礎(chǔ)上通過一個(gè)Javascript代碼實(shí)現(xiàn)動(dòng)態(tài)生成下劃線加標(biāo)顯示。這樣就相當(dāng)于給了教師一個(gè)虛擬的紅外鼠標(biāo)，而且功能上會(huì)更強(qiáng)。第三節(jié)介紹AJAX執(zhí)行原理，在此基礎(chǔ)上介紹通過XMLHttpRequest對(duì)象在無(wú)刷新更新頁(yè)面下提交給教師的實(shí)現(xiàn)方法，這里提交的內(nèi)容包含加標(biāo)顯示的內(nèi)容以及學(xué)生自己的疑難問題。最后給出我們實(shí)現(xiàn)的一個(gè)例子。

二、 由自定義的下劃線樣式到動(dòng)態(tài)生成下劃線加標(biāo)顯示

（一） 使用樣式表自定義下劃線樣式

雖然樣式表CSS為網(wǎng)頁(yè)設(shè)計(jì)者們提供了豐富而靈活的頁(yè)面元素表現(xiàn)形式的控制手段。但是關(guān)于對(duì)于下劃線卻比較單調(diào)，缺少生氣和靈動(dòng)。下面給出我們的實(shí)現(xiàn)，即在在文檔的HEAD部分嵌入一個(gè)樣式表。這里第一行用TYPE屬性用于指定媒體類型。

1 ＜STYLE TYPE=\"text/css\" MEDIA=screen＞

2 ＜!--

3 a#001 {text-decoration: none;

4background: url(underline.gif)

5repeat-x 100% 100%;

6padding-bottom: 4px;

7white-space: nowrap;}

8--＞

9 ＜/STYLE＞

為了避免在舊版本的瀏覽器將樣式表當(dāng)作BODY的一部分展示出來(lái)，STYLE元素的內(nèi)容要包含一個(gè)SGML注解(＜!-- comment --＞)在里面（第2行、第8行）。第3行為隱藏默認(rèn)的下劃線，第4行為鏈接元素設(shè)置下劃線圖形，自定義的下劃線圖形是underline.gif。第5行為下劃線只在水平方向重復(fù)出現(xiàn)。第6行為讓底部空白等于下劃線圖形的高度。第6行為防止鏈接文字折行。

（二） 動(dòng)態(tài)生成下劃線加標(biāo)顯示

使用CSS技術(shù)，可以生成WEB頁(yè)面中給定元素的下劃線樣式，但這是事先規(guī)定好的。總體上說(shuō)，頁(yè)面是靜態(tài)的。下面給出純粹是客戶端實(shí)現(xiàn)的“劃線”功能Javascript代碼。

＜script language=Javascript ＞

function MarkIt(){

var strSelect;

var objSelect;

objSelect=document.selection.createRange();

strSelect=objSelect.text;

objSelect.pasteHTML(\"＜font style='FONT-WEIGHT: bold; COLOR: red;BORDER-BOTTOM: red 2px dotted'＞\" + strSelect + \"＜/font＞\");

window.status=\"Selected:\" + strSelect;

}

document.body.onmouseup=MarkIt;

＜/script＞

當(dāng)選定一段文字后，，就會(huì)發(fā)現(xiàn)被選中的文字下面有一段紅色下劃線了。代碼主要是一個(gè)pasteHTML()方法，該方法直接插入HTML代碼。當(dāng)在指定的文字區(qū)域內(nèi)時(shí)則替換該區(qū)域內(nèi)的文本或者HTML，該方法必須應(yīng)用于一個(gè) createTextRange() 或者 document.selection.createRange() 創(chuàng)建的區(qū)域上。

結(jié)合在上面定義的各種CSS風(fēng)格，利用連接，則對(duì)應(yīng)的pasteHTML()方法應(yīng)用為：

objSelect.pasteHTML(\"＜a id='001' href='#'＞\" + strSelect + \"＜/a＞\");

在我們的示例文檔[2]中，原文檔頁(yè)面很單一。利用CSS，我們對(duì)標(biāo)題進(jìn)行修改，生成一個(gè)花朵圖案，并引用如＜a href=\"#\" id=\"flowers\"＞小石潭記＜/a＞，則出現(xiàn)的花朵下劃線，見圖一；。

這樣，教師可以對(duì)自己要講解的內(nèi)容加標(biāo)顯示，以便學(xué)生立刻跟上老師講授的內(nèi)容，而不用在掃描網(wǎng)頁(yè)內(nèi)容上浪費(fèi)時(shí)間。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動(dòng)態(tài)生成下劃線加標(biāo)顯示增加了學(xué)生網(wǎng)絡(luò)閱讀的樂趣。

三、 基于Ajax技術(shù)的學(xué)生疑問提交的實(shí)現(xiàn)

（一） AJAX框架介紹

AJAX是Asynchronous JavaScript and XML 的縮寫。它的工作原理是相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這里不是所有的用戶請(qǐng)求都提交給服務(wù)器，像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。

Ajax的一個(gè)最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無(wú)刷新更新頁(yè)面)，這一特點(diǎn)主要得益于XMLHTTP組件XMLHTTPRequest對(duì)象。這樣就可以向再發(fā)桌面應(yīng)用程序只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來(lái)做，這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等候時(shí)間。

一個(gè)Ajax交互從一個(gè)稱為XMLHttpRequest的JavaScript對(duì)象開始。對(duì)于Internet Explorer瀏覽器，創(chuàng)建XMLHttpRequest實(shí)例的 方法如下：

xmlhttp_request = new ActiveXObject(\"Msxml2.XMLHTTP.3.0\");

xmlhttp_request = new ActiveXObject(\"Msxml2.XMLHTTP\");

xmlhttp_request = new ActiveXObject(\"Microsoft.XMLHTTP\");

如同名字所暗示的，它允許一個(gè)客戶端腳本來(lái)執(zhí)行HTTP請(qǐng)求，并且將會(huì)解析一個(gè)XML格式的服務(wù)器響應(yīng)。在定義了如何處理響應(yīng)后，就可以使用HTTP方法（GET或POST）來(lái)處理請(qǐng)求，并將目標(biāo)URL設(shè)置到XMLHttpRequest對(duì)象上。如下所示：

xmlhttp_request.open('GET'， URL， true);

xmlhttp_request.send(1);

當(dāng)你發(fā)送HTTP請(qǐng)求，你不希望瀏覽器掛起并等待服務(wù)器的響應(yīng)，取而代之的是，你希望通過頁(yè)面繼續(xù)響應(yīng)用戶的界面交互，并在服務(wù)器響應(yīng)真正到達(dá)后處理它們。要完成它，你可以向XMLHttpRequest注冊(cè)一個(gè)回調(diào)函數(shù)，并異步地派發(fā)XMLHttpRequest請(qǐng)求?？刂茩?quán)馬上就被返回到瀏覽器，當(dāng)服務(wù)器響應(yīng)到達(dá)時(shí)，回調(diào)函數(shù)將會(huì)被調(diào)用。

在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范例，用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。在舊的交互方式中，由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTHL頁(yè)到客戶端，每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí)，客戶都只能空閑等待，并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù)，都要返回一個(gè)完整的HTML頁(yè)，而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。

Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來(lái)。借助于Ajax，可以在用戶單擊按鈕時(shí)，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢數(shù)據(jù)庫(kù)。當(dāng)請(qǐng)求返回時(shí)，就可以使用JavaScript和CSS來(lái)相應(yīng)地更新UI，而不是刷新整個(gè)頁(yè)面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來(lái)是即時(shí)響應(yīng)的。用戶從感覺上幾乎所有的操作都會(huì)很快響應(yīng)沒有頁(yè)面重載（白屏）的等待。

（二） AJAX在網(wǎng)絡(luò)教學(xué)中的實(shí)例

這里構(gòu)造一個(gè)XML文件，它組織一些節(jié)點(diǎn)和子節(jié)點(diǎn)（或者，元素和子元素）。在我們例子中，其內(nèi)容為：

＜?xml version=\"1.0\" encoding=\"UTF-8\"?＞

＜data＞

＜question＞ [聞水聲]聽覺＜/ question ＞

＜question ＞[全石]一整塊石頭＜/ question ＞

＜/data＞

在上面，我們有這個(gè)XML聲明（標(biāo)明這個(gè)文檔是一個(gè)XML1.0文檔，使用UTF-8編碼），一個(gè)根元素（）將下面所有的元素組合在一起，然后一個(gè)節(jié)點(diǎn)對(duì)應(yīng)一個(gè)學(xué)生問題。

這里AJAX是采用sajax實(shí)現(xiàn)的，也可以采用xajax。寫發(fā)送和獲取數(shù)據(jù)的代碼為：

function record($text){ //寫入到test.xml文件

$doc=new DomDocument();

$doc->load(\"test1.xml\");

$objRefNode=$doc->getElementsByTagName(\"value\")->item(0);

$objNewNode= $doc->createTextNode($text);

$doc->insertBefore(objNewNode， objRefNode);

$doc->save(\"test1.xml\");

}

具體實(shí)現(xiàn)見圖1。

四、結(jié)論

Ajax技術(shù)是一種非常良好的Web開發(fā)技術(shù)。通過適當(dāng)?shù)腁jax應(yīng)用達(dá)到更好的用戶體驗(yàn)。本文研究Ajax技術(shù)中的三個(gè)主要部分即CSS技術(shù)、DOM技術(shù)及Javascript代碼在網(wǎng)絡(luò)教學(xué)環(huán)境中的應(yīng)用。給出的實(shí)例是帶加標(biāo)顯示的批注功能的實(shí)現(xiàn)。教師在使用WEB頁(yè)面講授時(shí)，可以對(duì)自己要講解的內(nèi)容加標(biāo)顯示，這樣可以讓學(xué)生立刻跟上老師講授的內(nèi)容，而不用在掃描網(wǎng)頁(yè)內(nèi)容上浪費(fèi)時(shí)間。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動(dòng)態(tài)生成下劃線加標(biāo)顯示增加了學(xué)生網(wǎng)絡(luò)閱讀的樂趣，另一方面可以直接通過internet訪問課程網(wǎng)頁(yè)，并將自己對(duì)某一處的疑問直接提交給老師。

參考文獻(xiàn)

[1]Jesse James Garrett，Ajax: A New Approach to Web Applications [EB/OL]， http://www.adaptivepath.com/publications/essays/archives/000385.php

[2]柳宗元，小石潭記[EB/OL] http://www.cnread.net/cnread1/ dwx/l/liuzongyuan/000/001.htm