Post on 15-Jan-2016
description
主讲教师:李艺主讲教师:李艺leeyi@ustc.edu.cnleeyi@ustc.edu.cn
Ajax 编程技术第五章 XML 要点
5-2 中国科大《 Ajax编程技术》
5.1 XML 基础
使用 XMLHttpRequest 对象向服务器提出请求后,服务器返回数据的格式有两种: 文本格式:是一种很容易添加到页面的字符,然而,在数据交
换方面,文本格式非常有限。字符之间不存在元素、数据类型等区别。
XML 格式:是一种标记语言,它使用用户自定义标记,按照特定的方式组织数据。
浏览器从响应 Ajax 请求的服务器中接收 XML 文档时,我们需要一种方法来提取 XML 数据并显示之。 JavaScript 可以使用节点、节点属性和 DOM 方法从 XML 文档中检索数据。一旦提取 X
ML 数据,就可以使用 CSS 或 XSLT 在页面显示该数据。
5-3 中国科大《 Ajax编程技术》
5.1 XML 基础
XML 特点 允许数据分类; 允许创建数据格式; 将数据输出到各个地方; 不是私有语言,不局限于特殊平台或设备。
5-4 中国科大《 Ajax编程技术》
5.1 XML 基础
创建标记我们来构建一个 XML 文档。其中我们将创建一
组自定义的标记:
<classes>
<class>
<classID>CS115</classID>
<department>ComputerScience</department>
<credits req="yes">3</credits>
<instructor>Adams</instructor>
<title>Programming</title>
</class>
</classes>
<classes>
包含所有其他元素的根元素
<class>Classes 的子元素
<department>元素的开始标记
</department>
元素的结束标记
ComputerScience
元素所包含的内容
5-5 中国科大《 Ajax编程技术》
XML 语法 XML 文档的从 XML 申明开始:
<?xml version=“1.0” ?>
XML 有一个包含其他所有元素的根元素,如上例中的 <classes
> ; XML 的标记必须有开始标记和结束标记,中间是元素内容:
<title> Programming </title>
空元素没有元素内容,也没有元素结束标记,但元素开始标记以“ />” 封口;
标记嵌套必须正确,不能交叉嵌套; 标记内的属性值必须用引号界定。
5.1 XML 基础
5-6 中国科大《 Ajax编程技术》
5.1 XML 基础
评价使用 XML 进行数据交换的主要优势是 XML 文档
可以包括关于该文档中数据的格式和类型的详细信息。方便验证 XML 文档是否接收正确。
5-7 中国科大《 Ajax编程技术》
5.1 XML 基础 示例:请求服务器端的 XML 数据
1. 创建一个主页, index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>Requesting XML</title><script language="javascript">function getDoc(){ if (window.XMLHttpRequest) request = new XMLHttpRequest(); else if (window.ActiveXObject) request = new ActiveXObject("Microsoft.XMLHTTP"); if (request.overrideMimeType) request.overrideMimeType("text/xml"); if (request){ request.open("GET","classes.xml",true); request.onreadystatechange = function() { if(request.readyState == 4 && request.status == 200){ var xmlDocument = request.responseXML; alert('XML Document Retrieved'); } } request.send(null); }}
</script></head> <body><h1>Requesting XML</h1><form> <input type="button" id="reqDoc" value="Make request"></form><script type="text/javascript"> var myDoc = document.getElementById('reqDoc'); myDoc.onclick = getDoc;</script></body></html>
5-8 中国科大《 Ajax编程技术》
5.1 XML 基础
2. 创建服务器端的数据文件 classes.xml ,以 utf-8 格式保存:<?xml version="1.0"?><?xml-stylesheet type="text/css" href="classes.css"?><classes> <class> <classID>CS115</classID> <department>ComputerScience</department> <credits req="yes">3</credits> <instructor>Adams</instructor> <title>Programming</title> </class> <class> <classID isemester="fall">CS205</classID> <department>ComputerScience</department> <credits req="yes">3</credits> <instructor>Dykes</instructor> <title>Javascript</title> </class> <class> <classID isemester="fall">CS255</classID> <department>ComputerScience</department> <credits req="no">3</credits> <instructor>Brunner</instructor> <title>C++ 程序设计 </title> </class></classes>
5-9 中国科大《 Ajax编程技术》
5.1 XML 基础
3. 运行:在右图所示界
面中,点击“ make r
equest” 按钮,出现警示框:
5-10 中国科大《 Ajax编程技术》
5.1 XML 基础
4. 如果将 index.htm 中红色字符显示的代码该成如下代码:
alert(xmlDocument.xml);
则程序弹出的警示框为右图所示的警示框:
本章后面将介绍如何使用 JavaScript 从服务器返回的 XML 文档中提取数据。
5-11 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
一旦从服务器中获得 XML 文档,下一步要做的工作就是使用 JavaScript 从该文档中提取 XML 数据。我们可以使用节点、节点属性或 DOM 方法获取。除了使用 XML 元素的值之外,还可以提取 XML 属性的值。
5-12 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
使用节点JavaScript 包括内置节点属性,可以使用这些属性访问 X
ML 文档中的节点。也可以使用 documentElement 属性访问 XML文档的根元素。其他节点属性包含的家族如下所示:
firstChild: 第一个子节点;lastChild: 最后一个子节点;nextSibling: 下一个同属(兄弟)节点;previousSibling: 前一个兄弟节点;childNodes: 子节点数组nodeName: 节点名称nodeValue: 节点值nodeType: 节点类型,类型值见下表:
5-13 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
节点类型表
节点类型 描述
1 元素
2 属性
3 文本
4 CDATA 部分
5 XML 实体引用
6 XML 实体
7 XML 处理指令
8 XML 注释
9 XML 文档
10 XML DTA
11 XML 文档片段
12 XML 符号法
5-14 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
例 1 ,要访问上例中 classes.xml 文档中的根元素名称,可以将上例 index.htm 程序中红色字符代码改为:alert(xmlDocument.documentElement.nodeName);
则单击按钮后,屏幕弹出如下警示框,显示出 classes.xm
l 根元素的名称: classes:
5-15 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
例 2 ,还可以利用已经得到的变量 xmlDocument 获得 XMLHttpRequest 对象的 requestXML 属性:var rootNode = xmlDocument.documentElement;
可以根据家族关系访问该文档中最后一个 class 元素的文本节点值,var classNode = rootNode.lastChild; //即 class , classes 最后一个子元素
var titleNode = classNode.lastChild; //class 元素的最后一个子元素是 title
var titleText = titleNode.firstChild; // 获得 title 的首个子元素,即它的文本节点
var titleValue = titleText.nodeValue; // 获得 title 的文本值
将 index.htm 中红色代码替换成上面的 5 行代码,则点击按钮后,程序弹出如下警示框:
5-16 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
例 3 ,如果要访问上例中第一个 class 元素的文本节点值,可将上页的绿色代码改成如下代码:
var classNode = rootNode.fristChild;
5-17 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
这些程序在 IE 下会很好地运行,但在 Mozilla 的浏览器中会出现错误。原因在于, Mozilla 的浏览器将XML 文档中的空格作为文本节点处理。那么,当访问基于 Mozilla 浏览器中的 classes 元素的 firstChil
d 时,访问的是空格文本节点而不是首个 class 元素。修改的方法是,使用家族关系跳过这些空格节点。即将上面的红色代码var classNode = rootNode.fristChild;
修改如下:var classNode = rootNode.firstChild.nextSibling;
当然,最好的办法是变成删除 XML 中的所有空格。
5-18 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
根据名称访问 XML 元素除了使用节点属性访问节点信息外,还可以使用 getEleme
ntsByTagName 方法根据 XML 元素的名称从 XML 文档中提取特定元素。
例如, classes.xml 文档中有多个 title 元素,可以用: var titleNode = xmlDocument.getElementsByTagName(‘title’);
全部提取出来,结果形成 titleNode 数组。然后提取数组中的某个元素:
var firstTitle = titleNode[0]; // 获取第一个 title 元素
var firstTitleValue = firstTitle.firstChild.nodeValue; // 获取该元素的文本节点值
5-19 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
如果要显示该文本节点值,可在页面上添加带有 id 值的 di
v 标记,然后在此 div 中显示出来:var myEl = document.createElement(‘p’);var newText = “ 第一个课程是:” +titleValue+”.”;var myTx = document.createTextNode(newText);myEl.appendChild(myTx);var course = document.getElementsByTagName(‘title’);course.appendChild(myEl);
完整的 index.htm 程序如下页所示:
5-20 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>Requesting XML</title><script language="javascript">function getDoc(){ if (window.XMLHttpRequest) request = new XMLHttpRequest(); else if (window.ActiveXObject) request = new ActiveXObject("Microsoft.XMLHTTP"); if (request.overrideMimeType) request.overrideMimeType("text/xml"); if (request){ request.open("GET","classes.xml",true); request.onreadystatechange = function(){ if(request.readyState == 4 && request.status == 200){ var xmlDocument = request.responseXML; var rootNode = xmlDocument.documentElement; var classNode = rootNode.firstChild; var titleNode = classNode.lastChild; var titleText = titleNode.firstChild; var titleValue = titleText.nodeValue;
var myEl = document.createElement('p'); var newText = " 第一个课程是: "+titleValue+"."; var myTx = document.createTextNode(newText); myEl.appendChild(myTx); var course = document.getElementById('title'); course.appendChild(myEl); } } request.send(null); }}</script></head> <body><h1>Requesting XML</h1><form> <input type="button" id="reqDoc" value="Make request"></form><div id='title'></div><script type="text/javascript"> var myDoc = document.getElementById('reqDoc'); myDoc.onclick = getDoc;</script></body></html>
5-21 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
classes.xml:<?xml version="1.0"?><?xml-stylesheet type="text/css" href="classes.css"?><classes> <class> <classID>CS115</classID> <department>ComputerScience</department> <credits req="yes">3</credits> <instructor>Adams</instructor> <title>Programming</title> </class> <class> <classID isemester="fall">CS205</classID> <department>ComputerScience</department> <credits req="yes">3</credits> <instructor>Dykes</instructor> <title>Javascript</title> </class> <class> <classID isemester="fall">CS255</classID> <department>ComputerScience</department> <credits req="no">3</credits> <instructor>Brunner</instructor> <title>C++ 程序设计 </title> </class></classes>
5-22 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
程序运行如下左图;点击按钮后,显示出如下右图示的信息:
5-23 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
访问属性值还可以使用 JavaScript 提取 XML 文档中的属性节点值。
属性节点被包含在元素节点内。因此,需要首先访问你感兴趣的属性元素。例如 classes.xml 中 creditd 元素包括一个名位 req 的属性,可以使用 getElementsByTagName 提取 credits 元素:
var creditStatus = xml.Document.getElementsByTagName(‘credits’);
然后可使用 attributes 属性访问该属性。因为有多个 credits 元素,所以 creditStatus变量包含一个数组。我们这样访问文档中第三个 credits 元素的属性值:
var creditAttr = creditStatus[2].attributes;
getNamedItem 方法允许使用属性获取 req 属性值:var reqAttr = creditAttr.getNamedItem(‘req’);
最后使用 nodeValue 获取 req 属性值:var reqVal = reqAttr.nodeValue;
5-24 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
示例,利用 XMLHttpRequest 对象从服务器下载 classes.xml 文档,然后读出文档中的元素和属性值:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Checking Courses</title><script language = "javascript">function getDoc(){ if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); } if (request.overrideMimeType) { request.overrideMimeType("text/xml"); } if(request) { request.open("GET", "classes.xml", true); request.onreadystatechange = function() { if ((request.readyState == 4) && (request.status == 200)) { var xmlDocument = request.responseXML; findClass(xmlDocument); } } request.send(null); } } //紧接下页代码
5-25 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
function findClass(doc){ var titleNode = doc.getElementsByTagName('title'); for (i=0; i<titleNode.length; i++) { var title = titleNode[i]; var titleValue = title.firstChild.nodeValue; var myEl = document.createElement('p'); var newText = titleValue + " 课程的 "; var myTx = document.createTextNode(newText); myEl.appendChild(myTx); var course = document.getElementById('title'); if (i==0) { myEl.style.color='#ff0000';} else if (i==1) { myEl.style.color='green';} else { myEl.style.color='navy';} myEl.style.fontSize='12pt'; course.appendChild(myEl); var instructorNode = doc.getElementsByTagName('instructor'); var instructor = instructorNode[i]; var instructorValue = " 教师是 " + instructor.firstChild.nodeValue+","; var addTxt = document.createTextNode(instructorValue); myEl.appendChild(addTxt); var creditStatus = doc.getElementsByTagName('credits'); var creditAttr = creditStatus[i].attributes; var reqAttr = creditAttr.getNamedItem('req'); var reqVal = reqAttr.nodeValue;
if (reqVal == 'yes') { var addlText = " 这是必修课 "; } else { var addlText = " 这是选修课 "; } var addlText2 = document.createTextNode(addlText); myEl.appendChild(addlText2); }}</script></head><body> <h1>Checking courses</h1> <form> <input type = "button" id="reqDoc" value = "Check courses"> </form><script type="text/javascript"> var myDoc = document.getElementById('reqDoc'); myDoc.onclick = getDoc;</script><div id="title"></div></body></html>
5-26 中国科大《 Ajax编程技术》
5.2 使用 JavaScript 提取 XML 数据
运行时,点击按钮,网页从下载的 XML 文档中显示提取的元素值:
5-27 中国科大《 Ajax编程技术》
5.3 使用 CSS 显示 XML 数据
让 XML 数据按照 CSS 式样表规定的格式显示普通的 XML 文档不包
含显示格式信息。例如,我们这里用到 classes.xml
文档用浏览器打开后,显示情况如右:
5-28 中国科大《 Ajax编程技术》
5.3 使用 CSS 显示 XML 数据
如果在第一行后面加上一条语句,可以将 XML 文档数据按照指定的 CSS 式样表显示:
<?xml-stylesheet type="text/css" href="classes.css"?>
当然,我们要创建 class.css 文档,在其中规定 XML 显示格式:
classID,title,credits{ display:block; color:maroon; font-size:10pt; font-family:Arial,宋体 ; font-weight:bold;}
再次用浏览器打开 classes.xml ,则显示为:
5-29 中国科大《 Ajax编程技术》
5.3 使用 CSS 显示 XML 数据
在 Ajax 中使用 CSS
Ajax 部分更新页面时不用重新加载整个页面,部分更新时,可以使用 JavaScript 将 CSS 式样表应用到要加载的 XML 数据上。 JavaScript 的 style 和 clas
sName 属性可以担当此任务。1. style 属性:
JavaScript 的 style 属性能够设置 CSS 式样值,格式如下:
element.style.property = “value”;
5-30 中国科大《 Ajax编程技术》
5.3 使用 CSS 显示 XML 数据
例如,想将 id 值为’ p1’ 的段落中的文本颜色设置为紫色,字号设置为 10pt ,程序代码如下:
var myPara = document.getElementById(‘p1’);
myPara.style.color = “purple”;
myPara.style.fontSize = “10pt”;
5-31 中国科大《 Ajax编程技术》
5.3 使用 CSS 显示 XML 数据
2. className 属性JavaScript 的 className 属性提供一种快速转
换 CSS 类的方法。例如,假定已定义两个 CSS 类选择器: .red 和 .blue ,并且最初已赋予 red 类于一个段落,程序如下:
<p id=“first” name=“first” class=“red”>
可以使用 JavaScript改变该赋值:document.getElementById(‘first’).className=“blue”;
className 属性不受 style 属性的限制。可以不必直接使用 JavaScript 来改变 style 属性,而使用 JavaScript改变应用于某个对象的 CSS 类。