基于Ａｊａｘ技術(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頁面講授時(shí)，可以對自己要講解的內(nèi)容加標(biāo)顯示，這樣可以讓學(xué)生立刻跟上老師講授的內(nèi)容。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動態(tài)生成下劃線加標(biāo)顯示增加了學(xué)生網(wǎng)絡(luò)閱讀的樂趣，另一方面可以直接通過internet訪問課程網(wǎng)頁，并將自己對某一處的疑問直接提交給老師。

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

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

一、 引言

當(dāng)前，在信息行業(yè)的企業(yè)所思考的是web2.0技術(shù)所帶來的商業(yè)模式。而對研究教育信息化的人來說，web2.0技術(shù)也沖擊著教育信息傳統(tǒng)模式。從概念上說，Web2.0代表著互聯(lián)網(wǎng)從由靜態(tài)網(wǎng)頁集合向提供軟件服務(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)行動態(tài)顯示和交互；使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；使用JavaScript綁定一切。

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

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

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

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

雖然樣式表CSS為網(wǎng)頁設(shè)計(jì)者們提供了豐富而靈活的頁面元素表現(xiàn)形式的控制手段。但是關(guān)于對于下劃線卻比較單調(diào)，缺少生氣和靈動。下面給出我們的實(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的一部分展示出來，STYLE元素的內(nèi)容要包含一個(gè)SGML注解(＜!-- comment --＞)在里面（第2行、第8行）。第3行為隱藏默認(rèn)的下劃線，第4行為鏈接元素設(shè)置下劃線圖形，自定義的下劃線圖形是underline.gif。第5行為下劃線只在水平方向重復(fù)出現(xiàn)。第6行為讓底部空白等于下劃線圖形的高度。第6行為防止鏈接文字折行。

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

使用CSS技術(shù)，可以生成WEB頁面中給定元素的下劃線樣式，但這是事先規(guī)定好的。總體上說，頁面是靜態(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)選定一段文字后，，就會發(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)格，利用連接，則對應(yīng)的pasteHTML()方法應(yīng)用為：

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

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

這樣，教師可以對自己要講解的內(nèi)容加標(biāo)顯示，以便學(xué)生立刻跟上老師講授的內(nèi)容，而不用在掃描網(wǎng)頁內(nèi)容上浪費(fèi)時(shí)間。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動態(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)異步化。這里不是所有的用戶請求都提交給服務(wù)器，像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請求。

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

一個(gè)Ajax交互從一個(gè)稱為XMLHttpRequest的JavaScript對象開始。對于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è)客戶端腳本來執(zhí)行HTTP請求，并且將會解析一個(gè)XML格式的服務(wù)器響應(yīng)。在定義了如何處理響應(yīng)后，就可以使用HTTP方法（GET或POST）來處理請求，并將目標(biāo)URL設(shè)置到XMLHttpRequest對象上。如下所示：

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

xmlhttp_request.send(1);

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

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

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

（二） 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)對應(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頁面講授時(shí)，可以對自己要講解的內(nèi)容加標(biāo)顯示，這樣可以讓學(xué)生立刻跟上老師講授的內(nèi)容，而不用在掃描網(wǎng)頁內(nèi)容上浪費(fèi)時(shí)間。同時(shí)學(xué)生在課后復(fù)習(xí)時(shí)，一方面通過動態(tài)生成下劃線加標(biāo)顯示增加了學(xué)生網(wǎng)絡(luò)閱讀的樂趣，另一方面可以直接通過internet訪問課程網(wǎng)頁，并將自己對某一處的疑問直接提交給老師。

參考文獻(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