目錄表

,

XML Parser

Problem

在使用Ext.Ajax請求後，免不了需要去處理回應的內容: 

Ext.Ajax.request({
  url: 'requestURL.action',
  params: {
    key: aKey
  },
  success: function(response){
    var xml = response.responseXML;
    // Handler the response
  },
  failure : function(response, options){ 
    Ext.example.msg('Warning', 'Connect to server failed: ' + response.status);
  }
});

我期望會取得的結果為: 

<result>
  <status>false</status>
  <msg>Validation failed.</msg>
</result>

一般正規的原始做法如下: Download Sample 

var text = "<result><status>false</status><msg>test msg</msg></result>";
 
var xmlDoc = null;
if( window.DOMParser ){
	var parser = new DOMParser();
	xmlDoc = parser.parseFromString(text,"text/xml");
} else {
	xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.loadXML(text); 
}
 
var statusNode = xmlDoc.getElementsByTagName ("status")[0];
var msgNode = xmlDoc.getElementsByTagName ("msg")[0];
var status = statusNode.textContent == null ? statusNode.text : statusNode.textContent;
var msg = msgNode.textContent == null ? msgNode.text : msgNode.textContent;
雖然說在ExtJS中取得的response.responseXML已經是DOM Document物件，但要去retrieve DOM Element還是必須根據不同瀏覽器要有不同做法。可以參考這個連結中對DOM Document各屬性與方法的瀏覽器支援表。重點是在ExtJS中，有什麼較一致的做法呢?

How to?

一開始我就想到應該可以用XMLReader，但看看sample卻發現要直接取用Element中的資料並不是那麼容易，而且Reader大都與Store搭配。於是我想: 我可以定義一個描述XML的Model，再透過Store去存取它。由於我Server-Side回應Client的格式大都一樣，所以定義對應的model可以讓我之後reuse: 

Ext.define('ServerResponseModel', {    
   	extend: 'Ext.data.Model',
       fields: ['status', 'msg']
});
 
Ext.define('ServerResponseStore', {
	extend: 'Ext.data.Store',
	model: 'ServerResponseModel',
    proxy: {
    	type: 'memory',
        reader: {
        type: 'xml',
        record: 'result',                     
      }
    }
});
在這存取資料的Proxy使用了memory的type。以往都是使用Ajax的方式取得後端資料讓reader做處理，但因為我們已取得Server回傳的資料，所以需存取的是local的變數: response.responseXML。
首先透過Ext.create去產生ServerResponseStore的instance，接著透過loadRawData去讀取DOM Document，最後我們就可以透過getAt取得對應的record(result element)。拿到record後，我們就可以使用get去取得對應的內容了。 
success: function(response){
  var xml = response.responseXML;
  var store = Ext.create('ServerResponseStore');
 
  store.loadRawData(xml);
 
  var result = store.getAt(0);
 
  var msg = result.get('msg');
  var status = result.get('status');
  if( status == 'false' ){
    window.alert('Failed:' + msg);
  } else {
    window.alert('Execute command successfully.');
  }
}

友藏內心獨白: 寫ExtJS其實花的時間比寫一般Javasript還花時間! 可能還不夠熟悉吧!

Reference