《Ajax编程技术第五章XML要点.ppt》由会员分享，可在线阅读，更多相关《Ajax编程技术第五章XML要点.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、主讲教师：李艺主讲教师：李艺主讲教师：李艺主讲教师：李艺Ajax编程技术第五章XML要点中国科大Ajax编程技术5.1 XML基础使用使用XMLHttpRequest对象向服务器提出请求后，服务器返回对象向服务器提出请求后，服务器返回数据的格式有两种：数据的格式有两种：n文本格式：是一种很容易添加到页面的字符，然而，在数据交文本格式：是一种很容易添加到页面的字符，然而，在数据交换方面，文本格式非常有限。字符之间不存在元素、数据类型换方面，文本格式非常有限。字符之间不存在元素、数据类型等区别。等区别。nXML格式：是一种标记语言，它使用用户自定义标记，按照特格式：是一种标记语言，它使用用户自定义
2、标记，按照特定的方式组织数据。定的方式组织数据。浏览器从响应浏览器从响应Ajax请求的服务器中接收请求的服务器中接收XML文档时，我们需文档时，我们需要一种方法来提取要一种方法来提取XML数据并显示之。数据并显示之。JavaScript可以使用节点、可以使用节点、节点属性和节点属性和DOM方法从方法从XML文档中检索数据。一旦提取文档中检索数据。一旦提取XML数据，数据，就可以使用就可以使用CSS或或XSLT在页面显示该数据。在页面显示该数据。5-2 中国科大Ajax编程技术5.1 XML基础pXML特点特点n允许数据分类；允许数据分类；n允许创建数据格式；允许创建数据格式；n将数据输出到各个
3、地方；将数据输出到各个地方；n不是私有语言，不局限于特殊平台或设备。不是私有语言，不局限于特殊平台或设备。5-3 中国科大Ajax编程技术5.1 XML基础p创建标记创建标记我们来构建一个我们来构建一个XML文档。其中我们将创建一组自文档。其中我们将创建一组自定义的标记：定义的标记：CS115 ComputerScience 3 Adams Programming 包含所有其他元素的根元素包含所有其他元素的根元素Classes的子元素的子元素元素的开始标记元素的开始标记元素的结束标记元素的结束标记ComputerScience元素所包含的内容元素所包含的内容5-4 中国科大Ajax编程技术pX
4、ML语法语法nXML文档的从文档的从XML申明开始：申明开始：nXML有一个包含其他所有元素的根元素，如上例中的有一个包含其他所有元素的根元素，如上例中的；nXML的标记必须有开始标记和结束标记，中间是元素内容：的标记必须有开始标记和结束标记，中间是元素内容：Programming n空元素没有元素内容，也没有元素结束标记，但元素开始标记空元素没有元素内容，也没有元素结束标记，但元素开始标记以以“/”封口；封口；n标记嵌套必须正确，不能交叉嵌套；标记嵌套必须正确，不能交叉嵌套；n标记内的属性值必须用引号界定。标记内的属性值必须用引号界定。5.1 XML基础5-5 中国科大Ajax编程技术5.1
5、 XML基础p评价评价使用使用XML进行数据交换的主要优势是进行数据交换的主要优势是XML文档可以文档可以包括关于该文档中数据的格式和类型的详细信息。方便包括关于该文档中数据的格式和类型的详细信息。方便验证验证XML文档是否接收正确。文档是否接收正确。5-6 中国科大Ajax编程技术5.1 XML基础p示例：请求服务器端的示例：请求服务器端的XML数据数据1.创建一个主页，创建一个主页，index.htm:Requesting XMLfunction getDoc()if(window.XMLHttpRequest)request=new XMLHttpRequest();else if(wi
6、ndow.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 D
7、ocument Retrieved);request.send(null);Requesting XML var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;5-7 中国科大Ajax编程技术5.1 XML基础2.创建服务器端的数据文件创建服务器端的数据文件classes.xml，以，以utf-8格式保存：格式保存：CS115 ComputerScience 3 Adams Programming CS205 ComputerScience 3 Dykes Javascript CS255 ComputerScience
8、3 Brunner C+程序设计 5-8 中国科大Ajax编程技术5.1 XML基础3.运行：运行：4.在右图所示在右图所示界面中，点击界面中，点击“make request”按钮，出现按钮，出现警示框：警示框：5-9 中国科大Ajax编程技术5.1 XML基础4.如果将如果将index.htm中红色字符显示的代码该成如下代码：中红色字符显示的代码该成如下代码：4.alert(xmlDocument.xml);5.则程序弹出的警示框为则程序弹出的警示框为6.右图所示的警示框：右图所示的警示框：本章后面将介绍如本章后面将介绍如何使用何使用JavaScript从服从服务器返回的务器返回的XML文档
9、中文档中提取数据。提取数据。5-10 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据一旦从服务器中获得一旦从服务器中获得XML文档，下一步要做的工作文档，下一步要做的工作就是使用就是使用JavaScript从该文档中提取从该文档中提取XML数据。我们可数据。我们可以使用节点、节点属性或以使用节点、节点属性或DOM方法获取。除了使用方法获取。除了使用XML元素的值之外，还可以提取元素的值之外，还可以提取XML属性的值。属性的值。5-11 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据p使用节点使用节点JavaScript包括内置节点属性，可以使用这
10、些属性访问包括内置节点属性，可以使用这些属性访问XML文文档中的节点。也可以使用档中的节点。也可以使用documentElement属性访问属性访问XML文档的文档的根元素。其他节点属性包含的家族如下所示：根元素。其他节点属性包含的家族如下所示：lfirstChild:第一个子节点；第一个子节点；llastChild:最后一个子节点；最后一个子节点；lnextSibling:下一个同属（兄弟）节点；下一个同属（兄弟）节点；lpreviousSibling:前一个兄弟节点；前一个兄弟节点；lchildNodes:子节点数组子节点数组lnodeName:节点名称节点名称lnodeValue:节点值
11、节点值lnodeType:节点类型，类型值见下表：节点类型，类型值见下表：5-12 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据节点类型表节点类型表节点类型节点类型描述描述1元素元素2属性属性3文本文本4CDATA部分部分5XML实体引用实体引用6XML实体实体7XML处理指令处理指令8XML注释注释9XML文档文档10XML DTA11XML文档片段文档片段12XML符号法符号法5-13 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据n例例1，要访问上例中，要访问上例中classes.xml 文档中的根元素名文档中的根元素名称，可以将上例称，
12、可以将上例index.htm程序中红色字符代码改为：程序中红色字符代码改为：alert(xmlDocument.documentElement.nodeName);则单击按钮后，屏幕弹出如下警示框，显示出则单击按钮后，屏幕弹出如下警示框，显示出classes.xml根元素的名称：根元素的名称：classes:5-14 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据n例例2，还可以利用已经得到的变量，还可以利用已经得到的变量xmlDocument获得获得XMLHttpRequest对象的对象的requestXML属性：属性：var rootNode=xmlDocument
13、.documentElement;可以根据家族关系访问该文档中最后一个可以根据家族关系访问该文档中最后一个class元素元素的文本节点值，的文本节点值，var classNode=rootNode.lastChild;/即即class，classes最后一个子元素最后一个子元素var titleNode=classNode.lastChild;/class元素的最后一个子元素是元素的最后一个子元素是titlevar titleText=titleNode.firstChild;/获得获得title的首个子元素，即它的文本节点的首个子元素，即它的文本节点var titleValue=titleT
14、ext.nodeValue;/获得获得title 的文本值的文本值将将index.htm中红色代码替换成上面的中红色代码替换成上面的5行代码，则行代码，则点击按钮后，程序弹出如下警示框：点击按钮后，程序弹出如下警示框：5-15 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据n例例3，如果要访问上例中第一个，如果要访问上例中第一个class元素的文本节点元素的文本节点值，可将上页的绿色代码改成如下代码：值，可将上页的绿色代码改成如下代码：var classNode=rootNode.fristChild;5-16 中国科大Ajax编程技术5.2 使用JavaScript提
15、取XML数据n这些程序在这些程序在IE下会很好地运行，但在下会很好地运行，但在Mozilla的浏览的浏览器中会出现错误。原因在于，器中会出现错误。原因在于，Mozilla的浏览器将的浏览器将XML文档中的空格作为文本节点处理。那么，当访问文档中的空格作为文本节点处理。那么，当访问基于基于Mozilla浏览器中的浏览器中的classes 元素的元素的firstChild时，时，访问的是空格文本节点而不是首个访问的是空格文本节点而不是首个class元素。修改元素。修改的方法是，使用家族关系跳过这些空格节点。即将上的方法是，使用家族关系跳过这些空格节点。即将上面的红色代码面的红色代码var clas
16、sNode=rootNode.fristChild;修改如下：修改如下：var classNode=;n当然，最好的办法是变成删除当然，最好的办法是变成删除XML中的所有空格。中的所有空格。5-17 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据p根据名称访问根据名称访问XML元素元素除了使用节点属性访问节点信息外，还可以使用除了使用节点属性访问节点信息外，还可以使用getElementsByTagName方法根据方法根据XML元素的名称从元素的名称从XML文档中文档中提取特定元素。提取特定元素。例如，例如，classes.xml文档中有多个文档中有多个title元素，
17、可以用：元素，可以用：var titleNode=xmlDocument.getElementsByTagName(title);全部提取出来，结果形成全部提取出来，结果形成titleNode数组。然后提取数组中的某个元数组。然后提取数组中的某个元素：素：var firstTitle=titleNode0;/获取第一个获取第一个title元素元素var firstTitleValue=;/获取该元素的文本节点值获取该元素的文本节点值5-18 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据如果要显示该文本节点值，可在页面上添加带有如果要显示该文本节点值，可在页面上添加带有
18、id值的值的div标标记，然后在此记，然后在此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-19 中国科大Ajax编
19、程技术5.2 使用JavaScript提取XML数据Requesting XMLfunction 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);reques
20、t.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=do
21、cument.createElement(p);var newText=第一个课程是：第一个课程是：+titleValue+.;var myTx=document.createTextNode(newText);myEl.appendChild(myTx);var course=document.getElementById(title);course.appendChild(myEl);request.send(null);Requesting XML var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;5-20 中国
22、科大Ajax编程技术5.2 使用JavaScript提取XML数据classes.xml:CS115 ComputerScience 3 Adams Programming CS205 ComputerScience 3 Dykes Javascript CS255 ComputerScience 3 Brunner C+程序设计程序设计 5-21 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据程序运行如下左图；点击按钮后，显示出如下右图程序运行如下左图；点击按钮后，显示出如下右图示的信息：示的信息：5-22 中国科大Ajax编程技术5.2 使用JavaScript提取
23、XML数据p访问属性值访问属性值还可以使用还可以使用JavaScript提取提取XML文档中的属性节点值。属性节文档中的属性节点值。属性节点被包含在元素节点内。因此，需要首先访问你感兴趣的属性元素。点被包含在元素节点内。因此，需要首先访问你感兴趣的属性元素。例如例如classes.xml中中creditd元素包括一个名位元素包括一个名位req的属性，可以使的属性，可以使用用getElementsByTagName提取提取credits元素：元素：var creditStatus=xml.Document.getElementsByTagName(credits);然后可使用然后可使用attri
24、butes属性访问该属性。因为有多个属性访问该属性。因为有多个credits元元素，所以素，所以creditStatus变量包含一个数组。我们这样访问文档中第变量包含一个数组。我们这样访问文档中第三个三个credits元素的属性值：元素的属性值：var creditAttr=creditStatus2.attributes;getNamedItem方法允许使用属性获取方法允许使用属性获取req属性值：属性值：var reqAttr=creditAttr.getNamedItem(req);最后使用最后使用nodeValue获取获取req属性值：属性值：var reqVal=reqAttr.no
25、deValue;5-23 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据p示例，利用示例，利用XMLHttpRequest对象从服务器下载对象从服务器下载classes.xml文档，文档，然后读出文档中的元素和属性值：然后读出文档中的元素和属性值：Checking Coursesfunction getDoc()if(window.XMLHttpRequest)request=new XMLHttpRequest();else if(window.ActiveXObject)request=new ActiveXObject(Microsoft.XMLHTTP);if(
26、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-24 中国科大Ajax编程技术5.2
27、使用JavaScript提取XML数据function findClass(doc)var titleNode=doc.getElementsByTagName(title);for(i=0;ititleNode.length;i+)var title=titleNodei;var titleValue=;var myEl=document.createElement(p);var newText=titleValue+课程的课程的;var myTx=document.createTextNode(newText);myEl.appendChild(myTx);var course=docum
28、ent.getElementById(title);if(i=0)=#ff0000;else if(i=1)=green;else =navy;=12pt;course.appendChild(myEl);var instructorNode=doc.getElementsByTagName(instructor);var instructor=instructorNodei;var instructorValue=教师是教师是+,;var addTxt=document.createTextNode(instructorValue);myEl.appendChild(addTxt);var
29、creditStatus=doc.getElementsByTagName(credits);var creditAttr=creditStatusi.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);
30、Checking courses var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;5-25 中国科大Ajax编程技术5.2 使用JavaScript提取XML数据p运行时，点击按钮，网页从下载的运行时，点击按钮，网页从下载的XML文档中显示提取文档中显示提取的元素值：的元素值：5-26 中国科大Ajax编程技术5.3 使用CSS显示XML数据p让让XML数据按照数据按照CSS式样表规定的格式显示式样表规定的格式显示普通的普通的XML文档不包文档不包含显示格式信息。例如，含显示格式信息。例如，我们这里用到我们这里用到c
31、lasses.xml文档用浏览器打开后，文档用浏览器打开后，显示情况如右：显示情况如右：5-27 中国科大Ajax编程技术5.3 使用CSS显示XML数据如果在第一行后面加上一条语句，可以将如果在第一行后面加上一条语句，可以将XML文档数据文档数据按照指定的按照指定的CSS式样表显示：式样表显示：当然，我们要创建当然，我们要创建class.css文档，在其中规定文档，在其中规定XML显显示格式：示格式：classID,title,credits display:block;color:maroon;font-size:10pt;font-family:Arial,宋体宋体;font-weigh
32、t:bold;再次用浏览器打开再次用浏览器打开classes.xml，则显示为：，则显示为：5-28 中国科大Ajax编程技术5.3 使用CSS显示XML数据p在在Ajax中使用中使用CSSAjax部分更新页面时不用重新加载整个页面，部分部分更新页面时不用重新加载整个页面，部分更新时，可以使用更新时，可以使用JavaScript将将CSS式样表应用到要加式样表应用到要加载的载的XML数据上。数据上。JavaScript的的style和和className属属性可以担当此任务。性可以担当此任务。1.style属性：属性：2.JavaScript的的style属性能够设置属性能够设置CSS式样值，
33、式样值，格式如下：格式如下：=“value”;5-29 中国科大Ajax编程技术5.3 使用CSS显示XML数据例如，想将例如，想将id值为值为p1的段落中的文本颜色设置的段落中的文本颜色设置为紫色，字号设置为为紫色，字号设置为10pt，程序代码如下：，程序代码如下：var myPara=document.getElementById(p1);=“purple”;=“10pt”;5-30 中国科大Ajax编程技术5.3 使用CSS显示XML数据2.className属性属性3.JavaScript的的className属性提供一种快速属性提供一种快速转换转换CSS类的方法。例如，假定已定义两个类的方法。例如，假定已定义两个CSS类选择类选择器：器：.red和和.blue，并且最初已赋予，并且最初已赋予red类于一个段落，类于一个段落，程序如下：程序如下：4.5.可以使用可以使用JavaScript改变该赋值：改变该赋值：6.document.getElementById(first).className=“blue”;7.className属性不受属性不受style属性的限制。可以属性的限制。可以不必直接使用不必直接使用JavaScript来改变来改变style属性，而使用属性，而使用JavaScript改变应用于某个对象的改变应用于某个对象的CSS 类。类。5-31