跳到主要內容

ExtJS - 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>

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

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還是必須根據不同瀏覽器要有不同做法。重點是在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.');
  }
}

留言

這個網誌中的熱門文章

PostgreSQL - Unattended installation on windows

Introduction 要將別人軟體包裝到自己軟體中,不可或缺的東西就是Unattended installation。以Unattended installation來說,我們可以選擇透過Installer的silent mode安裝,也可以透過把目標軟體做成portable的版本。本篇文章分享這兩種方法,教導大家如何將PostgreSQL透過Unattended installation方式安裝到目標系統成為service。 Note. 本篇以PostgreSQL 10.7為例。 Install with installer Tips 安裝程式或反安裝程式的參數,除了可以直接上官網搜尋Installation User Guide以外,也可以直接使用help參數查詢: postgresql- 10.7 - 2 -windows-x64.exe --help Windows安裝程式主要有EnterpriseDB與BigSQL兩種。BigSQL版本安裝元件是透過網路下載且支援參數不如EnterpriseDB版本多,以我們需求來說,我們傾向於使用EnterpriseDB版本。接下來分享給大家安裝與反安裝方法。 Installation @ echo off set INSTALL_DIR =C:\postgres10 set INSTALLER =postgresql- 10.7 - 2 -windows-x64.exe   rem options for installation set SSMDB_SERVICE =postgresql- 10 set MODE =--unattendedmodeui none --mode unattended   set DB_PASSWD =--superpassword postgres set DB_PORT =--serverport 5432   set SERVICE_NAME =--servicename % SSMDB_SERVICE %   set PREFIX =--prefix "%INSTALL_DIR%" set DATA_DIR =--datadir "%INSTALL_DIR%\data"   set OPTIONS =

How to install RIDE on Windows?

Introduction 多年沒在Windows上開發RobotFramework,趁著這次整理一下RIDE安裝方法。 目前RIDE最新版本與Python對應版本如下: (3.6 < python <= 3.11) Install current released version (2.0.8.1) with: pip install -U robotframework-ride 安裝Python 直接到Python官網找尋最新的3.11版本,我使用3.11.9: link 。安裝就是一直下一步而已。 安裝wxPython 每次安裝RIDE最困難的都是wxPython。看了一下 官網 描述,我就姑且相信一下: 接著進入下 載頁面 就有安裝教學。基本上就是到Python目錄下的Scripts直接執行以下command: pip install -U wxPython 安裝RIDE 接著就如RIDE官網所說,執行以下command: pip install -U robotframework-ride 啟動RIDE 直接在相同目錄下執行ride就可以啟動了,你也可以直接在桌面建ride連結,加快下次啟動時間。 沒想到這次這麼順利就安裝完成了。因為我是使用java去啟動robot framework,就不特別講要怎麼使用pip安裝robot framework了。

Hello World!

即將要搬家,因此舊網頁內容將慢慢轉移至Blogger。 如果要存取舊網頁,可以使用以下連結: https://wiki.tonylin.idv.tw/dokuwiki/doku.php