快速学习一下XML

Categories: 网站相关
Tags: , ,
Comments: 1 Comment
Published on: 2011 年 12 月 08 日

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

什么是 XMLHttpRequest 对象?

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

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

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

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

创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();

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

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

一个实例:



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
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.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"
document.getElementById('A1').innerHTML=xmlhttp.status;
document.getElementById('A2').innerHTML=xmlhttp.statusText;
document.getElementById('A3').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving XML data:" + xmlhttp.statusText);
}
}
}
</script>
</head>
<body>
<h2>Using the HttpRequest Object</h2>
<p><b>Status:</b>
<span id="A1"></span>
</p>
<p><b>Status text:</b>
<span id="A2"></span>
</p>
<p><b>Response:</b>
<br /><span id="A3"></span>
</p>
<button onclick="loadXMLDoc('/example/xdom/note.xml')">Get XML</button>
</body>
</html>
 

注释:onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当

XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete)

进行变化。仅在状态为 4 时,我们才执行代码。

为什么使用 Async=true ?

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

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

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

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

安全的方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码。如果在请求失

败时是否执行其余的代码无关紧要,那么可以使用这个参数。如下实例:

<html>
<head>
<script type="text/javascript">
xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
try
{// Firefox, Opera 8.0+, Safari, IE7
xmlHttp=new XMLHttpRequest();
}
catch(e)
{// Old IE
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
url="/ajax/gethint.asp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</script>
</head>
<body><form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

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 属性把结果传回客户端。

XMLHttpRequest 对象是 W3C 的标准吗?

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

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

它们。

XML 解析器

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

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

所有现代浏览器都有读取和操作 XML 的内建 XML 解析器。解析器把 XML 载入内存,然后把它转换为可通过

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

微软的 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="<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);
  }

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

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

跨域访问

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

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

XML DOM

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

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

的元素。元素,它们的文本,以及它们的属性,都被认为是节点。在下面的例子中,我们使用 DOM 引用从 <to>

元素中获取文本:

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

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

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到HTML的实例:

<html>
<body>
<script type="text/javascript">
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>
</body>
</html>
XML与JS的基础交互上边介绍了,怎么用怎么组合就看经验了。下边是一些XML高级内容(据W3scholl这么说)

我猜你可能也喜欢:

Pages: 1 2 3
1 Comment - Leave a comment
  1. 小马说道:

    可以加你QQ吗?想和你聊聊。呵呵!

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is 星期三, 2018 年 12 月 19 日