MENU

XML相关知识(二)

December 4, 2018 • 编程开发阅读设置

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。使用场景如下:

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

创建一个 XMLHttpRequest 对象

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

创建 XMLHttpRequest 对象的语法:xmlhttp=new XMLHttpRequest();

旧版本的Internet Explorer(IE5和IE6)中使用 ActiveX 对象:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

XML Parser

所有现代浏览器都有内建的 XML 解析器。
XML解析器把XML文档转换为XML DOM对象-可通过JavaScript操作的对象。

解析 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;

解析 XML 字符串

下面的代码片段把 XML 字符串解析到 XML DOM 对象中:

txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";

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); 
}

执行后的效果如下:
XML-string-to-object.jpg

跨域访问

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

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

XML DOM

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

XML DOM(XML Document Object Model)定义了访问和操作 XML 文档的标准方法。XML DOM 把 XML 文档作为树结构来查看。

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

加载一个 XML文件的实例

下面的实例把 XML 文档("note.xml")解析到 XML DOM 对象中,然后通过 JavaScript 提取一些信息:

<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script>
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari
}
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

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>
</body>
</html>

访问该HTML页面后的效果如图所示:
XMLHttpRequest.jpg

在 HTML 页面中显示 XML 数据

在下面的实例中,我们打开一个 XML 文件("cd_catalog.xml"),然后遍历每个 CD 元素,并显示HTML 表格中的 ARTIST 元素和 TITLE 元素的值:

访问该HTML页面后的效果如图所示:

XML-to-HTML.jpg

Archives QR Code
QR Code for this page
Tipping QR Code