使用Ajax实现异步通信（1）：使用XML数据

新建XML文档

• XML是可宽展的标识语言，用户根据需要可以自定义标记，实现数据格式的自由定义于传输
• XML文档是由各种标签组成，文档内容由一个根节点包含。XML标签能够自己命名，标记数据的语义，标签不承担显示效果
• XML文档一般包含3部分：XML声明（必须）、处理指令（可选）、XML结构数据。XML声明中必须指定version属性值，指明文档所采用的XML版本号，同时使用encoding定义文档字符集

示例

<?xml version="1.0" encoding="utf-8"?>
<student>
	<name>小明</name>
	<sex>男</sex>
	<age>18</age>
</student>

访问XML数据

说明

• 整个文档是一个文档节点
• 每个xml标签是一个元素节点
• 包含在xml元素中的文本是文本节点
• 每一个xml属性是一个属性节点
• 注释属于属性节点

Node对象包含的常用属性

节点属性	说明
childNodes	返回子节点的节点列表
firstChild	返回节点的首个子节点
lastChild	返回节点的最后一个子节点
nextSibling	返回节点之后紧跟的同级节点
nodeName	根据其类型返回节点的名称
nodeType	返回节点的类型
nodeValue	根据其类型设置或返回节点的值
ownerDocument	返回节点的根元素
parentNode	返回节点的父节点
previousSibling	返回节点之前紧跟的同级节点

Node对象包含的常用方法

节点方法	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点
cloneNode()	复制节点
hasAttributes()	判断当前节点是否拥有属性
insertBeforre()	在指定的子节点前插入新的子节点
removeChild()	删除（并返回）当前节点的指定子节点
hasChildNodes()	判断当前节点是否拥有子节点
replaceChild()	用新节点替换一个子节点

创建XML DOM对象

IE创建XML DOM对象
使用ActiveXObject()构造函数可以创建XML DOM对象，用法如下：

var xmlDom = new ActiveXObject("Microsoft.XmlDom")

在 Firefox 及其他浏览器中的 XML 解析器
通过document对象的Implementation属性，使用该对象的createDocument()方法创建XML DOM对象。createDocument()方法包含以下3个参数

• 参数1：包含文档所使用的命名空间URI的字符串
• 参数2：包含文档根元素名称的字符串
• 参数3：要创建的文档类型，一般为null

示例： 创建一个空的XMLDOM文档对象

var xmlDom = document.implementation.createDocument("","",null)

加载XML数据

IE 加载

示例1： loadXML()方法能够把XML数据字符串转换为XML DOM对象

var xmlDom = new ActiveXObject("Microsoft.XmlDom") //创建XMLDOM对象
var s = "<student><name>Tom<name/><age>18<age/><student/>" //XML数据字符串
xmlDom.loadXML(s) //加载XML数据字符串

示例2： load()方法加载XML数据文件

var xmlDom = new ActiveXObject("Microsoft.XmlDom")
xmlDom.load("new_file.xml")

其它浏览器加载

示例1： 使用load方法加载XML数据

var xmlDom = document.implmentation.createDocument("", "", null) //创建一个空的XML DOM文档对象
xmlDom.load("new_file.xml")

示例2：
DOM 的XML DOM对象不支持loadXML()方法，不过可以通过DOMParser对象来模拟loadXML()的功能。该对象包含parserForm String()的方法，用来加载字符串并解析成文档

var s = "<student><name>Tom<name/><age>18<age/><student/>"
var o = new DOMParser()
var xmlDom = o.parseFromString(s, "text/xml")

补充：

• 设置加载模式：
  load方法默认加载模式为异步加载，可以使用async属性来设置加载模式，取值为false表示同步加载，取值为true表示异步加载
• 跟踪异步加载状态：
  IE：

function callback(o) {
		return function() {
			if (o.readyState == 4) { //如果readyState状态值为4，说明加载完成
				alert("XML文件加载完毕")
			}
		}
	}
	var xmlDom = new activeXobject("Microsoft.XmlDom")
	xmlDom.onreadystatechange = callback(xmlDom)
	xmlDom.load("new_file.xml")

DOM： XML DOM不支持readState属性和onreadystatechange，但是可以借助load事件和onload事件处理函数来检测xml文档加载是否完毕

var xmlDom = document.implementation.createDocument("", "", null)
xmlDom.load("new_file.xml")
xmlDom.onload = function() {
	alert("XML文档加载完成")
}

加载函数

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 (null);
}

显示XML数据

借助getElementsByTagname() 方法来获取标签，再通过Node对象的属性和方法进行操作
传送门