Teambiz中前臺頁面對XHR對象從后臺取回的XML的處理
作者：何楊
撰寫日期：2012年2月24日
版本：1.00
更新日期：2012年2月25日
第一部分：功能說明
XHR從后臺得到XML文本后，使用DOM對其進行解析。
第二部分：核心組件
| 名稱 | 路徑 | 說明 |
| Ajax.Request | teambiz\WebRoot\page\js\prototype-1.6.0.3.js | Prototype提供的Ajax請求對象，它將被用來想后臺發(fā)出異步請求并獲取反饋。 |
| ajaxObj | 無 | 它就是XMLHttpRequest對象（簡稱XHR）。 |
| ajaxObj.responseText | 無 | XHR對象獲得的反饋文本，在需要查看反饋的XML時會用到它。 |
| ajaxObj.responseXML | 無 | XHR對象獲得的反饋XML，也是前端需要解析的數(shù)據(jù)來源。 |
| status | 無 | 反饋XML第一個status節(jié)點的值，當(dāng)它為ok是意味著順利得到了后端傳來的信息；當(dāng)它為ng意味著前后端通道是通暢的，但由于某種原因不能獲得想要的數(shù)據(jù)，這個原因可能是用戶缺乏權(quán)限，后端組件未準(zhǔn)備好，后他SQL調(diào)用出現(xiàn)異常或是運行異常。這個變量需要在前后端有固定約定才能發(fā)揮功用。 |
| arr | 無 | 包含反饋XML中所有node節(jié)點的數(shù)組。它也依賴于前后端有固定的約定。這是一個臨時變量，真正發(fā)揮功用的是tableDatas。 |
| tableDatas | 無 | 它本身是一個數(shù)組，而內(nèi)部元素也是一個數(shù)組，正如其名稱描述的那樣，它是一個表格形式的數(shù)據(jù)，它的“行”相當(dāng)于SQL查詢結(jié)果集的行，它的“列”相對于結(jié)果集的字段值集合，它的“單元格”就是數(shù)據(jù)。 之所以采用這個對象是因為在使用上相對于arr更加方便，進行一次遍歷再通過數(shù)組下標(biāo)就能訪問到每個數(shù)據(jù)。 |
第三部分：三種前臺對取回XML的處理
1.如果前臺僅需status一個量。
有時，前臺僅需status就能進行判定后臺是否實現(xiàn)了自己的目的，如進行登錄，變更等操作，對status直接進行判斷即可，對后臺進行CUD操作常會這樣處理，示例代碼如下：
new Ajax.Request(url,{
method:'get',
onSuccess: function(ajaxObj){
// alert(ajaxObj.responseText);
hideLoadingWnd();
var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;
if(status=="ok"){
window.location.href="Goto.do?page=/page/jsp/task/tododone/index.jsp";
}
else{
// 返回錯誤信息
hideLoadingWnd();
var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
alert(text);
}
},
onFailure: function(){
hideLoadingWnd();
alert("服務(wù)器沒有響應(yīng).");
}
}
);
以上代碼所在路徑：teambiz\WebRoot\page\jsp\user\login\javascript.jsp中submitForm函數(shù)。
2.如果前臺需要按照節(jié)點名稱取出傳回XML的值。
有時，前臺需要明確取出某個名稱的節(jié)點值（意圖獲得后臺處理的狀態(tài)），這時可以如同取出status的值一樣，從ajaxObj中取出想要的值，示例代碼如下：
var currentPage=ajaxObj.responseXML.getElementsByTagName("currentPage")[0].firstChild.data;
var recordCount=ajaxObj.responseXML.getElementsByTagName("recordCount")[0].firstChild.data;
var pageCount=ajaxObj.responseXML.getElementsByTagName("pageCount")[0].firstChild.data;
// 設(shè)置分頁數(shù)據(jù)
setPage(recordCount,currentPage,pageCount);
以上代碼路徑：teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中search函數(shù)。
3.如果前臺需要表格形式的數(shù)據(jù)
對后臺的查詢操作常進行這種處理，這時需要用到系統(tǒng)轉(zhuǎn)化出來的tableDatas對象，示例代碼如下：
/*****************************************************
* 取得后方菜單
* 何楊，2012年2月7日11:40:34
*****************************************************/
function fetchMenuFromBg(){
$("menuBar").innerHTML="";
// 組合URL
var url=encodeURI('FetchMenu.do?');
url=encodeURI(url);
// 發(fā)出Ajax請求
new Ajax.Request(url,{
method:'get',
onSuccess: function(ajaxObj){
// alert(ajaxObj.responseText);
var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;
if(status=="ok"){
// 找到所有節(jié)點放入數(shù)組
var arr=ajaxObj.responseXML.getElementsByTagName("node");
if(arr.length==0){
alert("沒有得到返回數(shù)據(jù).");
}
var tableDatas=new Array();
// 遍歷這個數(shù)組
for(var i=0;i<arr.length;i++){
var node=arr[i];
var arr2=new Array();
for(var j=0;j<node.childNodes.length;j++){
var child=node.childNodes.item(j); arr2.push(child.childNodes[0].nodeValue);
}
// 向表格中添加行
tableDatas.push(arr2);
}
// 顯示菜單
showMenu(tableDatas);
}
else{
var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
alert(text);
}
},
onFailure: function(){
hideLoadingWnd();
alert("服務(wù)器沒有響應(yīng).");
}
}
);
};
/*****************************************************
* 顯示菜單
* 何楊，2012年2月7日14:03:43
*****************************************************/
function showMenu(tableDatas){
var ul=document.createElement("ul");
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
var text=arr[0];
var url=arr[1];
var link=document.createElement("a");
link.appendChild(document.createTextNode(text));
link.setAttribute("href", url);
var li=document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
$("menuBar").appendChild(ul);
}
以上代碼路徑：teambiz\WebRoot\page\js\common.js，其中tableDatas的產(chǎn)生用getTableDatasFromArr進行了一定程度的簡化。
第四部分：使用步驟
| 步驟 | 說明 | 參照 |
| 編寫向后端發(fā)起請求的函數(shù) | 請參照上面的fetchMenuFromBg函數(shù)書寫新函數(shù)，主要需要修改的地方在URL和處理tableDatas的函數(shù)，其它部分無需變化。 | teambiz\WebRoot\page\js\common.js中的fetchMenuFromBg函數(shù)。 |
| 編寫處理tableDatas的函數(shù)（可選） | 遍歷方式請參照上面的showMenu函數(shù)，取得數(shù)據(jù)后進行DOM操作需要自行處理。 | teambiz\WebRoot\page\js\common.js中的showMenu函數(shù)。 |
第五部分：小結(jié)
在前后臺有一定約定的前提下（status，node），通過一系列對象的配合，我們輕松完成從SQL查詢結(jié)果集到前臺能使用的結(jié)果集的轉(zhuǎn)換，這些對象及其使用方法絕大多數(shù)都是固定的或是僅需稍加改變的，程序員主要需要考慮的是最初的SQL語句和最終的DOM處理過程，中間只用按部就班的完成裝配工作。
這種方式的優(yōu)勢在于：
1.減輕了編碼量，同時也減少了出錯的可能。
2.易用，因為SQL相對于HQL更容易被人接受。
3.比頁面循環(huán)標(biāo)簽更具表現(xiàn)性。
這種方式的主要缺點在于：
1. JS和DOM操作需要程序員加以小心。
2.如果字段含有特殊字符可能會造成XML解析異常,但對此無需過于擔(dān)心，需要注意的多在備注這樣的字段中，可以在需要特殊處理再進行處理。