差異處

這裏顯示兩個版本的差異處。

--- java:web:ext:xmlparser [2013/07/08 18:16]
tony 建立
+++ java:web:ext:xmlparser [2023/06/25 09:48] (目前版本)
@@ 行 2: / 行 2: @@
 ====== XML Parser ======
 ===== Problem =====
-在Ext的Ajax請求後，免不了需要去處理回應的內容:
+在使用Ext.Ajax請求後，免不了需要去處理回應的內容:
 <code javascript>
 Ext.Ajax.request({
@@ 行 18: / 行 18: @@
 });
 </code>
-一般正規的原始做法如下:
+我期望會取得的結果為:
+<code xml>
+<result>
+  <status>false</status>
+  <msg>Validation failed.</msg>
+</result>
+</code>
-===== How to? =====
+一般正規的原始做法如下: {{:java:web:ext:example_xml_parser.zip|Download Sample}}
+<code javascript>
+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;
+</code>
+雖然說在ExtJS中取得的response.responseXML已經是DOM Document物件，但要去retrieve DOM Element還是必須根據不同瀏覽器要有不同做法。可以參考這個[[http://www.w3schools.com/dom/dom_document.asp|連結]]中對DOM Document各屬性與方法的瀏覽器支援表。重點是在ExtJS中，有什麼較一致的做法呢?
+===== How to? =====
+一開始我就想到應該可以用[[http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Xml|XMLReader]]，但看看sample卻發現要直接取用Element中的資料並不是那麼容易，而且Reader大都與Store搭配。於是我想: 我可以定義一個描述XML的Model，再透過Store去存取它。由於我Server-Side回應Client的格式大都一樣，所以定義對應的model可以讓我之後reuse:
+<code javascript>
+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',
+      }
+    }
+});
+</code>
+在這存取資料的Proxy使用了memory的type。以往都是使用Ajax的方式取得後端資料讓reader做處理，但因為我們已取得Server回傳的資料，所以需存取的是local的變數: response.responseXML。\\
+首先透過Ext.create去產生ServerResponseStore的instance，接著透過loadRawData去讀取DOM Document，最後我們就可以透過getAt取得對應的record(result element)。拿到record後，我們就可以使用get去取得對應的內容了。
+<code javascript>
+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.');
+  }
+}
+</code>
+\\
+友藏內心獨白: 寫ExtJS其實花的時間比寫一般Javasript還花時間! 可能還不夠熟悉吧!
 ===== Reference =====
   * [[http://javaclaus.wordpress.com/2010/10/12/extjs-xml-and-the-dom/|ExtJS, XML, and the DOM]]
+  * [[http://help.dottoro.com/ljssopjn.php|Dotoro - DOM Parser]]
+=====    =====
+----
+\\
+~~DISQUS~~