最近一直在做前台JSP页面，遇到了很多问题，也学到了很多东西。今天主要想谈一下页面填充的作用。笔者认为，页面填充主要由这些好处：1.实现级联 2.实现页面的局部刷新 3.动态加载。
今天主要就前两点做一些总结：级联的实现本就是局部刷新的，当选择一个下拉框后，受影响的下拉框将被重新加载；页面局部刷新用得较多的是查询页面，因为查询页面往往有很多个查询条件，如果我们查询后重新加载整个页面，所带来的结果就会是结果查出来了，查询条件的下拉框又被初始化。如图：
如果我们能做到仅仅重新加载查询的结果数据，就实现了我们想要的效果，如图：
区别就是下拉框没有被初始化，实现了页面的局部刷新。
那么，页面的局部刷新是如何做到的呢？笔者是用回调函数来实现的。上一篇博文中笔者分享了自己做级联的经验，现在就举一个简单的填充查询数据的例子。
这是我们通过查询要显示的页面部分代码：
<tr>
<tdcolspan="8"id="courseMappingAjax">
<tableborder="1">
<c:forEachitems="${courseMappingVOList}"var="courseMapping">
<tr>
<td width="100px"><input type="checkbox"name="selectFlag" id="selectFlag" value="${courseMapping.id}"></td>
<td width="100px"><c:out value="${courseMapping.grade}"/></td>
<td width="100px"><c:out value="${courseMapping.eduLevelName}"/></td>
<td width="150px"><c:out value="${courseMapping.specialName}"/></td>
<td width="150px"><c:out value="${courseMapping.courseName}"/></td>
<td width="150px"><c:out value="${courseMapping.uniExamCourseName}"/></td>
<td width="150px"><c:out value="${courseMapping.lastOprPeople}"/></td>
<td width="150px"><fmt:formatDate value="${courseMapping.lastOprTime}"/></td>
</tr>
</c:forEach>
</table>
</td>
</tr>
页面中执行查询操作会提交给JavaScript，将请求交给Controller处理，从后台取得查询数据后数据给了一个辅助的页面，命名为courseMappingAjax.jsp，其页面代码跟我们的查询页面显示查询数据的部分完全一样，这里就不贴出来了。主要谈谈用javaScript的回调函数的实现数据的填充。
首先，页面提交按钮，调用searchCourseMapping()函数，该函数获得查询参数，并调用getCourseMapping()函数。在getCourseMapping()函数中设置回调函数，也就是说该函数是在发送post请求Controller处理并得到查询数据给了courseMappingAjax.jsp页面之后再执行。我们可以看到courseMapping()函数就是实现填充功能的，将courseMappingAjax.jsp页面中“id= courseMappingAjax”部分填充到查询页面中“id= courseMappingAjax”的部分。
function searchCourseMapping() {
var grade = document.getElementById("grade").value;
var eduLevelId = document.getElementById("eduLevelId").value;
var specialId = document.getElementById("specialId").value;
var uniExamCourseId = document.getElementById("uniExamCourseId").value;
getCourseMapping(grade, eduLevelId, specialId, uniExamCourseId);
}
function getCourseMapping(grade, eduLevelId, specialId, uniExamCourseId) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = courseMapping; //设置回调函数
xmlHttp.open("POST","scoreManage_searchCourseMapping",true);//发送POST请求，执行查询操作。注意：该请求返回的视图是courseMappingAjax.jsp页面
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade +"&eduLevelId=" + eduLevelId
+ "&specialId=" + eduLevelId +"&uniExamCourseId="
+ uniExamCourseId);
}
function courseMapping() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码 document.getElementById("courseMappingAjax").innerHTML = xmlHttp.responseText;
}
}
}
这样，我们就实现了局部刷新页面。