隨著互聯(lián)網(wǎng)的發(fā)展，Web課件在教育教學(xué)中發(fā)揮著越來(lái)越重要的作用。然而，伴隨著 Web 的強(qiáng)大，出現(xiàn)的卻是等待：等待服務(wù)器響應(yīng)，等待屏幕刷新，等待請(qǐng)求返回和生成新的頁(yè)面，這一切使得Web課件缺乏桌面應(yīng)用程序的交互性及表現(xiàn)力。AJAX能提供高度交互的Web應(yīng)用，與桌面應(yīng)用所差無(wú)幾，而且能夠在所有當(dāng)前Web瀏覽器上部署，無(wú)需特殊的插件。本文旨在將AJAX方法推廣到Web課件制作中，以提升Web課件的表現(xiàn)力與交互性。
　　
　　AJAX方法簡(jiǎn)介
　　
　　AJAX是“Asynchronous JavaScript + XML的簡(jiǎn)寫”，它不是一種技術(shù)，而是一種方法，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成，包括：①基于XHTML和CSS標(biāo)準(zhǔn)的表示；②使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；③使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；④使用JavaScript綁定一切。AJAX讓開發(fā)者可以在瀏覽器端更新被顯示的HTML內(nèi)容而不必刷新頁(yè)面，即可以使基于瀏覽器的應(yīng)用程序更具交互性，而且更類似傳統(tǒng)型桌面應(yīng)用程序。AJAX應(yīng)用的基本流程為：①?gòu)腤eb表單中獲取需要的數(shù)據(jù)；②建立到服務(wù)器的url；③打開到服務(wù)器的連接；④設(shè)置服務(wù)器在完成后要運(yùn)行的函數(shù)；⑤發(fā)送請(qǐng)求。
　　
　　AJAX應(yīng)用示例
　　
　　下面我們以AJAX、JSP、Access數(shù)據(jù)庫(kù)結(jié)合為例，制作一個(gè)簡(jiǎn)單的、無(wú)刷新的在線測(cè)試頁(yè)面。
　　1.界面與功能
　　設(shè)計(jì)者讓學(xué)生自己根據(jù)需要從該Web頁(yè)面選擇題目（圖1），然后讓瀏覽器根據(jù)學(xué)生的選擇從服務(wù)器端數(shù)據(jù)庫(kù)中獲取相應(yīng)的題目信息，并將這些返回信息再在該頁(yè)面顯示出來(lái)（圖2），而在這個(gè)過(guò)程中該Web頁(yè)面沒(méi)有刷新。
　　2.設(shè)計(jì)與編制
　　（1）建立數(shù)據(jù)源
　　首先，我們建立Access數(shù)據(jù)庫(kù)db.mdb；然后，創(chuàng)建新表quest用來(lái)存放題目資源，表結(jié)構(gòu)如下列用戶表所示；最后，在表中輸入一些題目?jī)?nèi)容以供調(diào)用。本例中，我們將使用ODBC訪問(wèn)數(shù)據(jù)庫(kù)，所以，必須為建好的數(shù)據(jù)庫(kù)添加一個(gè)數(shù)據(jù)源以便應(yīng)用程序交互。數(shù)據(jù)源的建立過(guò)程為：①打開控制面板中管理工具里的數(shù)據(jù)源（ODBC）；②在出現(xiàn)的ODBC數(shù)據(jù)庫(kù)管理器窗口中選擇系統(tǒng)DSN選項(xiàng)卡；③建立指向db.mdb數(shù)據(jù)庫(kù)，名稱為hdj的數(shù)據(jù)源。
　　
　?。ǎ玻┐a編寫
　?、賹W(xué)生操作的界面代碼為：
　　文件名：ｍａｉｎ．ｈｔｍｌ
　?。迹瑁簦恚欤?br/>　　＜ｈｅａｄ＞
　　?。迹螅悖颍椋穑簟。螅颍悖剑ⅲ幔辏幔辏螅ⅲ荆肌。螅悖颍椋穑簦荆ㄗⅲ赫{(diào)用ｊｓ使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ與服務(wù)器進(jìn)行異步通信）
　?。迹瑁澹幔洌?br/>　?。迹妫铮颍怼。睿幔恚澹剑ⅲ妫铮颍恚ⅲ?br/>　　題目選擇：
　?。迹螅澹欤澹悖簟。睿幔恚澹剑ⅲ悖酰螅簦铮恚澹颍螅ⅰ。铮睿茫瑁幔睿纾澹剑ⅲ螅瑁铮鳎茫酰螅簦铮恚澹颍ǎ洌铮悖酰恚澹睿簦妫铮颍恚悖酰螅簦铮恚澹颍螅铮穑簦椋铮睿螅郏洌铮悖酰恚澹睿簦妫铮颍恚悖酰螅簦铮恚澹颍螅螅澹欤澹悖簦澹洌桑睿洌澹荩觯幔欤酰澹ⅲ?br/>　?。迹铮穑簦椋铮睢。觯幔欤酰澹剑ⅲ埃ⅲ绢}目＜　／ｏｐｔｉｏｎ＞
　?。迹铮穑簦椋铮睢。觯幔欤酰澹剑ⅲ保ⅲ镜谝活}＜／ｏｐｔｉｏｎ＞
　　＜ｏｐｔｉｏｎ?。觯幔欤酰澹剑ⅲ玻ⅲ镜诙}＜／ｏｐｔｉｏｎ＞
　?。迹螅澹欤澹悖簦?br/>　　＜／ｆｏｒｍ＞
　?。迹穑?br/>　　＜ｄｉｖ?。椋洌剑ⅲ簦簦龋椋睿簦ⅲ绢}目顯示區(qū)＜／ｄｉｖ＞
　　＜／ｐ＞
　?。迹瑁簦恚欤?br/>　　②使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ與服務(wù)器進(jìn)行異步通信的ｊａｖａｓｃｒｉｐｔ代碼為：
　　文件名：ａｊａｘ．ｊｓ
　?。觯幔颉。恚欤龋簦簦?；（注：定義ｘｍｌＨｔｔｐ）
　?。妫酰睿悖簦椋铮睢。螅瑁铮鳎茫酰螅簦铮恚澹颍ǎ螅簦颍ㄗⅲ寒惒饺〉妙}目）
　　｛　
　?。恚欤龋簦簦穑剑牵澹簦兀恚欤龋簦簦穑希猓辏澹悖簦ǎ?br/>　?。觯幔颉。酰颍欤剑ⅲ幔辏幔辏螅穑?；
　?。酰颍欤剑酰颍欤ⅲ浚瘢剑ⅲ螅簦?；
　?。恚欤龋簦簦穑铮睿颍澹幔洌螅簦幔簦澹悖瑁幔睿纾澹剑螅簦幔簦澹茫瑁幔睿纾澹洌?br/>　?。恚欤龋簦簦穑铮穑澹睿ǎⅲ牵牛裕?，ｕｒｌ，ｔｒｕｅ）；
　?。恚欤龋簦簦穑螅澹睿洌ǎ睿酰欤欤?br/>　?。?br/>　?。妫酰睿悖簦椋铮睢。螅簦幔簦澹茫瑁幔睿纾澹洌ǎㄗⅲ菏褂茫模希瓦M(jìn)行動(dòng)態(tài)顯示和交互：顯示題目）
　?。?br/>　　?。椋妫ǎ恚欤龋簦簦穑颍澹幔洌樱簦幔簦澹剑剑矗恚欤龋簦簦穑颍澹幔洌樱簦幔簦澹剑剑ⅲ悖铮恚穑欤澹簦澹ⅲ?br/>　　?。?br/>　?。洌铮悖酰恚澹睿簦纾澹簦牛欤澹恚澹睿簦拢桑洌ǎⅲ簦簦龋椋睿簦ⅲ椋睿睿澹颍龋裕停蹋剑恚欤龋簦簦穑颍澹螅穑铮睿螅澹裕澹簦?br/>　　?。?br/>　?。?br/>　　ｆｕｎｃｔｉｏｎ?。牵澹簦兀恚欤龋簦簦穑希猓辏澹悖簦ǎㄗⅲ阂灾С侄喾N瀏覽器的方式創(chuàng)建?。兀停蹋龋簦簦穑遥澹瘢酰澹螅魧?duì)象，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ對(duì)象是ＡＪＡＸ的技術(shù)基礎(chǔ)與核心）
　?。?br/>　　?。觯幔颉。铮猓辏兀停蹋龋簦簦穑剑睿酰欤欤?br/>　　?。椋妫ǎ鳎椋睿洌铮鳎兀停蹋龋簦簦穑遥澹瘢酰澹螅簦?br/>　　?。?br/>　?。铮猓辏兀停蹋龋簦簦穑剑睿澹鳌。兀停蹋龋簦簦穑遥澹瘢酰澹螅簦ǎ?；
　　　｝
　　?。澹欤螅濉。椋妫ǎ鳎椋睿洌铮鳎粒悖簦椋觯澹兀希猓辏澹悖簦?br/>　　?。?br/>　　ｏｂｊＸＭＬＨｔｔｐ＝ｎｅｗ?。粒悖簦椋觯澹兀希猓辏澹悖簦ǎⅲ停椋悖颍铮螅铮妫簦兀停蹋龋裕裕校ⅲ?；
　　　｝
　　?。颍澹簦酰颍睢。铮猓辏兀停蹋龋簦簦穑?br/>　?。?br/>　?、蹚姆?wù)器端讀取數(shù)據(jù)的ＪＳＰ頁(yè)面代碼為：
　　文件名：ａｊａｘ．ｊｓｐ
　?。迹ィ溃穑幔纾濉。悖铮睿簦澹睿簦裕穑澹剑ⅲ簦澹簦瑁簦恚欤弧。悖瑁幔颍螅澹簦剑纾猓玻常保玻ⅰ。椋恚穑铮颍簦剑ⅲ辏幔觯幔螅瘢欤ⅲィ?br/>　　＜ｈｔｍｌ＞
　?。迹猓铮洌?br/>　　＜％
　?。樱簦颍椋睿纭。螅瘢欤剑ǎ樱簦颍椋睿纾颍澹瘢酰澹螅簦纾澹簦校幔颍幔恚澹簦澹颍ǎⅲ瘢ⅲ唬玫絽?shù)
　?。樱簦颍椋睿纭。螅簦颍剑ⅲ螅澹欤澹悖簟。。妫颍铮怼。瘢酰澹螅簟。鳎瑁澹颍濉。桑模剑Вⅲ螅瘢欤ⅲВ?；
　?。茫欤幔螅螅妫铮颍危幔恚澹ǎⅲ螅酰睿辏洌猓悖铮洌猓悖剩洌猓悖希洌猓悖模颍椋觯澹颍ⅲ?；
　　Ｃｏｎｎｅｃｔｉｏｎ?。悖铮睿剑模颍椋觯澹颍停幔睿幔纾澹颍纾澹簦茫铮睿睿澹悖簦椋铮睿ǎⅲ辏洌猓悖海铮洌猓悖海瑁洌辏ⅲ唬B接數(shù)據(jù)庫(kù)
　?。樱簦幔簦澹恚澹睿簟。螅恚簦剑悖铮睿悖颍澹幔簦澹樱簦幔簦澹恚澹睿簦ǎ?；
　?。遥澹螅酰欤簦樱澹簟。颍螅剑螅恚簦澹澹悖酰簦澹眩酰澹颍ǎ螅簦颍?；
　　ｗｈｉｌｅ（ｒｓ．ｎｅｘｔ（））
　?。?br/>　　ｏｕｔ．ｐｒｉｎｔｌｎ（ｒｓ．ｇｅｔＳｔｒｉｎｇ（２））；／／讀出并顯示題干
　　ｏｕｔ．ｐｒｉｎｔｌｎ（＂＜ｂｒ＞＂）；
　?。铮酰簦穑颍椋睿簦欤睿ǎ颍螅纾澹簦樱簦颍椋睿纾ǎ常唬x出并顯示選項(xiàng)
　?。?br/>　?。颍螅悖欤铮螅澹ǎ?br/>　?。螅恚簦悖欤铮螅澹ǎ?；
　?。悖铮睿悖欤铮螅澹ǎ弧。P(guān)閉連接、釋放資源
　?。ィ?br/>　　＜／ｂｏｄｙ＞
　?。迹瑁簦恚欤?br/>　　3.應(yīng)用及功能擴(kuò)展
　　以上，我們僅僅做了一個(gè)簡(jiǎn)單的設(shè)計(jì)，大家只要將題目增加到自己希望的數(shù)目后，更換數(shù)據(jù)庫(kù)中的內(nèi)容即可投入使用。當(dāng)我們對(duì)AJAX方法逐漸熟悉以后，可以舉一反三，進(jìn)一步改進(jìn)本文所設(shè)計(jì)的課件，使之更加生動(dòng)具體，更加人性化。圖3就是對(duì)本例的進(jìn)一步改進(jìn)，它可以根據(jù)學(xué)生個(gè)體要求顯示題目答案。
　　
　　
　　拓展
　　
　　本文將AJAX與JSP結(jié)合主要是考慮Java的安全機(jī)制及跨平臺(tái)性，JSP擁有Java編程語(yǔ)言“一次編寫，各處運(yùn)行” 的特點(diǎn)。大家也可以根據(jù)自己的習(xí)慣與基礎(chǔ)來(lái)選擇其他服務(wù)器端語(yǔ)言，例如：Asp、PHP、Asp.net等。AJAX不是一種必須和萬(wàn)能的技術(shù)，它有適合自身應(yīng)用的場(chǎng)合，并與現(xiàn)有的動(dòng)態(tài)頁(yè)面技術(shù)互補(bǔ)融合。在未來(lái)的軟件技術(shù)發(fā)展中，相信AJAX將擔(dān)負(fù)起更多的用途，在Web應(yīng)用的舞臺(tái)上發(fā)揮重要的作用。