从做事器端吸收数据的时候,那些数据必须以浏览器能够理解的格式来发送。
做事器真个编程措辞一样平常以如下 3 种格式返回数据:

• Text(又称Html格式)

XML

php返回值给ajaxAjax返回数据的格局 Java

• 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"?&gt;<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.jsfunction 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公众号【光头程序员】,收藏教程。