在javascript中操作(访问)xml文件

最新推荐文章于 2022-09-28 14:32:08 发布
最新推荐文章于 2022-09-28 14:32:08 发布
阅读量154 收藏 1
点赞数
文章标签： XML JavaScript IE HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stbrief/article/details/83529703
版权
今天，在上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 οnlοad="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就会看到

图一：
图二：
stbrief
关注
JavaScript操作XML文件之XML读取方法
10-24
在XML文件中，还可能遇到特殊字符，比如CDATA区段，它允许在XML文档中包含原始文本，而不会被XML解析器处理。CDATA区段通过标记<![CDATA[ 和 ]]>界定。例如，在示例XML文件中，“张三”的名字就是用CDATA区段来包含...
用javascript去调用 xml文件
熙多的专栏
02-26 1037
最近在项目中考虑到访问性能的问题，已经对内页等做生成静态处理了，但是里面有些内容又是需要动态的，所以要用DIV+JS+XML的方式去架构，使用JS调XML数据，而XML直接用动态脚本程序去生成，WEB端不管这些。 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
JavaScript操作XML文件(1)读取
java619
11-07 1261
/***************************************Author:Java619*Time:2006-11-07**************************************/假设我们现在要读取下面的 info.xml 文件 xml version="1.0" encoding="gb2312"?>root>  data id="1">    
JavaScript实现解析xml文件数据
m0_70015558的博客
05-26 1万+
​ 用js来解析xml文件，xml格式的数据很普遍，特别是一些老项目普遍都用xml格式的数据。在ajax里有个responseXML就返回的是xml格式的数据，下面是js如何解析xml文件，获得里面的数据。话不多说，直接上传。 ​.........
js处理xml文件
Jane's Blog
09-28 2375
js 操作xml数据
xml.rar_javascript_javascript xml_xml javascript_xml文件
09-22
标题"xml.rar_javascript_javascript xml_xml javascript_xml文件"暗示了我们关注的重点是如何使用JavaScript来解析和操作XML。以下是一些关键知识点： 1. **创建XML对象**： JavaScript中，可以通过`...
javascript实现加载xml文件的方法
10-23
6. 跨域问题：如果XML文件存储在与JavaScript代码不同的域上，那么可能会遇到浏览器同源策略的限制，导致无法访问该文件。解决此问题的方法包括服务器端设置CORS策略、使用JSONP方法或者在服务器端进行代理转发等。
JavaScript读取xml文件内容.zip
01-29
在压缩包中，还包含了一些HTML文件，如ax.html、m.html等，它们可能用于展示从XML文件中提取的数据。通过JavaScript，我们可以动态地修改这些HTML页面的内容，将XML数据呈现给用户。例如，可以创建一个新的DOM元素，...
Javascript里使用Dom操作Xml
10-31
本文将详细介绍如何在JavaScript中使用DOM来操作XML。 #### 二、IXMLDOMDocument / DOMDocument简介 **IXMLDOMDocument** 和 **DOMDocument** 是用于处理XML文档的核心对象。它们提供了多种方法和属性来帮助开发者...
juice:这是一个网页抓取的核心实现，可以方便的引用到其他项目，所有的配置都在一个xml文件中，配置项简单丰富。程序运行稳定高效
06-07
juice 这是一个网页抓取的核心实现，可以方便的引用到其他项目，所有的配置都在一个xml文件中，配置项简单丰富。程序运行稳定高效。
javascript读取XML文件中的值
韶光
06-13 1万+
在xml文件里写好变量，该文件命名为xmlfile.xml &lt;VideoConfig&gt; &lt;video1&gt;video1.mp4&lt;/video1&gt; &lt;video2&gt;video2.mp4&lt;/video2&gt; &lt;video3&gt;video3.mp4&lt;/video3&gt; &lt;video4&gt;vi
用js如何实现读取xml数据并且显示在html中
有问题可关注公众号：前端研究院 后台输入问题回复
10-23 1万+
DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。在本例中，将讲解用js如何实现读取xml数据并且显示在html中。感谢分享http://jingyan.baidu.com/article/1709ad8067b5804634c4f0ef.html 方法
JavaScript学习（三）——利用javascript访问XML文件
archer的技术故事
03-13 862
利用javascript访问XML文件 今天在学习JavaScript的时候，发现可以读取XML文件，下面是读取XML文件的一个例子程序。 datetest.js function testxml() { alert('测试XML'); if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { x
在html中解析xml文件(javascript 读取)
阅微草堂
09-19 5138
[html] view plain copy   xml version="1.0"?>      note>   to>Georgeto>   from>Johnfrom>   heading>Reminderheading>   body>Don't forget the meeting!body>   lastname>Simthlastname> 
JavaScript操作XML (一)
热门推荐
Ivan Song的专栏
11-20 1万+
JavaScript操作XML是通过XML DOM来完成的。那么什么是XML DOM呢？XML DOM 是：用于 XML 的标准对象模型用于 XML 的标准编程接口中立于平台和语言W3C 的标准XML DOM 定义了所有XML 元素的对象和属性，以及访问它们的方法（接口）。也就是说：XML DOM 是用于查询、添加、修改、删除XML 元素的标准。 在继续之前，我们先来了解一
javascript 创建并操作xml
路人甲的博客
04-23 5711
原地址找不到了，直接附上代码。 //测试demo $(function(){ var xmlDom=$($.parseXml("")); xmlDom.find("root").appendXml("").text("测试"); xmlDom.find("content").beforeXml(""); alert(xmlDom.xml()); }); (function($) {
学习笔记——JavaScript操作XML文件
筑梦★逐梦
03-31 1144
通过一个实例来具体了解关于JavaScript来操作XML文件特性 跨浏览器读取xml文件 function createDocument() { var xmlDoc; if(window.ActiveXObject)//IE中依靠ActiveXObject()对象和MSXML库来获取和打开xml文档 { var versions=[
【超强组合】基于VMD-白鹭群优化算法ESOA-Transformer-BiLSTM的光伏预测算研究Matlab实现.rar
最新发布
10-08
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
JavaScript操作XML文件指南
"这篇教程介绍了如何使用JavaScript操作XML文件，主要涵盖了XML文档的加载和解析方法，以及如何通过JavaScript访问和修改XML中的特定节点。" 在JavaScript中操作XML文件是Web开发中的常见任务，特别是在需要动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值