All articles(网络文学目录) All Pictures(图片目录) All Softwares(软件目录)

 
Xml学习笔记(二)Javascript篇_[XML教程]

Writer: 归海一刀 Article type: Programming skills(编程技巧) Time: 2014/3/20 5:13:22 Browse times: 299 Comment times: 0

Xml学习笔记(二)Javascript篇_[XML教程]


Head photo

Go homepage
Upload pictures
Write articles

Xml学习笔记(二)Javascript篇_[XML教程]




























Preface:本文是W3CSchools上《XML指南》Javascript篇的学习笔记。其中大部分内容是对指南的翻译总结。由于原文的例子更详尽生动,如果各位想阅读原文可以到这个网址http://www.w3schools.com/xml/default.asp。 同时,W3CSchools提供了测试,大家可以测测自己对XML的理解程度。




一、XML解析器(Parser)




所有的现代浏览器都会内建一个XML解析器(Parser)来读取和操作XML。Parser将XML读入内存中将之转换为一个DOM(Documnet Object Model)对象。我们可以使用JavaScript存取到这个对象。(备注,Microsoft的Parser可以加载XML文件和字符串中的XML内容,而其他的一些Browser则分别使用不同的Parser去实现。)所有的Parser都可以遍历XML树,读取、插入、删除节点(elements)和attribute。在谈论XML解析时,我们是用Nodes(节点)来代替Elements(元素)。




一般我们会从两个地方加载XML:XML文件或者包含XML的string(字符串)。

使用MicrosoftParser加载XML文件





var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");


使用Parser读取保存在string(字符串)中的XML内容





var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);


注意以上是使用同一个对象的不同方法去实现的。其他的Browser则是用不同的对象去实现。





var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");







var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");




二、XML DOM




DOM(Document Object Model)定义了一种标准的方式去存取和操作XML文件。DOM将XML视作一个树结构。通过DOM可以增加、修改、删除Element,同时可以修改包括Element的Attribute和Element包含的内容(text)。我们将一个Element及其包含的所有东西(Attribute、Text)称作一个Node。

以下是读取的节点的语句:





xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

和用HTML的DOM读取一个id="to"的语句比较可以看到很多相似之处:





document.getElementById("to").innerHTML

(更多有关的DOM内容,可以参考XML DOM指南)



下面是一个完整的例子。用JavaScript从一个XML文件中读取内容,显示到HTML中。以下代码是跨浏览器的。已经考虑到不同浏览器的问题。














W3Schools Internal Note


T

From:

Message:








然后下面这个例子可以快速浏览甚至略过,和上面代码的区别,紧紧是先把XML存到一个string中,然后再用Parser把XML从string中读出来。














W3Schools Internal Note


T

From:

Message:













三、XML to HTML




指南中给出例子的思路就是一边用XML DOM读取XML的内容,一边不停的用document.write写HTML标记和读取到的XML内容。和上面的例子差不多,就不再转贴代码了。




四、XMLHttpRequestObject




这个东西很厉害啊,大名鼎鼎的Ajax就是从这东西变出来的。

什么是XMLHttpRequestObject?XMLHttpRequestObject是开发人员的梦,因为有了它,你就可以:





  • 为网页增加新数据而无需重新加载页面。


  • 在网页加载后向Server请求数据。


  • 在网页加载后从Server接受数据。


  • 在后台向Server传送数据。
其实以上说的都是一回事,关键三个字“无刷新”。


马上看一个例子:














Using the HttpRequest Object



Status:



Status text:



Response:












以上的代码是在button的onClick中读取一个xml文件的内容然后进行显示。这里要强调的是:这里并不是把隐藏的内容显示出来而是确实从Server的XML读取到数据然后作显示的,而且是无刷新的。可以到这个网址去体现一下http://www.w3schools.com/xml/tryit.asp?filename=tryxml_httprequest_js。
Open的true是表示是否进行异步操作,true表示script继续运行而不必等待Server的应答。了解更多的XMLHttpRequest对象,可以到网上查找一下XMLHttp的CHM文档。 注意XMLHttpRequest对象并不是W3C标准建议的。




五、总结

柔合以上的知识就可以使用JavaSripte灵活的读写XML了。在这里我们用到了多种的的Web技术,包括:





  • HTML和HTML DOM


  • XML和XML DOM


  • JavaScript


  • XMLHttp相关对象
本篇简介了以上的某些技术,而关键的是多种的柔合。Ajax不就是这样出来的么,呵呵。


































There are 0 records,
Comment:
Must be registered users to comment(必须是注册用户才能发表评论)

Disclaimer Privacy Policy About us Site Map
Copyright ©2011-
uuhomepage.com, Inc. All rights reserved.