使用XSLT显示XML
--------------------------------------------------------------------------------
通过使用XSLT,您可以把XML文档转换成HTML格式。
--------------------------------------------------------------------------------
使用XSLT显示XML
XSLT是首选的XML样式表语言。
XSLT(eXtensibleStylesheetLanguageTransformations)远比CSS更加完善。
XSLT是在浏览器显示XML文件之前,先把它转换为HTML:
使用XSLT显示XML
--------------------------------------------------------------------------------
在服务器上通过XSLT转换XML
在上面的实例中,当浏览器读取XML文件时,XSLT转换是由浏览器完成的。
在使用XSLT来转换XML时,不同的浏览器可能会产生不同结果。为了减少这种问题,可以在服务器上进行XSLT转换。
如果您想要学习有关XSLT的知识,请在我们的首页查找XSLT教程。
XMLHttpRequest对象
--------------------------------------------------------------------------------
XMLHttpRequest对象
XMLHttpRequest对象用于在后台与服务器交换数据。
XMLHttpRequest对象是开发者的梦想,因为您能够:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
创建一个XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)都有内建的XMLHttpRequest对象。
创建XMLHttpRequest对象的语法:
xmlhttp=newXMLHttpRequest();
旧版本的InternetExplorer(IE5和IE6)中使用ActiveX对象:
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
XMLParser
--------------------------------------------------------------------------------
所有现代浏览器都有内建的XML解析器。
XML解析器把XML文档转换为XMLDOM对象-可通过JavaScript操作的对象。
--------------------------------------------------------------------------------
解析XML文档
下面的代码片段把XML文档解析到XMLDOM对象中:
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
--------------------------------------------------------------------------------
解析XML字符串
下面的代码片段把XML字符串解析到XMLDOM对象中:
txt="<bookstore><book>";
txt=txt+"<title>EverydayItalian</title>";
txt=txt+"<author>GiadaDeLaurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";
if(window.DOMParser)
{
parser=newDOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else//InternetExplorer
{
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
注释:InternetExplorer使用loadXML()方法来解析XML字符串,而其他浏览器使用DOMParser对象。
--------------------------------------------------------------------------------
跨域访问
出于安全方面的原因,现代的浏览器不允许跨域的访问。
这意味着,网页以及它试图加载的XML文件,都必须位于相同的服务器上。
XMLDOM
--------------------------------------------------------------------------------
DOM(DocumentObjectModel文档对象模型)定义了访问和操作文档的标准方法。
--------------------------------------------------------------------------------
XMLDOM
XMLDOM(XMLDocumentObjectModel)定义了访问和操作XML文档的标准方法。
XMLDOM把XML文档作为树结构来查看。
所有元素可以通过DOM树来访问。可以修改或删除它们的内容,并创建新的元素。元素,它们的文本,以及它们的属性,都被认为是节点。
--------------------------------------------------------------------------------
HTMLDOM
HTMLDOM定义了访问和操作HTML文档的标准方法。
所有HTML元素可以通过HTMLDOM来访问。
--------------------------------------------------------------------------------
加载一个XML文件-跨浏览器实例
下面的实例把XML文档("note.xml")解析到XMLDOM对象中,然后通过JavaScript提取一些信息:
实例
<html>
<body>
<h1>W3SchoolsInternalNote</h1>
<div>
<b>To:</b><spanid="to"></span><br/>
<b>From:</b><spanid="from"></span><br/>
<b>Message:</b><spanid="message"></span>
</div>
<script>
if(window.XMLHttpRequest)
{//codeforIE7+,"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>
--------------------------------------------------------------------------------
重要注释!
如需从上面的XML文件("note.xml")的<to>元素中提取文本"Tove",语法是:
getElementsByTagName("to")[0].childNodes[0].nodeValue
请注意,即使XML文件只包含一个<to>元素,您仍然必须指定数组索引[0]。这是因为getElementsByTagName()方法返回一个数组。
--------------------------------------------------------------------------------
加载一个XML字符串-跨浏览器实例
下面的实例把XML字符串解析到XMLDOM对象中,然后通过JavaScript提取一些信息:
实例
<html>
<body>
<h1>W3SchoolsInternalNote</h1>
<div>
<b>To:</b><spanid="to"></span><br/>
<b>From:</b><spanid="from"></span><br/>
<b>Message:</b><spanid="message"></span>
</div>
<script>
txt="<note>";
txt=txt+"<to>Tove</to>";
txt=txt+"<from>Jani</from>";
txt=txt+"<heading>Reminder</heading>";
txt=txt+"<body>Don'tforgetmethisweekend!</body>";
txt=txt+"</note>";
if(window.DOMParser)
{
parser=newDOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else//InternetExplorer
{
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
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>