XML JavaScript


XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

什么是 XMLHttpRequest 对象?

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您能够:

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

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

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

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

创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();

实例 1

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

为什么使用 Async=true ?

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

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

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

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

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

XML 解析器

解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

解析 XML

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

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

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

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

解析 XML 文档

下面的代码片段把 XML 文档解析到 XML DOM 对象中:

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

其他方法 1:通过微软的 XML 解析器来加载 XML

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

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

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");
  1. 上面代码的第一个行创建一个空的微软 XML 文档对象。
  2. 第二行关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行。
  3. 第三行告知解析器加载名为 "note.xml" 的 XML 文档。

其他方法 2:在 Firefox 及其他浏览器中的 XML 解析器

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

var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");
  1. 上面代码的第一个行创建一个空的 XML 文档对象。
  2. 第二行关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行。
  3. 第三行告知解析器加载名为 "note.xml" 的 XML 文档。

解析 XML 字符串

下面的 JavaScript 代码片段把 XML 字符串解析到 XML DOM 对象中(把字符串 txt 载入解析器):

txt="";
txt=txt+"Everyday Italian";
txt=txt+"Giada De Laurentiis";
txt=txt+"2005";
txt=txt+"";

if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(txt);
  }

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

注释:loadXML() 方法用于加载字符串(文本),load() 用于加载文件。

XML DOM

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

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

在下面的例子中,我们使用 DOM 引用从 元素中获取文本:

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

HTML DOM

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

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

在下面的例子中,我们使用 DOM 引用来改变 id="to" 的 HTML 元素的文本:

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

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

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



W3School.com.cn Internal Note

To:
From:
Message:

输出:

W3School.com.cn Internal Note

To: George
From: John
Message: Don't forget the meeting!

重要注释

如需从 XML 中提取文本 "John",语法是:

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

在上例中,只有一个 标签,但是仍然需要规定数组的下标 [0],这是因为 getElementsByTagName() 方法会返回包含所有 节点的数组。