借ＡＪＡＸ提升Ｗｅｂ課件表現力與交互性

　　隨著互聯網的發展，Web課件在教育教學中發揮著越來越重要的作用。然而，伴隨著 Web 的強大，出現的卻是等待：等待服務器響應，等待屏幕刷新，等待請求返回和生成新的頁面，這一切使得Web課件缺乏桌面應用程序的交互性及表現力。AJAX能提供高度交互的Web應用，與桌面應用所差無幾，而且能夠在所有當前Web瀏覽器上部署，無需特殊的插件。本文旨在將AJAX方法推廣到Web課件制作中，以提升Web課件的表現力與交互性。
　　
　　AJAX方法簡介
　　
　　AJAX是“Asynchronous JavaScript + XML的簡寫”，它不是一種技術，而是一種方法，它由幾種蓬勃發展的技術以新的強大方式組合而成，包括：①基于XHTML和CSS標準的表示；②使用Document Object Model進行動態顯示和交互；③使用XMLHttpRequest與服務器進行異步通信；④使用JavaScript綁定一切。AJAX讓開發者可以在瀏覽器端更新被顯示的HTML內容而不必刷新頁面，即可以使基于瀏覽器的應用程序更具交互性，而且更類似傳統型桌面應用程序。AJAX應用的基本流程為：①從Web表單中獲取需要的數據；②建立到服務器的url；③打開到服務器的連接；④設置服務器在完成后要運行的函數；⑤發送請求。
　　
　　AJAX應用示例
　　
　　下面我們以AJAX、JSP、Access數據庫結合為例，制作一個簡單的、無刷新的在線測試頁面。
　　1.界面與功能
　　設計者讓學生自己根據需要從該Web頁面選擇題目（圖1），然后讓瀏覽器根據學生的選擇從服務器端數據庫中獲取相應的題目信息，并將這些返回信息再在該頁面顯示出來（圖2），而在這個過程中該Web頁面沒有刷新。
　　2.設計與編制
　　（1）建立數據源
　　首先，我們建立Access數據庫db.mdb；然后，創建新表quest用來存放題目資源，表結構如下列用戶表所示；最后，在表中輸入一些題目內容以供調用。本例中，我們將使用ODBC訪問數據庫，所以，必須為建好的數據庫添加一個數據源以便應用程序交互。數據源的建立過程為：①打開控制面板中管理工具里的數據源（ODBC）；②在出現的ODBC數據庫管理器窗口中選擇系統DSN選項卡；③建立指向db.mdb數據庫，名稱為hdj的數據源。
　　
　　（２）代碼編寫
　　①學生操作的界面代碼為：
　　文件名：ｍａｉｎ．ｈｔｍｌ
　　＜ｈｔｍｌ＞
　　＜ｈｅａｄ＞
　　　＜ｓｃｒｉｐｔ　ｓｒｃ＝＂ａｊａｘ．ｊｓ＂＞＜　／ｓｃｒｉｐｔ＞（注：調用ｊｓ使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ與服務器進行異步通信）
　　＜／ｈｅａｄ＞
　　＜ｆｏｒｍ　ｎａｍｅ＝＂ｆｏｒｍ＂＞
　　題目選擇：
　　＜ｓｅｌｅｃｔ　ｎａｍｅ＝＂ｃｕｓｔｏｍｅｒｓ＂　ｏｎＣｈａｎｇｅ＝＂ｓｈｏｗＣｕｓｔｏｍｅｒ（ｄｏｃｕｍｅｎｔ．ｆｏｒｍ．ｃｕｓｔｏｍｅｒｓ．ｏｐｔｉｏｎｓ［ｄｏｃｕｍｅｎｔ．ｆｏｒｍ．ｃｕｓｔｏｍｅｒｓ．ｓｅｌｅｃｔｅｄＩｎｄｅｘ］．ｖａｌｕｅ）＂＞
　　＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝＂０＂＞題目＜　／ｏｐｔｉｏｎ＞
　　＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝＂１＂＞第一題＜／ｏｐｔｉｏｎ＞
　　＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝＂２＂＞第二題＜／ｏｐｔｉｏｎ＞
　　＜／ｓｅｌｅｃｔ＞
　　＜／ｆｏｒｍ＞
　　＜ｐ＞
　　＜ｄｉｖ　ｉｄ＝＂ｔｘｔＨｉｎｔ＂＞題目顯示區＜／ｄｉｖ＞
　　＜／ｐ＞
　　＜／ｈｔｍｌ＞
　　②使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ與服務器進行異步通信的ｊａｖａｓｃｒｉｐｔ代碼為：
　　文件名：ａｊａｘ．ｊｓ
　　ｖａｒ　ｘｍｌＨｔｔｐ；（注：定義ｘｍｌＨｔｔｐ）
　　ｆｕｎｃｔｉｏｎ　ｓｈｏｗＣｕｓｔｏｍｅｒ（ｓｔｒ）（注：異步取得題目）
　　｛　
　　ｘｍｌＨｔｔｐ＝ＧｅｔＸｍｌＨｔｔｐＯｂｊｅｃｔ（）；
　　ｖａｒ　ｕｒｌ＝＂ａｊａｘ．ｊｓｐ＂；
　　ｕｒｌ＝ｕｒｌ＋＂？ｑ＝＂＋ｓｔｒ；
　　ｘｍｌＨｔｔｐ．ｏｎｒｅａｄｙｓｔａｔｅ－ｃｈａｎｇｅ＝ｓｔａｔｅＣｈａｎｇｅｄ；
　　ｘｍｌＨｔｔｐ．ｏｐｅｎ（＂ＧＥＴ＂，ｕｒｌ，ｔｒｕｅ）；
　　ｘｍｌＨｔｔｐ．ｓｅｎｄ（ｎｕｌｌ）；
　　｝
　　ｆｕｎｃｔｉｏｎ　ｓｔａｔｅＣｈａｎｇｅｄ（）（注：使用ＤＯＭ進行動態顯示和交互：顯示題目）
　　｛
　　　ｉｆ（ｘｍｌＨｔｔｐ．ｒｅａｄｙＳｔａｔｅ＝＝４｜｜ｘｍｌＨｔｔｐ．ｒｅａｄｙＳｔａｔｅ＝＝＂ｃｏｍｐｌｅｔｅ＂）
　　　｛
　　ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（＂ｔｘｔＨｉｎｔ＂）．ｉｎｎｅｒＨＴＭＬ＝ｘｍｌＨｔｔｐ．ｒｅｓｐｏｎｓｅＴｅｘｔ；
　　　｝
　　｝
　　ｆｕｎｃｔｉｏｎ　ＧｅｔＸｍｌＨｔｔｐＯｂｊｅｃｔ（）（注：以支持多種瀏覽器的方式創建　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ對象，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ對象是ＡＪＡＸ的技術基礎與核心）
　　｛
　　　ｖａｒ　ｏｂｊＸＭＬＨｔｔｐ＝ｎｕｌｌ；
　　　ｉｆ（ｗｉｎｄｏｗ．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ）
　　　｛
　　ｏｂｊＸＭＬＨｔｔｐ＝ｎｅｗ　ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；
　　　｝
　　　ｅｌｓｅ　ｉｆ（ｗｉｎｄｏｗ．ＡｃｔｉｖｅＸＯｂｊｅｃｔ）
　　　｛
　　ｏｂｊＸＭＬＨｔｔｐ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ（＂Ｍｉｃｒｏｓｏｆｔ．ＸＭＬＨＴＴＰ＂）；
　　　｝
　　　ｒｅｔｕｒｎ　ｏｂｊＸＭＬＨｔｔｐ；
　　｝
　　③從服務器端讀取數據的ＪＳＰ頁面代碼為：
　　文件名：ａｊａｘ．ｊｓｐ
　　＜％＠ｐａｇｅ　ｃｏｎｔｅｎｔＴｙｐｅ＝＂ｔｅｘｔ／ｈｔｍｌ；　ｃｈａｒｓｅｔ＝ｇｂ２３１２＂　ｉｍｐｏｒｔ＝＂ｊａｖａ．ｓｑｌ．＊＂％＞
　　＜ｈｔｍｌ＞
　　＜ｂｏｄｙ＞
　　＜％
　　Ｓｔｒｉｎｇ　ｓｑｌ＝（Ｓｔｒｉｎｇ）ｒｅｑｕｅｓｔ．ｇｅｔＰａｒａｍｅｔｅｒ（＂ｑ＂）；／／得到參數
　　Ｓｔｒｉｎｇ　ｓｔｒ＝＂ｓｅｌｅｃｔ　＊　ｆｒｏｍ　ｑｕｅｓｔ　ｗｈｅｒｅ　ＩＤ＝＇＂＋ｓｑｌ＋＂＇＂；
　　Ｃｌａｓｓ．ｆｏｒＮａｍｅ（＂ｓｕｎ．ｊｄｂｃ．ｏｄｂｃ．ＪｄｂｃＯｄｂｃＤｒｉｖｅｒ＂）；
　　Ｃｏｎｎｅｃｔｉｏｎ　ｃｏｎ＝ＤｒｉｖｅｒＭａｎａｇｅｒ．ｇｅｔＣｏｎｎｅｃｔｉｏｎ（＂ｊｄｂｃ：ｏｄｂｃ：ｈｄｊ＂）；／／連接數據庫
　　Ｓｔａｔｅｍｅｎｔ　ｓｍｔ＝ｃｏｎ．ｃｒｅａｔｅＳｔａｔｅｍｅｎｔ（）；
　　ＲｅｓｕｌｔＳｅｔ　ｒｓ＝ｓｍｔ．ｅｘｅｃｕｔｅＱｕｅｒｙ（ｓｔｒ）；
　　ｗｈｉｌｅ（ｒｓ．ｎｅｘｔ（））
　　｛
　　ｏｕｔ．ｐｒｉｎｔｌｎ（ｒｓ．ｇｅｔＳｔｒｉｎｇ（２））；／／讀出并顯示題干
　　ｏｕｔ．ｐｒｉｎｔｌｎ（＂＜ｂｒ＞＂）；
　　ｏｕｔ．ｐｒｉｎｔｌｎ（ｒｓ．ｇｅｔＳｔｒｉｎｇ（３））；／／讀出并顯示選項
　　｝
　　ｒｓ．ｃｌｏｓｅ（）；
　　ｓｍｔ．ｃｌｏｓｅ（）；
　　ｃｏｎ．ｃｌｏｓｅ（）；　／／關閉連接、釋放資源
　　％＞
　　＜／ｂｏｄｙ＞
　　＜／ｈｔｍｌ＞
　　3.應用及功能擴展
　　以上，我們僅僅做了一個簡單的設計，大家只要將題目增加到自己希望的數目后，更換數據庫中的內容即可投入使用。當我們對AJAX方法逐漸熟悉以后，可以舉一反三，進一步改進本文所設計的課件，使之更加生動具體，更加人性化。圖3就是對本例的進一步改進，它可以根據學生個體要求顯示題目答案。
　　
　　
　　拓展
　　
　　本文將AJAX與JSP結合主要是考慮Java的安全機制及跨平臺性，JSP擁有Java編程語言“一次編寫，各處運行” 的特點。大家也可以根據自己的習慣與基礎來選擇其他服務器端語言，例如：Asp、PHP、Asp.net等。AJAX不是一種必須和萬能的技術，它有適合自身應用的場合，并與現有的動態頁面技術互補融合。在未來的軟件技術發展中，相信AJAX將擔負起更多的用途，在Web應用的舞臺上發揮重要的作用。