Ext2.0 与服务端XML的交互（扩展Ext.data.XmlReader ）

本文案例如下：后台使用C#写的webservice，返回一个xml串作为结果集。前端需要对xml结果解析，放入到一个表格中。

以前没用Ext的解决办法是 ：前台写xsl 转换xml ，把结果放入某个div内。。。优点是灵活多样，缺点是需要手写xsl代码，并对开发人员的dom以及css技术有比较高的要求。
现在有了漂亮贼酷的Ext ，没有理由不选它。 于是用Ext.data.XmlReader 读取服务器传回来的xml，本以为跟读取xml文件一样，读取url就ok了。但是代码一写。问题出现了。
我的代码如下：

 1 
 2 Ext.onReady(function(){ 
 3     var cm = new Ext.grid.ColumnModel([
 4         {header:'编号',dataIndex:'id'},
 5         {header:'性别',dataIndex:'sex'},
 6         {header:'姓名',dataIndex:'name'},
 7         {header:'描述',dataIndex:'descn'}
 8     ]);
 9     cm.defaultSortable = true;
10 
11     var CARTOON_WSDL_ADDR    = "http://localhost/JMAMCCTV/JUUMSystemService/UUMSystemService.asmx";
12 
13     var dataStore = new Ext.data.Store({
14                 url: CARTOON_WSDL_ADDR+'/testXmlpage',
15                 reader: new Ext.data.XmlReader({
16                     totalRecords: "results",
17                     record: "item"
18                 }, [                
19                 { name: "id" },{ name: "sex" },{ name: "name" },{ name: "descn" }
20                 ])
21             });    
22                 
23 
24 
25     var grid = new Ext.grid.GridPanel({
26             renderTo: 'testLayout',
27             ds: dataStore,
28             cm: cm,
29             height:200,
30             width:500, 
31             title: 'PagerCkp'
32         });
33         
34     dataStore.load({
35         params: {
36             pageindex:1,pageCount:2
37         },
38         callback: function(r, options, success) {
39                 //alert(dataStore.getTotalCount() ); //取得记录总数。即 results 节点中的值
40                 //alert(dataStore.getCount() ); //取得记录数。即 返回的xml中真实的记录数
41             if (success && r.length > 0) {
42                 var ss = r[0].get("id");
43                 //alert(ss);
44             }
45             else{
46             }
47         }
48     })
49 });

alert出来的dataStore.getCount始终是0 。也就是 没有读出来webservice返回的xml串。

仔细查找问题所在。查看了Ext.data.XmlReader类 的源码，看到原来Ext.data.XmlReader 直接使用了 responseXML：
 

1   var doc = response.responseXML;
2         if(!doc) {
3             throw {message: "XmlReader.read: XML Document not available"};
4         }
5         return this.readRecords(doc);

而大家知道webservice返回的responseXML 肯定是一个Xml对象。你的xml串就是被转义并放在 responseXML的根节点的text里的。比如本例：responseXML
对象的 xml 如下：

<?xml version=\"1.0\"?>
<string xmlns=\"http://www.mycompany.com/webservices/\">&lt;dataset&gt; &lt;results&gt;10&lt;/results&gt;&lt;item&gt;&lt;id&gt;1&lt;/id&gt;&lt;sex&gt;男&lt;/sex&gt;&lt;name&gt;JasonWoo&lt;/name&gt; &lt;descn&gt;US.Ny&lt;/descn&gt;&lt;/item&gt;&lt;item&gt;&lt;id&gt;2&lt;/id&gt;&lt;sex&gt;女&lt;/sex&gt;&lt;name&gt;Lucy&lt;/name&gt;&lt;descn&gt;CN.BJ&lt;/descn&gt; &lt;/item&gt;&lt;/dataset&gt;</string>

可以看到，你想要的string类型的xml串被放在<string>节点里并被转义了，Ext.data.XmlReader并没有读取到你的xml串。
找到问题后，就考虑解决办法，扩展一下Ext.data.XmlReader。 让它读取responseXML的根节点下的xml串：

  1 /**//**
  2  * @author punkChen
  3  */
  4  
  5  //先对xml对象进行封装。因为很遗憾没有找到ext对其的封装。哪位朋友找到后可以告知。
  6 function XmlDoc()
  7 {
  8     var tXmlDoc = false;
  9     if(window.ActiveXObject)
 10     {
 11         var tMsXmlDomType = ["Msxml2.DOMDocument.5.0", "Msxml2.DOMDocument.4.0", "Msxml2.DOMDocument.3.0", "MSXML2.DOMDocument", "MSXML.DOMDocument", "Microsoft.XMLDOM"];
 12         for(var i=0;i<tMsXmlDomType.length;i++)
 13         {
 14             try
 15             {
 16                 tXmlDoc = new ActiveXObject(tMsXmlDomType[i]);
 17                 tXmlDoc.setProperty("SelectionLanguage", "XPath");
 18                 break;
 19             }
 20             catch(ex){}
 21         }    
 22     }
 23     else if(document.implementation && document.implementation.createDocument)
 24     {
 25         tXmlDoc = document.implementation.createDocument("","",null);     
 26         // for safari,opera
 27         if(!tXmlDoc.load)
 28         { 
 29             tXmlDoc.async = true;
 30             tXmlDoc.hp = new XMLHttpRequest();
 31             tXmlDoc.onload = function(){};
 32             tXmlDoc.hp.hpOwner = tXmlDoc;
 33             tXmlDoc.hp.onreadystatechange = function()
 34             {
 35                 if (tXmlDoc.hp.readyState == 4)
 36                 {
 37                     var _result = tXmlDoc.hp.responseXML;          
 38                     tXmlDoc.onload(_result);   
 39                 }
 40             }
 41             tXmlDoc.hp.load = function(sUrl)
 42             {      
 43                 try
 44                 { 
 45                     this.open("GET", sUrl, this.hpOwner.async);
 46                     this.send(null);     
 47                 }
 48                 catch(ex)
 49                 {
 50                     throw "you can't connect the page using different domain,if you not config the Server-Side code";
 51                 }
 52                 if (!this.hpOwner.async)
 53                 {
 54                     var _result = this.responseXML;
 55                     while (this.hpOwner.hasChildNodes())
 56                         this.hpOwner.removeChild(this.hpOwner.lastChild);           
 57                     for (var i = 0; i < _result.childNodes.length; i++) 
 58                     {
 59                         this.hpOwner.appendChild(this.hpOwner.importNode(_result.childNodes[i], true));
 60                     }
 61                 }
 62             }    
 63             tXmlDoc.load = function(sUrl)
 64             {
 65                   tXmlDoc.hp.load(sUrl);
 66             }      
 67         }        
 68         // apply to ie
 69         tXmlDoc.onreadystatechange = function(){};    
 70         tXmlDoc.readyState = 4;  // because other browers not this property
 71         tXmlDoc.onload = function(s)
 72         {    
 73             if(tXmlDoc.hp)
 74             {
 75                 var _result = s;
 76                 while (this.hasChildNodes())
 77                     this.removeChild(this.lastChild);           
 78                 for (var i = 0; i < _result.childNodes.length; i++) 
 79                 {
 80                     this.appendChild(this.importNode(_result.childNodes[i], true));
 81                 }       
 82             }
 83             this.readyState = 4;
 84             this.onreadystatechange(s);
 85         }      
 86         //apply load xml string funciton
 87         tXmlDoc.loadXML = function (s) 
 88         {   
 89             var doc2 = (new DOMParser()).parseFromString(s, "text/xml");  
 90             var roottag = doc2.documentElement;
 91             if ((roottag.tagName == "parserError") || (roottag.namespaceURI == "http://www.mozilla.org/newlayout/xml/parsererror.xml"))
 92             {
 93                 var _sourceText = roottag.lastChild.firstChild.nodeValue;
 94                 throw ("load XML by string happen error,error detail:\n" + roottag.firstChild.nodeValue+"\n"+_sourceText);
 95                 return false;
 96             }    
 97             while (this.hasChildNodes())
 98                 this.removeChild(this.lastChild);           
 99             for (var i = 0; i < doc2.childNodes.length; i++) 
100             {
101                 this.appendChild(this.importNode(doc2.childNodes[i], true));
102             }
103             this.onreadystatechange();     
104         }
105     }
106     if(!tXmlDoc)
107     {
108         throw ("Can not create xml doc object!");
109     }
110     return tXmlDoc;
111 }
112 
113 
114 //扩展Ext.data.XmlReader
115 Ext.data.XmlReaderExForService = Ext.extend(Ext.data.XmlReader, {
116 
117     read : function(response){
118         var tmpdoc = response.responseXML;
119         if(!tmpdoc) {
120             throw {message: "XmlReader.read: XML Document not available"};
121         }
122                 
123         var doc = new XmlDoc();
124         
125         if(window.ActiveXObject){
126             doc.loadXML(tmpdoc.text);
127         }
128         else{
129             doc.loadXML(tmpdoc.firstChild.textContent);
130         }
131         if(!doc) {
132             throw {message: "XmlReader.read: XML Document not available"};
133         }
134         return this.readRecords(doc);
135     },
136 
137     
138     readRecords : function(doc){
139         
140         this.xmlData = doc;
141         var root = doc.documentElement || doc;
142         var q = Ext.DomQuery;
143         var recordType = this.recordType, fields = recordType.prototype.fields;
144         var sid = this.meta.id;
145         var totalRecords = 0, success = true;
146         if(this.meta.totalRecords){
147             totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
148         }
149 
150         if(this.meta.success){
151             var sv = q.selectValue(this.meta.success, root, true);
152             success = sv !== false && sv !== 'false';
153         }
154         var records = [];
155         var ns = q.select(this.meta.record, root);
156         for(var i = 0, len = ns.length; i < len; i++) {
157             var n = ns[i];
158             var values = {};
159             var id = sid ? q.selectValue(sid, n) : undefined;
160             for(var j = 0, jlen = fields.length; j < jlen; j++){
161                 var f = fields.items[j];
162                 var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
163                 v = f.convert(v, n);
164                 values[f.name] = v;
165             }
166             var record = new recordType(values, id);
167             record.node = n;
168             records[records.length] = record;
169         }
170 
171         return {
172             success : success,
173             records : records,
174             totalRecords : totalRecords || records.length
175         };
176     }
177 });
178 
179 Ext.reg('xmlreaderexfor', Ext.data.XmlReaderExForService);

把这个js文件引入到页面上，最后把原来第一段代码中的reader定义改为新的xmlreader即可：

reader: new Ext.data.XmlReaderExForService

在IE 7.0 和 firefox2.0 下测试通过。