JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip

在JavaScript中，读取XML文件并将其数据展示在HTML表格中是一项常见的任务，尤其是在处理服务器返回的数据时。本文将详细讲解如何使用JavaScript实现这一功能，并确保兼容Internet Explorer（IE）和Firefox这两种主流浏览器。 我们需要理解XML（Extensible Markup Language）是一种用于存储和传输结构化数据的标记语言。XML文件通常包含一系列的元素、属性和文本内容，可以用来表示复杂的数据结构。而HTML表格（`<table>`元素）则是展示结构化数据的一种常见方式。 1. **创建HTML结构** 在HTML页面中，我们先创建一个空的`<table>`元素，准备用于填充从XML文件解析出的数据。可以定义表格的ID，以便之后通过JavaScript引用： ```html <table id="dataTable"> <thead> <tr> <!-- 这里将动态添加表头 --> </tr> </thead> <tbody> <!-- 这里将动态添加数据行 --> </tbody> </table> ``` 2. **读取XML文件** - **对于IE**：使用ActiveXObject，这是IE特有的对象，可以创建XMLHttpRequest对象。代码如下： ```javascript var xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "your_xml_file.xml", false); // 同步请求 xhr.send(); var xml = xhr.responseXML; ``` - **对于其他现代浏览器（包括Firefox）**：使用XMLHttpRequest对象的通用实现。 ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "your_xml_file.xml", false); // 同步请求 xhr.overrideMimeType("text/xml"); // 针对FF防止返回JSON xhr.send(); var xml = xhr.responseXML; ``` 3. **解析XML数据** 通过DOM（Document Object Model）接口，我们可以遍历XML文档，提取数据。例如，假设XML文件有以下结构： ```xml <data> <row> <column1>Value1</column1> <column2>Value2</column2> </row> <!-- 更多行... --> </data> ``` 我们可以这样解析： ```javascript var rows = xml.getElementsByTagName('row'); for (var i = 0; i < rows.length; i++) { var row = rows[i]; var columns = row.getElementsByTagName('column'); var column1 = columns[0].textContent; var column2 = columns[1].textContent; // 添加到表格 addDataToTable(column1, column2); } ``` 4. **将数据添加到表格** 创建函数`addDataToTable`，负责动态插入表格行和单元格： ```javascript function addDataToTable(column1, column2) { var table = document.getElementById('dataTable'); var newRow = table.insertRow(-1); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); cell1.innerHTML = column1; cell2.innerHTML = column2; } ``` 5. **兼容性处理** 考虑到IE和其他浏览器在处理XML和DOM上的差异，可能需要进行一些兼容性调整。例如，`textContent`在IE中可能是`innerText`，`getElementsByTagName`在IE9及以下版本可能不支持命名空间。 6. **异步请求** 为了用户体验，通常我们会使用异步请求XML文件。这时，解析和添加数据的操作需要放在`xhr.onreadystatechange`或`xhr.onload`事件中。 至此，你已经掌握了在JavaScript中读取XML文件并以HTML表格形式展示数据的方法，同时兼容了IE和Firefox。请注意，实际应用中应考虑错误处理和更复杂的XML结构。