借ＡＪＡＸ提升Ｗｅｂ课件表现力与交互性

　　随着互联网的发展，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应用的舞台上发挥重要的作用。