最近一直在做前台JSP頁面，遇到了很多問題，也學到了很多東西。今天主要想談一下頁面填充的作用。筆者認為，頁面填充主要由這些好處：1.實作級聯 2.實作頁面的局部重新整理 3.動态加載。
今天主要就前兩點做一些總結：級聯的實作本就是局部重新整理的，當選擇一個下拉框後，受影響的下拉框将被重新加載；頁面局部重新整理用得較多的是查詢頁面，因為查詢頁面往往有很多個查詢條件，如果我們查詢後重新加載整個頁面，所帶來的結果就會是結果查出來了，查詢條件的下拉框又被初始化。如圖：
如果我們能做到僅僅重新加載查詢的結果資料，就實作了我們想要的效果，如圖：
差別就是下拉框沒有被初始化，實作了頁面的局部重新整理。
那麼，頁面的局部重新整理是如何做到的呢？筆者是用回調函數來實作的。上一篇博文中筆者分享了自己做級聯的經驗，現在就舉一個簡單的填充查詢資料的例子。
這是我們通過查詢要顯示的頁面部分代碼：
<tr>
<tdcolspan="8"id="courseMappingAjax">
<tableborder="1">
<c:forEachitems="${courseMappingVOList}"var="courseMapping">
<tr>
<tdwidth="100px"><inputtype="checkbox"name="selectFlag" id="selectFlag"value="${courseMapping.id}"></td>
<tdwidth="100px"><c:outvalue="${courseMapping.grade}"/></td>
<tdwidth="100px"><c:out value="${courseMapping.eduLevelName}"/></td>
<tdwidth="150px"><c:out value="${courseMapping.specialName}"/></td>
<tdwidth="150px"><c:out value="${courseMapping.courseName}"/></td>
<tdwidth="150px"><c:out value="${courseMapping.uniExamCourseName}"/></td>
<tdwidth="150px"><c:out value="${courseMapping.lastOprPeople}"/></td>
<tdwidth="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;
}
}
}
這樣，我們就實作了局部重新整理頁面。