html学习笔记-XML-Javascript

html学习笔记-XML-Javascript

Table of Contents

• 1. XML HTTP Request
  • 1.1. XMLHttpRequest 对象
  • 1.2. 创建 XMLHttpRequest 对象
• 2. XML 解析器
• 3. XML DOM

1 XML HTTP Request

 

1.1 XMLHttpRequest 对象

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

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

1.2 创建 XMLHttpRequest 对象

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

<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>

2 XML 解析器

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

跨域访问
出于安全方面的原因，现代的浏览器不允许跨域的访问。
这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

3 XML DOM

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

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

# 例子中，我们使用 DOM 引用从 <to> 元素中获取文本：
#   xmlDoc -由解析器创建的 XML 文档
#   getElementsByTagName("to")[0] - 第一个 <to> 元素
#   childNodes[0] - <to> 元素的第一个子元素（文本节点）
#   nodeValue - 节点的值（文本本身）

Author: galaxy

Created: 2015-09-23 Wed 17:18

Emacs 24.4.1 (Org mode 8.2.10)

Validate