XML Javascript

2023-11-08 09:58•javascript•阅读 909

大多数浏览器都有读取和操作 XML 的内建 XML 解析器。

解析器把 XML 转换为 JavaScript 可访问的对象。

实例

W3School 提供的实例是独立于浏览器和平台的。这些例子可以在所有现代浏览器中运行。

加载并解析 XML 文件
加载并解析 XML 字符串

解析 XML

所有现代浏览器都有读取和操作 XML 的内建 XML 解析器。

解析器把 XML 载入内存，然后把它转换为可通过 JavaScript 访问的 XML DOM 对象。

您将在本教程的下一节中学习更多有关 XML DOM 的知识。

微软的 XML 解析器与其他浏览器中的解析器之间，存在一些差异。微软的解析器支持 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都包含遍历 XML 树、访问插入及删除节点（元素）及其属性的函数。

在本教程中，我们将为您展示如何创建可同时工作于 Internet Explorer 和其他浏览器中的脚本。

注释：当我们谈及 XML 解析，我们常常会使用有关 XML 元素的术语：节点。

通过微软的 XML 解析器来加载 XML

微软的 XML 解析器内建于 Internet Explorer 5 以及更高的版本中。

下面的 JavaScript 片段把一个 XML 文档载入解析器中：

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");

例子解释：

上面代码的第一个行创建一个空的微软 XML 文档对象。
第二行关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
第三行告知解析器加载名为 "note.xml" 的 XML 文档。

下面的 JavaScript 片段把字符串 txt 载入解析器：

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

注释：loadXML() 方法用于加载字符串（文本），load() 用于加载文件。

在 Firefox 及其他浏览器中的 XML 解析器

下面的 JavaScript 片段把 XML 文档 ("note.xml") 载入解析器：

var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");

例子解释：

上面代码的第一个行创建一个空的 XML 文档对象。
第二行关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
第三行告知解析器加载名为 "note.xml" 的 XML 文档。

下面的 JavaScript 片段把字符串 txt 载入解析器：

var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");

例子解释：

上面代码的第一个行创建一个空的微软 XML 文档对象。
第二行告知解析器载入名为 txt 的字符串。

注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

跨域访问

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

XML DOM

DOM （Document Object Model，文档对象模型）定义访问和操作文档的一套标准方法。

XML DOM

XML DOM (XML Document Object Model) 定义一套访问和操作 XML 文档的标准方法。

DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。

在下面的例子中，我们使用 DOM 引用从 <to> 元素中获取文本：

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

xmlDoc -由解析器创建的 XML 文档
getElementsByTagName("to")[0] - 第一个 <to> 元素
childNodes[0] - <to> 元素的第一个子元素（文本节点）
nodeValue - 节点的值（文本本身）

您可以在 W3School 的 XML DOM 教程中学习更多相关知识。

HTML DOM

HTML DOM (HTML Document Object Model) 定义一套访问和操作 HTML 文档的标准方法。

可以通过 HTML DOM 访问所有 HTML 元素。

在下面的例子中，我们使用 DOM 引用来改变的 HTML 元素的文本：

document.getElementById("to").innerHTML=

document - HTML 文档
getElementById("to") - 其中的的 HTML 元素
innerHTML - HTML 元素的内部文本

您可以在 W3School 的 HTML DOM 教程中学习更多相关知识。

解析 XML 文件 - 跨浏览器实例

下列代码把一个 XML 文档 ("note.xml") 载入 XML 解析器中：

<html>
<head>
<script type="text/javascript">
function parseXML()
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }
xmlDoc.async=false;
xmlDoc.load("note.xml");
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>W3School.com.cn Internal Note</h1>
<p><b>To:</b> <span ></span>
</p>
</body>
</html>

输出：

W3School.com.cn Internal Note
To: George
From: John
Message: Don't forget the meeting!

TIY

重要注释

如需从 XML 中提取文本 "John"，语法是：

getElementsByTagName("from")[0].childNodes[0].nodeValue

在这个 XML 例子中，只有一个 <from> 标签中，但是仍然需要规定数组的下标 [0]，这是因为 XML 解析器方法 getElementsByTagName() 返回所有 <from> 节点的一个数组。

解析 XML 字符串 - 跨浏览器实例

下面的代码加载并解析一个 XML 字符串：

<html>
<head>
<script type="text/javascript">
function parseXML()
{
text="<note>";
text=text+"<to>George</to>";
text=text+"<from>John</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget the meeting!</body>";
text=text+"</note>";
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }  
catch(e)
  {
  try // Firefox, Mozilla, Opera, etc.
    {
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(text,"text/xml");
    }
  catch(e)
    {
    alert(e.message);
    return;
    }
  }
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>W3School.com.cn Internal Note</h1>
<p><b>To:</b> <span ></span>
</p>
</body>
</html>

输出：

W3School.com.cn Internal Note
To: George
From: John
Message: Don't forget the meeting!

TIY

注释：Internet Explorer 使用 loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

XML to HTML

实例

把 XML 数据显示为 HTML 表格: 从 XML 文件中加载数据，然后把数据显示为一个 HTML 表格

在 HTML 中显示数据

在上一节中，我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。

本例遍历一个 XML 文件 (cd_catalog.xml)，然后把每个 CD 元素显示为一个 HTML 表格行：

<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");
document.write("<table >");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>

TIY：在 HTML 表格中显示 XML 数据。

例子解释：

检测浏览器，然后使用合适的解析器来加载 XML
创建一个 HTML 表格（<table >）
使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
针对每个 CD 节点，把 ARTIST 和 TITLE 中的数据显示为表格数据
用 </table> 结束表格

如需更多有关 JavaScript 和 XML DOM 的信息，请访问我们的 XML DOM 教程。

跨域访问

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

XMLHttpRequest 对象

XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象是开发者的梦想，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

实例：当键入文本时与服务器进行 XML HTTP 通信。

创建 XMLHttpRequest 对象

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

在所有现代浏览器中（包括 IE 7）：

xmlhttp=new XMLHttpRequest()

在 Internet Explorer 5 和 6 中：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

实例

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

注释：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

为什么使用 Async=true ？

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

TIY

XML / ASP

您也可以把 XML 文档打开并发送到服务器上的 ASP 页面，分析此请求，然后传回结果。

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP 页面，由 VBScript 编写：

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

通过使用 response.write 属性把结果传回客户端。

TIY

XMLHttpRequest 对象是 W3C 的标准吗？

任何 W3C 推荐标准均未规定 XMLHttpRequest 对象。

不过，W3C DOM Level 3 的 "Load and Save" 规范包含了一些相似的功能性，但是还没有任何浏览器实现它们。

参阅

XML DOM 参考手册: XMLHttpRequest 对象

XML 应用程序

本节演示由 HTML 和 JavaScript 构建的一个小型 XML 应用程序。

XML 文档实例

请看下面这个 XML 文档 ( "cd_catalog.xml" )，它描述了一个 CD 目录：

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
.
.
... more ...
.

在您的浏览器中查看完整的 "cd_catalog.xml" 文件。

加载 XML 文档

为了加载 XML 文档 (cd_catalog.xml)，我们使用了与 XML 解析器那一节中相同的代码：

var xmlDoc;
if (window.ActiveXObject)
  {
// code for IE
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
else if (document.implementation.createDocument)
  {
// code for Firefox, Mozilla, Opera, etc.
  xmlDoc=document.implementation.createDocument("","",null);
  }
else
  {
  alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");

在本代码执行后，xmlDoc 成为一个 XML DOM 对象，可由 JavaScript 访问。

把 XML 数据显示为 HTML 表格

以下代码使用来自 XML DOM 对象的数据来填充一个 HTML 表格：

document.write("<table >");
var x=xmlDoc.getElementsByTagName("CD");
for (var i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");

针对 XML 文档中的每个 CD 元素，会创建一个表格行。每个表格行包含两个表格数据单元，其中的数据来自当前 CD 元素的 ARTIST 和 TITLE。

TIY：查看如何在一个 HTML 表格中显示 XML 数据。

在任意 HTML 元素中显示 XML 数据

XML 数据可以拷贝到任何有能力显示文本的 HTML 元素。

下面的代码为 HTML 文件的 <head> 部分。这段代码从第一个 <CD> 元素中获得 XML 数据，然后在的 HTML 元素中显示数据：

var x=xmlDoc.getElementsByTagName("CD");
i=0;
function display()
{
artist=
(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=
(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=
(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year;
document.getElementById("show").innerHTML=txt;
}

HTML 的 body 元素包含一个 onload 事件属性，它的作用是在页面已经加载时调用 display() 函数。body 元素中还包含了供接受 XML 数据的 <div > 元素。

<div ></div>
</body>

TIY：查看 XML 数据如何在 <div> 元素中显示。

通过上例，你只能看到来自 XML 文档中第一个 CD 元素中的数据。为了导航到数据的下一行，必须添加更多的代码。

添加导航脚本

为了向上例添加导航（功能），需要创建 next() 和 previous() 两个函数：

function next()
{
if (i<x.length)
  {
  i++;
  display();
  }
}
function previous()
{
if (i>0)
  {
  i--;
  display();
  }
}

next() 函数确保已到达最后一个 CD 元素后不显示任何东西，previous () 函数确保已到达第一个 CD 元素后不显示任何东西。

通过点击 next/previous 按钮来调用 next() 和 previous() 函数：

<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" />

TIY：查看如何在 XML 记录中导航。

现在，把所有的东西组合起来！

只需要一点点创新，您就可以创建一个完整的应用程序。

如果您使用本页中学到的知识，再加上一点点想象力，就可以轻松地开发出一个完整的应用程序。

如果您正在使用 IE 5.0 或者更高的版本：看看您可以怎样为这个应用程序添加一点点想象力。

XML Javascript

实例

解析 XML

通过微软的 XML 解析器来加载 XML

例子解释：

在 Firefox 及其他浏览器中的 XML 解析器

例子解释：

例子解释：

跨域访问

XML DOM

XML DOM

HTML DOM

解析 XML 文件 - 跨浏览器实例

重要注释

解析 XML 字符串 - 跨浏览器实例

XML to HTML

实例

在 HTML 中显示数据

例子解释：

跨域访问

XMLHttpRequest 对象

什么是 XMLHttpRequest 对象？

创建 XMLHttpRequest 对象

实例

为什么使用 Async=true ？

更多实例

XML / ASP

XMLHttpRequest 对象是 W3C 的标准吗？

参阅

XML 应用程序

XML 文档实例

加载 XML 文档

把 XML 数据显示为 HTML 表格

在任意 HTML 元素中显示 XML 数据

添加导航脚本

现在，把所有的东西组合起来！

相关推荐

java操作xml和json

Php 获取xml中的节点值

XML+XSL+C#=>html

javascript创建XML对象转换为字符串，创建字符串转换为XML对象

将XML转为HTML

【Python】xml 解析

JavaScript 中JSON

html、css、javascript、JSP 、xml学习顺序应该是怎样的呢？