代码不是看出来的，而是敲出来的，欢迎关注WX公众号【秃头程序员】，收藏教程。

Ajax返回数据的格式

AJAX 可以在php项目,java ee项目,.net项目使用。在服务器端的业务逻辑层使用何种服务器端语言都可以。

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言一般以如下 3 种格式返回数据：

? Text(又称Html格式)

? XML

? JSON

返回Html格式

? HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送HTML，文本将存储在 responseText 属性中。

? 不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

? 插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

返回Html格式优缺点

优点：

? 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

? HTML 的可读性好。

? HTML 代码块与 innerHTML属性搭配，效率高。

缺点：

? 若需要通过 AJAX 更新一篇文档的多个部分，HTML不合适

? innerHTML 并非 DOM标准。

xml数据

什么是XML？

? XML 指可扩展标记语言（EXtensibleMarkup Language）

? XML 是一种标记语言，很类似 HTML

? XML 的设计宗旨是传输数据，而非显示数据

? XML 标签没有被预定义。您需要自行定义标签。

? XML 被设计为具有自我描述性。

? XML 是W3C 的推荐标准

XML与THML的主要差异

? XML 不是HTML 的替代。

? XML 和HTML 为不同的目的而设计：

? XML 被设计为传输和存储数据，其焦点是数据的内容。

? HTML 被设计用来显示数据，其焦点是数据的外观。

? HTML 旨在显示信息，而 XML 旨在传输信息。

XML 文档形成一种树结构

? XML 文档必须包含根元素。该元素是所有其他元素的父元素。

? XML 文档中的元素形成了一棵文档树。这棵树从根部开始，并扩展到树的最底端。

? 所有元素均可拥有子元素：

? 父、子以及同胞等术语用于描述元素之间的关系。父元素拥有子元素。相同层级上的子元素成为同胞（兄弟或姐妹）

? 所有元素均可拥有文本内容和属性（类似 HTML 中）

XML DOM

XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。

XML DOM 定义了访问和处理 XML 文档的标准方法。

XML DOM是：

? 用于 XML 的标准对象模型

? 用于 XML 的标准编程接口

? 中立于平台和语言

? W3C 的标准

XML DOM 定义了所有XML 元素的对象和属性，以及访问它们的方法（接口）。

XML DOM节点

XML DOM是这样规定的：

? 整个文档是一个文档节点

? 每个 XML 标签是一个元素节点

? 包含在 XML 元素中的文本是文本节点

? 每一个 XML 属性是一个属性节点

? 注释属于注释节点

XML DOM节点树

XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

? 在节点树中，顶端的节点成为根节点

? 根节点之外的每个节点都有一个父节点

? 节点可以有任何数量的子节点

? 叶子是没有子节点的节点

? 同级节点是拥有相同父节点的节点

下面的图片展示出节点树的一个部分，以及节点间的关系：

父节点：Parent Node，子节点：ChildrenNode，同级节点：Sibling Node

解析XML

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

解析器把 XML 读入内存，并把它转换为可被 JavaScript 访问的XML DOM 对象

通过微软的 XML 解析器加载XML：

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

xmlDoc=newActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="false";

xmlDoc.load("books.xml");

代码解释：

第一行创建空的微软 XML 文档对象

第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本

第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

 xmlDoc=newActiveXObject("Microsoft.XMLDOM");
       xmlDoc.async="false";
       xmlDoc.load(txt);

注释：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件。

XML DOM属性和方法

属性和方法向 XML DOM 定义了编程接口

XML DOM 属性：

? x.nodeName- x 的名称

? x.nodeValue- x 的值

? x.parentNode- x 的父节点

? x.childNodes- x 的子节点

? x.attributes- x 的属性节点

XML DOM 方法：

? x.getElementsByTagName(name)- 获取带有指定标签名称的所有元素

? x.appendChild(node)- 向 x 插入子节点

? x.removeChild(node)- 从 x 删除子节点

注释：在上面的列表中，x是一个节点对象

book.xml
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<book category="children">
  <title lang="en">Harry Potter</title> 
  <author>J K. Rowling</author> 
  <year>2005</year> 
  <price>29.99</price> 
</book>
<book category="cooking">
  <title lang="en">Everyday Italian</title> 
  <author>Giada De Laurentiis</author> 
  <year>2005</year> 
  <price>30.00</price> 
</book>
<book category="web">
  <title lang="en">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>
</bookstore>

loadxmldoc.js
function loadXMLDoc(dname) 
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(xmlDoc);
}

testxml.html
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js"></script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("book.xml");
document.write("xmlDoc is loaded, ready for use");
window.alert(xmlDoc.nodeName);
var x = xmlDoc.getElementsByTagName("title");
window.alert(x);
window.alert(x[0].nodeName);
window.alert(x[0].attributes[0].nodeValue);
window.alert(x[0].childNodes.length);
</script>
</body>
</html>

代码不是看出来的，而是敲出来的，欢迎关注WX公众号【秃头程序员】，收藏教程。

玖叶教程网

前端编程开发入门