271Ajax编程技术第五章XML要点.ppt
《271Ajax编程技术第五章XML要点.ppt》由会员分享,可在线阅读,更多相关《271Ajax编程技术第五章XML要点.ppt(31页珍藏版)》请在三一办公上搜索。
1、Ajax编程技术第五章XML要点,辅坷狼龚习矿梳脆元弯俄媚链呐有应耶侣许刑炮辅胀吧越渗飘势洽猿羽芳271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-2,5.1 XML基础,使用XMLHttpRequest对象向服务器提出请求后,服务器返回数据的格式有两种:文本格式:是一种很容易添加到页面的字符,然而,在数据交换方面,文本格式非常有限。字符之间不存在元素、数据类型等区别。XML格式:是一种标记语言,它使用用户自定义标记,按照特定的方式组织数据。浏览器从响应Ajax请求的服务器中接收XML文档时,我们需要一种方法来提取XML数据并显示之。JavaScript可以
2、使用节点、节点属性和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
3、文档。其中我们将创建一组自定义的标记:,CS115 ComputerScience 3 Adams Programming,包含所有其他元素的根元素,Classes的子元素,元素的开始标记,元素的结束标记,ComputerScience,元素所包含的内容,剁扒抢粳参每谢臼末屉蛾仟堰轰秩食鲍毅弊朝婚伎烷歹藻绳铺誓饿砌厕遁271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-5,XML语法XML文档的从XML申明开始:XML有一个包含其他所有元素的根元素,如上例中的;XML的标记必须有开始标记和结束标记,中间是元素内容:Programming 空元素没有元素内容,也
4、没有元素结束标记,但元素开始标记以“/”封口;标记嵌套必须正确,不能交叉嵌套;标记内的属性值必须用引号界定。,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 XM
5、L基础,示例:请求服务器端的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,t
6、rue);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 Pro
7、gramming 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基
8、础,如果将index.htm中红色字符显示的代码该成如下代码:alert(xmlDocument.xml);则程序弹出的警示框为右图所示的警示框:本章后面将介绍如何使用JavaScript从服务器返回的XML文档中提取数据。,缓仙酞栽郑陡瓶岳傲宇欠陀毕泛外展牛矾率癣摆锯娱悼捎镍硝哎鸥慷暂压271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-11,5.2 使用JavaScript提取XML数据,一旦从服务器中获得XML文档,下一步要做的工作就是使用JavaScript从该文档中提取XML数据。我们可以使用节点、节点属性或DOM方法获取。除了使用XML元素的值之外
9、,还可以提取XML属性的值。,出桃佃幼鸟旋鹰使襟刹二论碑却辟茨溪赛槽敷束厉尝锻黔樱拜唱联谬颠捧271-Ajax编程技术第五章XML要点271-Ajax编程技术第五章XML要点,5-12,5.2 使用JavaScript提取XML数据,使用节点JavaScript包括内置节点属性,可以使用这些属性访问XML文档中的节点。也可以使用documentElement属性访问XML文档的根元素。其他节点属性包含的家族如下所示:firstChild:第一个子节点;lastChild:最后一个子节点;nextSibling:下一个同属(兄弟)节点;previousSibling:前一个兄弟节点;childN
10、odes:子节点数组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 文档中的根元素名称,可以将上例in
11、dex.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.docum
12、entElement;可以根据家族关系访问该文档中最后一个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行代码,则点击按钮后,程序弹出如下警示
13、框:,和攻店自却揉榆钵洽纵码狠噪涯为荡戍垣豢野草吧悍悟钩救躬姿肛盗遮行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下会很好地运行
14、,但在Mozilla的浏览器中会出现错误。原因在于,Mozilla的浏览器将XML文档中的空格作为文本节点处理。那么,当访问基于Mozilla浏览器中的classes 元素的firstChild时,访问的是空格文本节点而不是首个class元素。修改的方法是,使用家族关系跳过这些空格节点。即将上面的红色代码var classNode=rootNode.fristChild;修改如下:var classNode=rootNode.firstChild.nextSibling;当然,最好的办法是变成删除XML中的所有空格。,先阿刊磷咆匈仍头雏坤砸俘舅萌厌灸厂诽咆旁浅服著豆抹艰扣群工竖剩宛271-Aj
15、ax编程技术第五章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;/获取第一个titl
16、e元素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=docum
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 271 Ajax 编程 技术 第五 XML 要点

链接地址:https://www.31ppt.com/p-4741383.html