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