探究XML的項(xiàng)目式教學(xué) 創(chuàng)建一個(gè)在線詞典

萬(wàn)早德

摘要：JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言，這門(mén)語(yǔ)言可用于 HTML 和 web，是中職學(xué)校計(jì)算機(jī)專業(yè)一門(mén)非常重要的專業(yè)課程，在上完靜態(tài)網(wǎng)頁(yè)課程后，學(xué)校就會(huì)開(kāi)設(shè)JavaScript課程，為后面的PHP站點(diǎn)開(kāi)發(fā)和.net開(kāi)發(fā)等課程做好準(zhǔn)備。

XML是JavaScript課程非常重要的一章，它的應(yīng)用性很強(qiáng)，在很多網(wǎng)站使用XML文檔來(lái)做配置文件，或者簡(jiǎn)化數(shù)據(jù)共享（如獲取城市天氣信息等），或者當(dāng)作小型數(shù)據(jù)庫(kù)等。那么如何征對(duì)XML所要求掌握的知識(shí)點(diǎn)，如何進(jìn)行高質(zhì)量教學(xué)，特地設(shè)計(jì)一個(gè)把XML文檔當(dāng)作小型數(shù)據(jù)庫(kù)的在線詞典，采用項(xiàng)目式教學(xué)，和大家一起分享。

關(guān)鍵詞：中職教育;JavaScript;項(xiàng)目式教學(xué);XML編程;Xpath

中圖分類號(hào)：G64 ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）25-0149-02

基于 XML的在線詞典，操作界面如圖1，采用B/S模式，充分利用XML文檔標(biāo)簽的嚴(yán)謹(jǐn)性，把數(shù)據(jù)庫(kù)表的所有英文四級(jí)詞匯含例句，保存到XML文檔中，再利用Xpath這一利器，快速獲取XML文檔所需的節(jié)點(diǎn)對(duì)象，在多達(dá)10000多條記錄中，能迅速查詢所要的內(nèi)容，效果良好，通過(guò)這樣項(xiàng)目式教學(xué)，既能大大提高學(xué)生學(xué)習(xí)興趣，又能達(dá)到良好的教學(xué)目的。

1 創(chuàng)建好相關(guān)數(shù)據(jù)庫(kù)、數(shù)據(jù)庫(kù)表

為實(shí)現(xiàn)在線詞典的功能，應(yīng)在Mysql中設(shè)計(jì)一個(gè)數(shù)據(jù)庫(kù)（js），其中包含1張數(shù)據(jù)庫(kù)表（level6），該表所含的字段（id，word_name，，word_meaning，word_example）。

在mysql的命令窗口需要完成下面的操作：

create database js;//創(chuàng)建一個(gè)js數(shù)據(jù)庫(kù);

接著創(chuàng)建一個(gè)level6數(shù)據(jù)庫(kù)表;

source D：＼english.sql ;//將好的10000多條詞匯記錄插入到level6表中，從而完成了數(shù)據(jù)準(zhǔn)備工作。

2 把數(shù)據(jù)庫(kù)表的詞匯導(dǎo)入XML文檔

2.1 新建一個(gè)XML文檔（dict.xml）

文檔的內(nèi)容：

<？xml version="1.0" encoding="utf-8"？>

2.2 通過(guò)數(shù)據(jù)庫(kù)操作，把數(shù)據(jù)庫(kù)表的詞匯導(dǎo)入dict.xml文檔

其核心代碼：

$xml=new DOMDocument（'1.0'，'utf-8'）;

$xml->load（'./dict.xml'）;

$dict=$xml->getElementsByTagName（'dict'）->item（0）;

$conn=mysql_connect（'localhost'，'root'，'123'）;

數(shù)據(jù)導(dǎo)入后，在瀏覽器中運(yùn)行dict.xml，顯示效果如下圖2：

3 通過(guò)XML的DOM操作實(shí)現(xiàn)單詞查詢功能

用戶往往就是利用XML文檔的嚴(yán)格標(biāo)簽，來(lái)描述所用到的信息，所以在得到一個(gè)XML文檔之后按照XML中的元素獲取對(duì)應(yīng)的信息就是XML的解析，下面我們采用DOM方式來(lái)解析XML文檔。

3.1 先創(chuàng)建一個(gè)查詢的表單

表單的內(nèi)容：

3.2 完成數(shù)據(jù)解析

其核心代碼：

echo $word，'：'，'

';

echo "[意思]： "，$v->nextSibling->nodeValue，'

';

echo "[例句]： "，$v->nextSibling->nextSibling->nodeValue，'

';

我們?cè)谶\(yùn)行過(guò)程中，發(fā)現(xiàn)位于文檔前面的詞匯很快就能得到查找的內(nèi)容，但是運(yùn)行后面的詞匯就會(huì)出現(xiàn)：“Fatal error： Maximum execution time of 30 seconds exceeded in localhost/dict/index.php on line 42”，這個(gè)錯(cuò)誤是說(shuō)，Php執(zhí)行時(shí)間越過(guò)了配置文件中設(shè)置的最大執(zhí)行時(shí)間30秒鐘。

主要原因，DOM分析器要將整個(gè)XML文件轉(zhuǎn)換為樹(shù)結(jié)構(gòu)存放在內(nèi)存中，但是當(dāng)XML文件結(jié)構(gòu)較大或者數(shù)據(jù)較復(fù)雜的時(shí)候，這種方式對(duì)內(nèi)存的要求就比較高，且對(duì)于結(jié)構(gòu)復(fù)雜的樹(shù)進(jìn)行遍歷也是一種非常耗時(shí)的操作。

因此對(duì)于采用XML文件作為網(wǎng)站的配置信息，采用DOM解析好是非常適用的，但是對(duì)于在線詞典查詢，涉及的記錄條數(shù)太多，就不適用了。

4 運(yùn)用Xpath解決查詢超時(shí)問(wèn)題

Xpath是XML的路徑語(yǔ)言，通俗一點(diǎn)講就是通過(guò)元素的路徑來(lái)查找到這個(gè)標(biāo)簽元素，查詢XML非常快。

其核心代碼有：

$xpath=new DOMXpath（$xml）;

$sql="/dict/word[word_name="."'".$word."'"."]/word_name"; ? ? ? ? ? ? ? $words=$xpath->query（$sql）;

這時(shí)，我們?cè)佥斎胛挥谧謳?kù)后面的詞匯也能飛快查詢到所要的結(jié)果，如輸入“rich”，很快就能得到查詢結(jié)果如圖3：

5結(jié)束語(yǔ)

JavaScript是一門(mén)操作性很強(qiáng)的語(yǔ)言，象Array、Date、BOM、DOM、XML等對(duì)象在Web開(kāi)發(fā)中都有廣泛應(yīng)用，如果仍是采用傳統(tǒng)方式進(jìn)行教學(xué)，學(xué)生的專業(yè)技能很難得到實(shí)質(zhì)性提高，只有把這些常用的知識(shí)經(jīng)常放到一些合適的項(xiàng)目中，學(xué)生通過(guò)這些項(xiàng)目自主訓(xùn)練，再加上教師的及時(shí)輔導(dǎo)，效果就會(huì)事半功倍，這就是項(xiàng)目式教學(xué)的優(yōu)勢(shì)，也是JavaScript教師今后需要不斷進(jìn)行教學(xué)嘗試或改進(jìn)教學(xué)的地方。由于篇幅限制，還有一些沒(méi)有講明白的地方，希望得到您的諒解。

參考文獻(xiàn)：

[1] 張屹峰. JavaScript項(xiàng)目式實(shí)例教程[M].北京： 電子工業(yè)出版社， 1997.

[2] 趙增敏. JavaScript動(dòng)態(tài)網(wǎng)頁(yè)編程[M].北京：電子工業(yè)出版社， 2010.

[3] 王小科. JavaScript程序設(shè)計(jì)[M] （第2版）.北京：人民郵電出版社， 2014.

[4] 阮文江. JavaScript程序設(shè)計(jì)基礎(chǔ)教程[M].北京：人民郵電出版社， 2010.

[5] 曾俊國(guó). PHP Web開(kāi)發(fā)實(shí)用教程[M].北京： 清華大學(xué)出版社， 2011.

[6] 吳清秀. PHP網(wǎng)站開(kāi)發(fā)[M].北京： 機(jī)械工業(yè)出版社， 2014.

[7] 張健. Web應(yīng)用系統(tǒng)開(kāi)發(fā)（Php）[M].北京： 中國(guó)鐵道出版社， 2015.

[8] 范立鋒，于合龍，孫豐偉. HTML5基礎(chǔ)開(kāi)發(fā)教程[M].北京： 人民郵電出版社，2013.

【通聯(lián)編輯：王力】