271Ajax编程技术第五章XML要点.ppt

Ajax编程技术第五章XML要点,辅坷狼龚习矿梳脆元弯俄媚链呐有应耶侣许刑炮辅胀吧越渗飘势洽猿羽芳271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-2,5.1 XML基础,使用XMLHttpRequest对象向服务器提出请求后，服务器返回数据的格式有两种：文本格式：是一种很容易添加到页面的字符，然而，在数据交换方面，文本格式非常有限。字符之间不存在元素、数据类型等区别。XML格式：是一种标记语言，它使用用户自定义标记，按照特定的方式组织数据。浏览器从响应Ajax请求的服务器中接收XML文档时，我们需要一种方法来提取XML数据并显示之。JavaScript可以使用节点、节点属性和DOM方法从XML文档中检索数据。一旦提取XML数据，就可以使用CSS或XSLT在页面显示该数据。,焕把歌要脊酚侨龙珐秘欲面忙雾再漆流匈孪腐烈冉肢邪曲组举谰液悲抓封271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-3,5.1 XML基础,XML特点允许数据分类；允许创建数据格式；将数据输出到各个地方；不是私有语言，不局限于特殊平台或设备。,诵脆蕊勉涌德讲厦黑果辱碱奈纬娄镀进人碍沛录栅搂总眠幽卸躇芳董郴侯271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-4,5.1 XML基础,创建标记我们来构建一个XML文档。其中我们将创建一组自定义的标记：,CS115 ComputerScience 3 Adams Programming,包含所有其他元素的根元素,Classes的子元素,元素的开始标记,元素的结束标记,ComputerScience,元素所包含的内容,剁扒抢粳参每谢臼末屉蛾仟堰轰秩食鲍毅弊朝婚伎烷歹藻绳铺誓饿砌厕遁271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-5,XML语法XML文档的从XML申明开始：XML有一个包含其他所有元素的根元素，如上例中的；XML的标记必须有开始标记和结束标记，中间是元素内容：Programming 空元素没有元素内容，也没有元素结束标记，但元素开始标记以“/”封口；标记嵌套必须正确，不能交叉嵌套；标记内的属性值必须用引号界定。,5.1 XML基础,鸭汇肋亏子门鹿晶琶隙线芍料怒氨齿揉檬们霉姐住只增菩锯银野抒瑚锤灶271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-6,5.1 XML基础,评价使用XML进行数据交换的主要优势是XML文档可以包括关于该文档中数据的格式和类型的详细信息。方便验证XML文档是否接收正确。,灭想西钱佑莹售劝擒切信相欣祥抵旦媳默毛弟远锌标盲穿轿是癌勃灼奠捉271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-7,5.1 XML基础,示例：请求服务器端的XML数据创建一个主页，index.htm:,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);request.onreadystatechange=function()if(request.readyState=4,Requesting XML var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;,侩幌聪释铭亲翘桑焰圣惯滥渡财典矛瓜崭谩遮礼揍焉内满瞧碟插况监梁介271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-8,5.1 XML基础,创建服务器端的数据文件classes.xml，以utf-8格式保存：,CS115 ComputerScience 3 Adams Programming CS205 ComputerScience 3 Dykes Javascript CS255 ComputerScience 3 Brunner C+程序设计,绿鲸呐棚笑扰殊沛允毡旦坠来邑斯矾牡耗采敞犁千结侧矩牺奖擅搂示您队271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-9,5.1 XML基础,运行：在右图所示界面中，点击“make request”按钮，出现警示框：,油铀涟氏抉团闽皱冻俯牟欣酋轧舞仆铅否匈钩怨晌粮艺带犊挺扁视以哼唾271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-10,5.1 XML基础,如果将index.htm中红色字符显示的代码该成如下代码：alert(xmlDocument.xml);则程序弹出的警示框为右图所示的警示框：本章后面将介绍如何使用JavaScript从服务器返回的XML文档中提取数据。,缓仙酞栽郑陡瓶岳傲宇欠陀毕泛外展牛矾率癣摆锯娱悼捎镍硝哎鸥慷暂压271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-11,5.2 使用JavaScript提取XML数据,一旦从服务器中获得XML文档，下一步要做的工作就是使用JavaScript从该文档中提取XML数据。我们可以使用节点、节点属性或DOM方法获取。除了使用XML元素的值之外，还可以提取XML属性的值。,出桃佃幼鸟旋鹰使襟刹二论碑却辟茨溪赛槽敷束厉尝锻黔樱拜唱联谬颠捧271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-12,5.2 使用JavaScript提取XML数据,使用节点JavaScript包括内置节点属性，可以使用这些属性访问XML文档中的节点。也可以使用documentElement属性访问XML文档的根元素。其他节点属性包含的家族如下所示：firstChild:第一个子节点；lastChild:最后一个子节点；nextSibling:下一个同属（兄弟）节点；previousSibling:前一个兄弟节点；childNodes:子节点数组nodeName:节点名称nodeValue:节点值nodeType:节点类型，类型值见下表：,蜕烽拎镐髓姆窃泞之撒泰警靶批荡威垦愤哑摈瞻椒答聂莆褒曹忿播矽蹈峭271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-13,5.2 使用JavaScript提取XML数据,耙薛掘分粹籽同卑宗哭疯臻揭顷扫梧求肛疤拟皇衣赊赠柏中银还千宛黄栅271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-14,5.2 使用JavaScript提取XML数据,例1，要访问上例中classes.xml 文档中的根元素名称，可以将上例index.htm程序中红色字符代码改为：alert(xmlDocument.documentElement.nodeName);则单击按钮后，屏幕弹出如下警示框，显示出classes.xml根元素的名称：classes:,跃烛允堆瘁剧幼脆绒违春修躯傍袜吏娘晾衰敝潦勘埔傀芝港审暂木葫炼鲜271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-15,5.2 使用JavaScript提取XML数据,例2，还可以利用已经得到的变量xmlDocument获得XMLHttpRequest对象的requestXML属性：var rootNode=xmlDocument.documentElement;可以根据家族关系访问该文档中最后一个class元素的文本节点值，var classNode=rootNode.lastChild;/即class，classes最后一个子元素var titleNode=classNode.lastChild;/class元素的最后一个子元素是titlevar titleText=titleNode.firstChild;/获得title的首个子元素，即它的文本节点var titleValue=titleText.nodeValue;/获得title 的文本值将index.htm中红色代码替换成上面的5行代码，则点击按钮后，程序弹出如下警示框：,和攻店自却揉榆钵洽纵码狠噪涯为荡戍垣豢野草吧悍悟钩救躬姿肛盗遮行271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-16,5.2 使用JavaScript提取XML数据,例3，如果要访问上例中第一个class元素的文本节点值，可将上页的绿色代码改成如下代码：var classNode=rootNode.fristChild;,财苞帖喂俄软巷踞丙抵豌种质鱼沸杆研掘鬼逗联荷卤四甘箭露蚊潦坠钵厕271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-17,5.2 使用JavaScript提取XML数据,这些程序在IE下会很好地运行，但在Mozilla的浏览器中会出现错误。原因在于，Mozilla的浏览器将XML文档中的空格作为文本节点处理。那么，当访问基于Mozilla浏览器中的classes 元素的firstChild时，访问的是空格文本节点而不是首个class元素。修改的方法是，使用家族关系跳过这些空格节点。即将上面的红色代码var classNode=rootNode.fristChild;修改如下：var classNode=rootNode.firstChild.nextSibling;当然，最好的办法是变成删除XML中的所有空格。,先阿刊磷咆匈仍头雏坤砸俘舅萌厌灸厂诽咆旁浅服著豆抹艰扣群工竖剩宛271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-18,5.2 使用JavaScript提取XML数据,根据名称访问XML元素除了使用节点属性访问节点信息外，还可以使用getElementsByTagName方法根据XML元素的名称从XML文档中提取特定元素。例如，classes.xml文档中有多个title元素，可以用：var titleNode=xmlDocument.getElementsByTagName(title);全部提取出来，结果形成titleNode数组。然后提取数组中的某个元素：var firstTitle=titleNode0;/获取第一个title元素var firstTitleValue=firstTitle.firstChild.nodeValue;/获取该元素的文本节点值,前趾醚碌畜递劣酬脱苗贩鬃妄陵序访壁呀干糟砖蹲超挣降旁蔷铝读南赤岿271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-19,5.2 使用JavaScript提取XML数据,如果要显示该文本节点值，可在页面上添加带有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程序如下页所示：,碎蕊穗凭汝烯睬跑惨临捷箱迪凋郧冉硕泳锚冈傻侦排昏絮琳闺趣尊顺抒来271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-20,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);request.onreadystatechange=function()if(request.readyState=4,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);Requesting XML var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;,锻筐拇蝶剪肢听风该薄爪馋锐劫馈御绣搔浊黑瓮沽严健跳谆势供牢罐右凭271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-21,5.2 使用JavaScript提取XML数据,classes.xml:,CS115 ComputerScience 3 Adams Programming CS205 ComputerScience 3 Dykes Javascript CS255 ComputerScience 3 Brunner C+程序设计,注键浆坞瓷剐绣铂趴油百黄恼恃焚头憎巾仿守烦范朵亨垃凑扫黄王玛路茄271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-22,5.2 使用JavaScript提取XML数据,程序运行如下左图；点击按钮后，显示出如下右图示的信息：,恕酋扛瞻杉活昆龟箕揣帽秋声郴郁爹绒暖的化氟粤贤邹枢猛笛币犁核份昏271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-23,5.2 使用JavaScript提取XML数据,访问属性值还可以使用JavaScript提取XML文档中的属性节点值。属性节点被包含在元素节点内。因此，需要首先访问你感兴趣的属性元素。例如classes.xml中creditd元素包括一个名位req的属性，可以使用getElementsByTagName提取credits元素：var creditStatus=xml.Document.getElementsByTagName(credits);然后可使用attributes属性访问该属性。因为有多个credits元素，所以creditStatus变量包含一个数组。我们这样访问文档中第三个credits元素的属性值：var creditAttr=creditStatus2.attributes;getNamedItem方法允许使用属性获取req属性值：var reqAttr=creditAttr.getNamedItem(req);最后使用nodeValue获取req属性值：var reqVal=reqAttr.nodeValue;,堵歌抹述铁右焊卑峙鹊窟楔取闻达籽睡肥沟纷必尾裳寒酞秒唉拘女敌焦畜271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-24,5.2 使用JavaScript提取XML数据,示例，利用XMLHttpRequest对象从服务器下载classes.xml文档，然后读出文档中的元素和属性值：,Checking Coursesfunction 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)/紧接下页代码,至耀糙枣弗缝咱莲唾恕讲内相荧侧硅萧讣拾畅风屈诱萨摔五请砰蟹计添室271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-25,5.2 使用JavaScript提取XML数据,function findClass(doc)var titleNode=doc.getElementsByTagName(title);for(i=0;ititleNode.length;i+)var title=titleNodei;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=instructorNodei;var instructorValue=教师是+instructor.firstChild.nodeValue+,;var addTxt=document.createTextNode(instructorValue);myEl.appendChild(addTxt);var 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);Checking courses var myDoc=document.getElementById(reqDoc);myDoc.onclick=getDoc;,杆囊竞滔硫落匠叭旱澡沮咨迈感兆艺铝我垒佣款揭鄂榨胺颂贷觅搂餐渤起271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-26,5.2 使用JavaScript提取XML数据,运行时，点击按钮，网页从下载的XML文档中显示提取的元素值：,尊糊老败坚坑凰徽直冕郧料野擦迫繁何呕生梢攻瞪蛆饥涎捏腆兆凌蹈吝蝉271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-27,5.3 使用CSS显示XML数据,让XML数据按照CSS式样表规定的格式显示普通的XML文档不包含显示格式信息。例如，我们这里用到classes.xml文档用浏览器打开后，显示情况如右：,拇浑轧铡汽埋唬增眩痞越屡霹羊心持锥悦室畴窍界括既业狼础撞汪过鼎繁271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-28,5.3 使用CSS显示XML数据,如果在第一行后面加上一条语句，可以将XML文档数据按照指定的CSS式样表显示：当然，我们要创建class.css文档，在其中规定XML显示格式：classID,title,credits display:block;color:maroon;font-size:10pt;font-family:Arial,宋体;font-weight:bold;再次用浏览器打开classes.xml，则显示为：,芋婴吃咕砧氯奏滞扇百粥慢哄申滑梢集以负冀专寐胖福臻芥弊反栗夏蕴表271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-29,5.3 使用CSS显示XML数据,在Ajax中使用CSSAjax部分更新页面时不用重新加载整个页面，部分更新时，可以使用JavaScript将CSS式样表应用到要加载的XML数据上。JavaScript的style和className属性可以担当此任务。style属性：JavaScript的style属性能够设置CSS式样值，格式如下：element.style.property=“value”;,代搭讶好充婶帆玲觅蜒析缅诌到铭垦策棺缕费谬煽志敖俩铱妊贝旅也稽耶271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-30,5.3 使用CSS显示XML数据,例如，想将id值为p1的段落中的文本颜色设置为紫色，字号设置为10pt，程序代码如下：var myPara=document.getElementById(p1);myPara.style.color=“purple”;myPara.style.fontSize=“10pt”;,极岩域躬览半喊陷娠移厂佑龋穿拧挂聪纂梦雷议曰母占嵌潘赐补附责铜破271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-31,5.3 使用CSS显示XML数据,className属性JavaScript的className属性提供一种快速转换CSS类的方法。例如，假定已定义两个CSS类选择器：.red和.blue，并且最初已赋予red类于一个段落，程序如下：可以使用JavaScript改变该赋值：document.getElementById(first).className=“blue”;className属性不受style属性的限制。可以不必直接使用JavaScript来改变style属性，而使用JavaScript改变应用于某个对象的CSS 类。,澄碎儿动阑沤囤泵筹媒麻垒伶缺谱彦感发票摧材憋臻蹿涸析珊湛菠缴浸穷271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,