应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例（第1部分）.docVIP

应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例（第1/4部分） 构建本Web示例JSP页面及相关的JavaScript程序文件 1、与AJAX相关的知识点回顾 （1）什么是AJAX （2）应用AJAX技术可以达到什么效果—— 局部更新 （3）如何编程应用AJAX技术 2、在本Web示例项目的WebRoot目录下新建一个javascript子目录 （1）javascript目录 （2）在javascript目录中添加json2.js （3）在javascript目录中新建一个文件名称为queryStudentInfo.js的JavaScript程序文件，该queryStudentInfo.js的JavaScript程序文件中的程序代码在后续给出 3、在本Web示例项目的WebRoot目录下再新建一个目录名称为ajaxQueryInfo的子目录 4、在ajaxQueryInfo子目录中新建一个ajaxQueryStudentInfo.jsp页面文件 （1）添加该JSP页面 （2）在该JSP页面内实现查询表单及数据显示的表格 %@ page language=java import=java.util.* pageEncoding=GB18030% !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head title应用AJAX技术的异步查询学生信息页面/title script type=text/javascript language=javascript src=${pageContext.request.contextPath}/javascript/json2.js /script script type=text/javascript language=javascript src=${pageContext.request.contextPath}/javascript/queryStudentInfo.js /script /head body !-- form name=queryStudentInfoForm action=# method=post -- 学生专业： input type=text name=inputMajor id=inputMajorTagID size=20 input type=button value=查询 onclick=queryStudentInfo(inputMajorTagID,showDataTableTagID,showDataTableTagTBodyID,${pageContext.request.contextPath}); !-- /form -- table width=433 border=1 style=display:none id=showDataTableTagID thead tr th width=102姓名/th th width=104性别/th th width=91年龄/th th width=86专业/th /tr /thead tbody id=showDataTableTagTBodyID /tbody /table /body /html 注意： 由于本页面将应用AJAX的异步查询技术实现相关的数据查询，因此在页面中不再需要表单定义。因此可以删除页面中的form标签。 5、编程queryStudentInfo.js文件中的相关代码 /** 定义一个对象变量 */ var xmlHttpRequest; var showDataTableTagID_Global; var showDataTableTagTBodyID_Global; function queryStudentInfo(inputMajorTagID, showDataTableTagID_Local, showDataTableTagTBodyID_Local, webContextURL){ /** * 缓存所获得的显示查询结果数据的表格标签的ID */ showDataTableTagID_Global=showData