Ext解析XML实例

根据提供的信息，我们可以深入探讨如何使用ExtJS框架解析XML数据并将其转化为树形结构的过程。以下将详细解析标题、描述及部分代码中的关键知识点。 ### Ext解析XML实例 #### 核心概念 - **ExtJS**：一个用JavaScript编写的前端框架，用于构建交互式的Web应用程序。 - **XML**（可扩展标记语言）：一种用于存储和传输数据的标准格式，它以人类可读的形式定义了数据结构。 - **树形结构**：在计算机科学中，树是一种抽象的数据类型，用来模拟具有层次关系的结构集合。 #### 关键步骤详解 ##### 步骤一：加载和解析XML数据 ```javascript function loadXML(xmlStr) { if (!xmlStr) return null; // 空串返回null if (window.ActiveXObject) { // IE浏览器 var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); } else if (document.implementation && document.implementation.createDocument) { // 非IE浏览器 var xmlDom = document.implementation.createDocument("", "doc", null); } xmlDom.async = false; try { xmlDom.loadXML(xmlStr); // 尝试加载XML字符串 } catch (e) { // 非IE浏览器处理 var oParser = new DOMParser(); xmlDom = oParser.parseFromString(xmlStr, "text/xml"); } return xmlDom; } ``` 这段代码实现了跨浏览器兼容的XML解析功能。`loadXML`函数接收一个XML字符串作为参数，并尝试创建一个XML文档对象模型（DOM）。在IE浏览器中，通过`ActiveXObject`实现；对于其他浏览器，则使用`DOMParser`或`document.implementation.createDocument`方法。 ##### 步骤二：构建树形结构 ```javascript function createXmlTree(el, xmlsrc, callback) { var tree = new Ext.tree.TreePanel({ el: el, animate: true, border: false, autoHeight: true }); var xmlDom = loadXML(xmlsrc); try { // 如果是XML字符串 tree.setRootNode(treeNodeFromXml(xmlDom.documentElement || xmlDom)); callback.call(tree); } catch (e) { // 如果是URL var p = new Ext.data.HttpProxy({ url: xmlsrc || "xml/MyTest01.xml" }); p.on("loadexception", function (o, response, e) { tree.setRootNode(new Ext.tree.TreeNode("根节点")); }); p.load(null, { read: function (response) { var doc = response.responseXML; tree.setRootNode(treeNodeFromXml(doc.documentElement || doc)); } }, callback, tree); } return tree; } ``` 此段代码首先创建了一个`TreePanel`组件，用于显示树形结构。接着，根据传入的`xmlsrc`参数类型（XML字符串或URL），选择不同的处理方式。如果是XML字符串，则直接调用`treeNodeFromXml`函数来构建树形结构；如果是URL，则通过`Ext.data.HttpProxy`异步加载XML数据，并在数据加载完成后构建树形结构。 ##### 步骤三：从XML元素构建树节点 ```javascript function treeNodeFromXml(XmlEl) { var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName); if (t.replace(/\s/g, '').length == 0) { return null; // 如果是空文本节点则忽略 } var node = new Ext.tree.TreeNode({ text: t, leaf: !XmlEl.hasChildNodes() }); for (var i = 0, len = XmlEl.childNodes.length; i < len; i++) { var childNode = treeNodeFromXml(XmlEl.childNodes[i]); if (childNode) { node.appendChild(childNode); } } return node; } ``` 该函数递归地遍历XML文档中的每个节点，并将其转换为`TreeNode`对象。如果当前节点没有子节点，则设置`leaf`属性为`true`，表示这是一个叶子节点。此外，还会检查是否为空文本节点，如果是，则直接返回`null`以忽略该节点。 ### 总结 通过上述步骤，我们成功地使用ExtJS框架解析了XML数据，并将其转化为树形结构进行展示。这种方法不仅能够高效地处理XML数据，还能提供丰富的用户界面体验。在实际应用中，可以根据具体需求调整树形结构的表现形式以及数据处理逻辑。