Ajax 编程技术第五章 XML 要点

主讲教师：李艺主讲教师：李艺[email protected]@ustc.edu.cn

Ajax 编程技术第五章 XML 要点

5-2 中国科大《 Ajax编程技术》

5.1 XML 基础

使用 XMLHttpRequest 对象向服务器提出请求后，服务器返回数据的格式有两种：文本格式：是一种很容易添加到页面的字符，然而，在数据交

换方面，文本格式非常有限。字符之间不存在元素、数据类型等区别。

XML 格式：是一种标记语言，它使用用户自定义标记，按照特定的方式组织数据。

浏览器从响应 Ajax 请求的服务器中接收 XML 文档时，我们需要一种方法来提取 XML 数据并显示之。 JavaScript 可以使用节点、节点属性和 DOM 方法从 XML 文档中检索数据。一旦提取 X

ML 数据，就可以使用 CSS 或 XSLT 在页面显示该数据。


5.1 XML 基础

XML 特点允许数据分类；允许创建数据格式；将数据输出到各个地方；不是私有语言，不局限于特殊平台或设备。


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

元素所包含的内容


XML 语法 XML 文档的从 XML 申明开始：

<?xml version=“1.0” ?>

XML 有一个包含其他所有元素的根元素，如上例中的 <classes

> ； XML 的标记必须有开始标记和结束标记，中间是元素内容：

<title> Programming </title>

空元素没有元素内容，也没有元素结束标记，但元素开始标记以“ />” 封口；

标记嵌套必须正确，不能交叉嵌套；标记内的属性值必须用引号界定。

5.1 XML 基础


5.1 XML 基础

评价使用 XML 进行数据交换的主要优势是 XML 文档

可以包括关于该文档中数据的格式和类型的详细信息。方便验证 XML 文档是否接收正确。


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.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.1 XML 基础

3. 运行：在右图所示界

面中，点击“ make r

equest” 按钮，出现警示框：


5.1 XML 基础

4. 如果将 index.htm 中红色字符显示的代码该成如下代码：

alert(xmlDocument.xml);

则程序弹出的警示框为右图所示的警示框：

本章后面将介绍如何使用 JavaScript 从服务器返回的 XML 文档中提取数据。


5.2 使用 JavaScript 提取 XML 数据

一旦从服务器中获得 XML 文档，下一步要做的工作就是使用 JavaScript 从该文档中提取 XML 数据。我们可以使用节点、节点属性或 DOM 方法获取。除了使用 XML 元素的值之外，还可以提取 XML 属性的值。



使用节点JavaScript 包括内置节点属性，可以使用这些属性访问 X

ML 文档中的节点。也可以使用 documentElement 属性访问 XML文档的根元素。其他节点属性包含的家族如下所示：

firstChild: 第一个子节点；lastChild: 最后一个子节点；nextSibling: 下一个同属（兄弟）节点；previousSibling: 前一个兄弟节点；childNodes: 子节点数组nodeName: 节点名称nodeValue: 节点值nodeType: 节点类型，类型值见下表：



节点类型表

节点类型描述

1 元素

2 属性

3 文本

4 CDATA 部分

5 XML 实体引用

6 XML 实体

7 XML 处理指令

8 XML 注释

9 XML 文档

10 XML DTA

11 XML 文档片段

12 XML 符号法



例 1 ，要访问上例中 classes.xml 文档中的根元素名称，可以将上例 index.htm 程序中红色字符代码改为：alert(xmlDocument.documentElement.nodeName);

则单击按钮后，屏幕弹出如下警示框，显示出 classes.xm

l 根元素的名称： classes:



例 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 行代码，则点击按钮后，程序弹出如下警示框：



例 3 ，如果要访问上例中第一个 class 元素的文本节点值，可将上页的绿色代码改成如下代码：

var classNode = rootNode.fristChild;



这些程序在 IE 下会很好地运行，但在 Mozilla 的浏览器中会出现错误。原因在于， Mozilla 的浏览器将XML 文档中的空格作为文本节点处理。那么，当访问基于 Mozilla 浏览器中的 classes 元素的 firstChil

d 时，访问的是空格文本节点而不是首个 class 元素。修改的方法是，使用家族关系跳过这些空格节点。即将上面的红色代码var classNode = rootNode.fristChild;

修改如下：var classNode = rootNode.firstChild.nextSibling;

当然，最好的办法是变成删除 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; // 获取该元素的文本节点值



如果要显示该文本节点值，可在页面上添加带有 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 程序如下页所示：



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



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>



程序运行如下左图；点击按钮后，显示出如下右图示的信息：



访问属性值还可以使用 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;



示例，利用 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); } } //紧接下页代码



运行时，点击按钮，网页从下载的 XML 文档中显示提取的元素值：


5.3 使用 CSS 显示 XML 数据

让 XML 数据按照 CSS 式样表规定的格式显示普通的 XML 文档不包

含显示格式信息。例如，我们这里用到 classes.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 ，则显示为：



在 Ajax 中使用 CSS

Ajax 部分更新页面时不用重新加载整个页面，部分更新时，可以使用 JavaScript 将 CSS 式样表应用到要加载的 XML 数据上。 JavaScript 的 style 和 clas

sName 属性可以担当此任务。1. style 属性：

JavaScript 的 style 属性能够设置 CSS 式样值，格式如下：

element.style.property = “value”;



例如，想将 id 值为’ p1’ 的段落中的文本颜色设置为紫色，字号设置为 10pt ，程序代码如下：

var myPara = document.getElementById(‘p1’);

myPara.style.color = “purple”;

myPara.style.fontSize = “10pt”;



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

Ajax 编程技术第五章 XML 要点

Documents

Transcript of Ajax 编程技术第五章 XML 要点

Ajax 编程技术 第五章 XML 要点

Documents

Transcript of Ajax 编程技术 第五章 XML 要点

Ajax 编程技术第五章 XML 要点

Transcript of Ajax 编程技术第五章 XML 要点