今天，在上xml课的时候，吴旻昊在做项目中，需要在网页中直接操作xml文件，我给大家举一个
小案例，希望对各位有帮助:
首先建立一个student.xml文档如下 ,该文档描述了一些学生信息
<?xml version="1.0" encoding="utf-8"?>
<StuList>
<stu id="00恭">
<stuName>张三</stuName>
<stuSex>男</stuSex>
<stuAge>20</stuAge>
<stuGrade>90</stuGrade>
</stu>
<stu id="00喜">
<stuName>李四</stuName>
<stuSex>女</stuSex>
<stuAge>18</stuAge>
<stuGrade>99</stuGrade>
</stu>
<stu id="00发">
<stuName>王五</stuName>
<stuSex>男</stuSex>
<stuAge>22</stuAge>
<stuGrade>50</stuGrade>
</stu>
<stu id="00财">
<stuName>刘六</stuName>
<stuSex>女</stuSex>
<stuAge>17</stuAge>
<stuGrade>80</stuGrade>
</stu>
</StuList>
我要达到的效果是通过点击下一个学生按钮，和上一个学生，可以显示不同的学生
现在，我写一个testXml.html文件，去访问student.xml文件,testXml.html文件如下:
<html>
<head>
<script language="JavaScript">
<!--
var i = -1;
//创建一个active对象
var StuDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
//加载xml文件
StuDoc.load("student.xml");
//选中节点
var items = StuDoc.selectNodes("/StuList/stu");
function getNode(doc, xpath) {
var retval = "";
var value = doc.selectSingleNode(xpath);
if (value) retval = value.text;
return retval;
}
//得到下一个学生
function getNextStu() {
i++;
if (i > items.length - 1) i = 0;
document.forms[0].name.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuName");
document.forms[0].sex.value = getNode(StuDoc,"/StuList/stu[" + i + "]/stuSex");
document.forms[0].age.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuAge");
document.forms[0].grade.value = getNode(StuDoc,"/StuList/stu["+ i + "]/stuGrade");
}
//得到前一个学生
function getPreStu() {
i--;
if (i < 0) i = items.length - 1;
document.forms[0].name.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuName");
document.forms[0].sex.value = getNode(StuDoc,"/StuList/stu[" + i + "]/stuSex");
document.forms[0].age.value = getNode(StuDoc, "/StuList/stu[" + i + "]/stuAge");
document.forms[0].grade.value = getNode(StuDoc,"/StuList/stu["+ i + "]/stuGrade");
}
// -->
</script>
</head>
<body onload="getNextStu()">
<h2>访问学生信息</h2>
<form>
<table border="1">
<tr><td>姓名</td><td><input type="text" name="name"></td></tr>
<tr><td>性别</td><td><input type="text" name="sex"></td></tr>
<tr><td>年龄</td><td><input type="text" name="age"></td></tr>
<tr><td>成绩</td><td><input type="text" name="grade"></td></tr>
</table>
<input type="button" value="上一个学生" onClick="getPreStu();">
<input type="button" value="下一个学生 " onClick="getNextStu();">
</form>
</body>
</html>
如何使用案例: 非常简单，
1：只要将 土色部分 保存为一个student.xml文件，注意文件名不要修改,
如果要修改，则需要在testXml.html文件 //加载xml文件 StuDoc.load("student.xml"); 作对应的修改
2：将绿色部分 保存为testXml.html文件(该文件名可以随意)
3：将student.xml和testXml.html文件放入到同一文件夹下就可以使用了,用ie打开testXml.html就会看到
图一：
图二：
- 大小: 12.5 KB
- 大小: 12 KB
分享到：
相关推荐
假设你需要从一个XML文件中提取特定的信息并显示在网页上，你可以按照以下步骤操作： 1. **读取XML文件**：使用`fetch`或`XMLHttpRequest`。 2. **解析XML文档**：使用`DOMParser`将字符串转换为`XMLDocument`对象...
标题"xml.rar_javascript_javascript xml_xml javascript_xml文件"暗示了我们关注的重点是如何使用JavaScript来解析和操作XML。以下是一些关键知识点： 1. **创建XML对象**： JavaScript中，可以通过`...
总结来说，Node.js结合`xml2js`库提供了强大且灵活的XML处理能力，使JavaScript开发者能够轻松地在服务器端进行XML文件的读写操作。通过理解这一实例，你可以更好地掌握在Node.js环境中使用JavaScript处理XML的技巧...
例如，使用`XMLHttpRequest`对象可以异步加载XML文件，然后通过`document.createElement`、`node.appendChild`等方法解析和操作XML数据。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data....
在JavaScript中获取XML文件的数据是一项常见的任务，尤其在前端开发中，当需要处理服务器返回的XML数据时。本文将深入探讨如何使用JavaScript来解析和操作XML文件，以便从中提取所需的信息。 首先，我们需要理解XML...
在压缩包中，还包含了一些HTML文件，如ax.html、m.html等，它们可能用于展示从XML文件中提取的数据。通过JavaScript，我们可以动态地修改这些HTML页面的内容，将XML数据呈现给用户。例如，可以创建一个新的DOM元素，...
这篇博文通过"xmldom.js"这个文件，很可能是介绍如何在JavaScript环境中解析和操作XML数据。 XML（eXtensible Markup Language）是一种标记语言，常用于数据交换、存储和传输。它允许自定义标签来描述数据结构，...
在提供的压缩包文件中，`index.jsp`可能是包含JavaScript代码的网页，`myaddresshtml.rar`可能是一个包含HTML文件的压缩文件，而`stu.xml`则是一个可能用于JavaScript操作的实际XML文件，包含了如学生信息等数据。
当需要在JavaScript中处理XML文件时，可以利用浏览器提供的DOM（Document Object Model）解析器或者Ajax（异步JavaScript和XML）技术来实现。以下是一些关于如何在JavaScript中读取XML文件的关键知识点： 1. **DOM...
JavaScript是一种广泛应用于Web开发的脚本语言，尤其在处理页面交互和动态内容更新方面表现出色。...在提供的“JavaScript节点操作xml.docx”文件中，你将找到更多详细的示例和解释，进一步巩固这些技能。
JavaScript操作XML是Web开发中的一个重要话题，特别是在早期的网页应用中，XML被广泛用于数据交换和存储。XML（eXtensible Markup Language）是一种结构化数据格式，它允许开发者定义自己的标记来组织和存储数据。...
在XML文件中，还可能遇到特殊字符，比如CDATA区段，它允许在XML文档中包含原始文本，而不会被XML解析器处理。CDATA区段通过标记<![CDATA[ 和 ]]>界定。例如，在示例XML文件中，“张三”的名字就是用CDATA区段来包含...
在JSP中操作XML文件时，可能需要以下步骤： 1. 加载XML文件：使用Java的`DocumentBuilderFactory`和`DocumentBuilder`来解析XML文件并生成`Document`对象。 2. 遍历XML文档：通过`Document`对象访问XML的节点结构，...
本文将详细介绍如何使用JavaScript读取XML文件以及如何获取文件中的特定内容。 #### JavaScript与XML交互基础 1. **创建XMLHttpRequest对象**： - 首先，需要创建一个`XMLHttpRequest`对象来发送HTTP请求。这个...
在JavaScript中，读取服务器端的XML文件通常涉及到AJAX（Asynchronous JavaScript and XML）技术，尤其是现代浏览器中广泛使用的XMLHttpRequest对象或其更高级的版本——fetch API。在本例中，我们将探讨如何使用...
MSXML分析器通常包含在以下文件中： - `Msxml.dll` - `Msxml2.dll` - `Msxml3.dll` - `Msxml4.dll` - `Msxml5.dll` - `Msxml6.dll` 此外，Microsoft .NET Framework 2.0附带了自己的XML分析器——`System.xml`和`...
- **AJAX（Asynchronous JavaScript and XML）**：是JavaScript访问XML文件的主要方式。通过创建XMLHttpRequest对象，我们可以实现异步地向服务器发送请求，并在不刷新页面的情况下接收响应，包括XML文件。通常，...
JavaScript（简称JS）是一种广泛用于Web开发的轻量级编程语言，它被设计用来操作HTML文档，但同样也可以处理XML...此外，考虑到兼容性问题，通常会在项目中引入jQuery或其他库，它们提供了更友好的API来处理XML文件。