基于 Ajax 技术的 JSP 页面中模糊查询的设计 与实现(一) 2011-07-19 20:31:22 来源： 作者: 点击数：321次 评论:0条 关键词：AjaxJSP 模糊查询 模糊查询就是能根据输入的内容动态从数据库中查询出匹配的数据，并将数据显示在列 表框 中，这在软件系统中经常用到。象搜索引擎 Google、Baidu 一样，在输入一个字或词后 能在下拉列表框中列出数据库中的匹配项供用户选择，大大方便了 用户的输入。在传统的 C/S 结构的程序中，模糊查询的实现并不困难，程序中只要根据用户输入的数据，连接数据 库，用 SELECT 语句到数据库中查询出匹配 项，将结果在列表框中显示出来即可；但是在 B/S 结构的 Web 应用程序中，由于 HTTP 是一个无连接的协议，只有重新提交或刷新页面， 向 Web 服务器提交 一次请求，才能查询到数据库中数据。在本人开发的基于 Struts 框架技术 的学校教育教学情况测评系统中，为了快速、方便从众多教师中选择一名教师，或者 从众多 课程中选择一门课程，利用了 Ajax 技术，可以轻松地实现在不重新提交或刷新整个页面的情 况下与 Web 服务器进行通信，获取数中的数据, 实现模糊查询 。 1 Ajax 技术介绍 传统的 Web 应用允许用户填写表单，当提交表单时就向 Web 服务器发出一个请求，服务 器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费 了许多带宽，因为在前 后两个页面中的大部分 HTML 代码往往是相同的。由于每次应用的沟通都需要向服务器发送 请求，应用的回应时间就依赖于服务器的回应时 间，这导致了用户界面的回应比本机应用慢 得多。与此不同，Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP 或其他一 些基于 XML 的页面服 务接口，并在用户端采用 java script 处理来自服务器的响应。因为在 服务器和浏览器之间交换的数据大量减少，结果我们就能看到服务器的回应速度更快，同时 很多的处理工作可以在发出 请求的用户端机器上完成，所以 Web 服务器的处理时间也减少 了。 Ajax 全称为“Asynchronous java script and XML”（异步 java script 和 XML），是指一种创 建交互式网页应用的网页开发技术。 使用 Ajax 的最大优点，就是能在不刷新整个页面的前 提下维护数据，这使得 Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些 没有改变过的 信息，Ajax 不需要任何浏览器插件，但需要用户允许 java script 在浏览器上执 行。就像 DHTML 应用程序那样，Ajax 应用程序必须在众多不同的浏览器平台上经过严格的 测试，随着 Ajax 的成熟，一些简化 Ajax 使用的程序库也相继问世，同样，也出现了另一种 辅助程序设计的技术，为那些不支持 java script 的用户提供替代功能。 Ajax 是几种已有技术的综合使用，是一种新的互联网应用设计思想和设计方式。在基于 Ajax 的系统交互过程中，可以向服务器发出一个异步请求来完成 这件事。在 Ajax 应用中， 网络的通信流量主要是集中在加载的前期，用户登录后都需要一次性地将一个大而复杂的用 户端交给浏览器，但在此之后，与服务器通 信则会有效率得多，对于瞬间应用来说，积累起 来的通信流量要比以前的基于页面的 Web 应用少很多。 2 分析、设计及实现 图1所示为选择教师的模糊查询网页对话框。图2所示为基于 Ajax 开发模式的模糊查询内 部调用示意图。当用户在单行输入框中编辑所要查询的教师的姓或 名时，将触发对 Ajax 引 擎的一次 java script 调用，Ajax 引擎向 Tomcat 服务器发送对动作 Action 类的调用，在 Action 

类中，将通过调用数据库操作类中的方法对数据库中数 据进行查询，查询到的数据以字符串 的形式返回给服务器，以 XML 的数据形式返回给 Ajax 引擎，最后在网页对话框中的列表框 中显示出来，供用户选择。下面 具体说明其实现过程。 2.1 编制网页对话框界面 网页对话框采用一个表格来组织其他页面元素，表格中主要有一个用于输入要查询的教 师的姓或名的文本编辑框，一个用于显示查询结果的列表框，一个确定按钮和一个取消按钮， 如图1所示。 2.2 搭建 Ajax 开发框架 应用 Ajax 技术开发 Web 应用程序时，通过编制一个个的 java script 函数来搭建开发框 架。首先要编写自定义的 java script 函数 createRequest()，该函数主要用于创建一个与浏览 器相匹配的 XMLHttpRequest 对象，该函数被 search 函数 调用； 编写自定义的 java script 函数 getReadyStateHandler(req, responseXmlHandler)，该函数根 据服务器的请求状态来调用结果处理函数 update(respXML)，该函数被 search 函数调用，主 要代码如下： if(req.readyState == 4) { if(req.status == 200) { responseXmlHandler(req.responseXML);//相当于调用 update(req.responseXML) } else … } 编写自定义的 java script 函数 update(respXML)，该函数从服务器返回的数据中分离出 查询结果数据，并设置至页面下拉列表框中，主要代码如下： var code=ndValue.substring(0,j);//从节点数据 ndValue 中分离出代码部分 var name=ndValue.substring(j,ndValue.length); //从节点数据 ndValu 中分离出名称部分 

var oOption = document.createElement("option"); //创建一个 option，并设置其值 oOption.value=code; oOption.text=name; sel.options.add(oOption); //将一个 option 项加入至列表框中 编写自定义的 java script 函数 search( code)，该函数在编辑文本框中编辑数据时被调用， 通过一系列函数调用将文本框中数据传递进去并取出查询结果，主要代码如下： var xmlrequest=createRequest(); //创建 XMLHttpRequest 对象 xmlrequest.onreadystatechange = getReadyStateHandler(xmlrequest, update);// 调 用 update 函数 xmlrequest.open("post","searchaction.do?code="+code, true); //调用自定义动作类中方法 //设置 HTTP 头部信息 xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlrequest.send("keytxt="+keyValue); //向 Action 中传递参数 2.3 编制 Struts 动作类及从数据库中获取数据的方法 在 java script 函数 search 中调用的 searchaction.do 实际上映射的是一个自定义的动作类 SearchAction，在该类中，重写了从 Action 基类继承的方法 execute。在该方法中，获取传 递过来的数据，调用数据库操作类 DBUser 中的 searchDatasByTxt 方法查 询数据。主要代 码如下： public class SearchAction extends Action { public ActionForward execute(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception { … String datas = dbuser.searchDatasByTxt(code,keyTxt);//调用数据库操作类的方法 response.setContentType("application/xml;charset=utf-8"); response.getWriter().write(datas);//向 java script 函数中返回值 return null; } } 在数据库操作类 DBUser 的方法 searchDatasByTxt(String code,String keyTxt)中，code 和 keyTxt 为查询参数，用以构造 SQL 语句进行查询，并将查询结果数据组织成 XML 格式返 回。主要代码如下： public String searchDatasByTxt(String code,String keyTxt) { … rs = stmt.executeQuery("select stno,stname from steacher where stname like '%"+keyTxt+"%'"); while(rs.next()) { datas.append(""+rs.getString("stno")+rs.getString("stname")+""); } … } 3 结束语 

在 JSP 页面中使用 Ajax 技术能够大大增强网页的动态效果及灵活性，使前台页面与后 台服务器的交互更加方便。本人开发的基于 Struts 框架结构的 学校教育教学情况测评系统 中使用了 Ajax 技术，为学校教务科工作人员在使用系统时选择课程和选择教师提供了极大 的便利，提高了工作的效率。