- 浏览: 72669 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
LeeYee:
zz894571429 写道我把你的oxcow-MsgBox- ...
基于jQuery的简单消息框MsgBox插件 -
zz894571429:
我把你的oxcow-MsgBox-jQuery的js,封装到我 ...
基于jQuery的简单消息框MsgBox插件 -
xiaoxiaozhu:
基于jQuery的简单消息框MsgBox插件 -
liujun58love:
不错,学习了,有机会研究研究。感谢楼主分享
【HTML5活动】HTML5 Canvas实现贪吃蛇
前几天了解了下javascript对于xml解析的一些知识,在这里稍作记录下。这里主要对针对IE、Mozilla进行相关代码编写及测试,不涉及chrome浏览器,因此可能在chrome浏览器相关代码无法正常工作。期间参考了《JavaScript高级程序设计》第15章中的相关知识。
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
IE通过ActiveXObject实现针对xml文档的操作,而Mozilla则通过 document.implementation.createDocument对象实现对xml文档的操作。同时IE提供了load及loadXML两个方法访问xml,而Mozilla只提供了load方法进行。我们可以通过改造Mozilla的相关对象实现与IE相同的loadXML方法。
这里要说明的是在创建好xml文档操作的对象后,默认读取xml的模式为异步即async = true;
当async = true即异步模式时,javascript代码不会等待xml文档完全载入后才继续执行代码,那么就可能会出现在使用xml文档对象时,文档还尚未被完全载入的情况。同时IE与Mozilla处理异步模式的方式也不同:
1、针对IE,异步载入文件时,会使用readyState属性和触发onreadystatechange事件处理函数;readyState属性的说明如下:
0——DOM尚未初始化任何信息;
1——DOM正在载入数据;
2——DOM完成了数据载入;
3——DOM已经可用,不过某些部分可能还不能用;
4——DOM已经完全被加载,可以使用;
2、针对Mozilla,异步载入时,同样会使用readyState属性,但触发的是onload事件处理函数;但readyState属性的定义不同
‘loading’——DOM尚在载入数据;
‘complete’——DOM完成加载,可以使用;
那么当使用异步模式时,针对xml文档的处理就应该放在相应的事件处理函数中及readyState标识为完成加载时,而不应该紧接着load方法之后。
当async = false即异步模式时,可以不用考虑上述问题,因为这时候只有文档已经被完全载入后,javascript才会继续执行后面的代码;
针对以上两个问题,显而易见,为了使用javascript对xml文档的操作是要考虑浏览器的。为此可以创建以下代码:
- function XmlDom() {
- if (window.ActiveXObject) {
- try {
- var oXmlDom = new ActiveXObject( "Microsoft.XMLDOM" );
- oXmlDom.async = false ;
- return oXmlDom;
- } catch (oError) {
- oError.reason;
- }
- throw new Error( "MSXML is not installed on you system." );
- } else if (document.implementation
- && document.implementation.createDocument) {
- var oXmlDom = document.implementation.createDocument( "" , "" , null );
- oXmlDom.addEventListener("load" , function () {
- this .__changeReadyState__();
- }, false );
- /*
- * 设置为同步模式,使其在调用 load 方法完成对xml文档的读入后在继续进行其他操作<br/>
- * 如果设置为异步模式,则在使用 oXmlDom 对象前首先判断xml文档是否已经加载完成。<br/>
- * xml文档加载完成的标志是:<br/>
- * 1、在 IE 中 oXmlDom 对象的 readyState 属性等于4时;
- * 2、在 Mozilla 中 oXmlDom 对象的 readyState 属性等于 'complete' 时;
- */
- oXmlDom.async = true ;
- return oXmlDom;
- } else {
- throw new Error( "Your browser doesn't support an XML DOM object." );
- }
- }
- if (Document) { //这里偷懒了,需要判断是否是Mozilla
- Document.prototype.onreadystatechange = null ;
- Document.prototype.__changeReadyState__ = function () {
- if ( typeof this .onreadystatechange == 'function' ) {
- this .onreadystatechange();
- }
- };
- Document.prototype.loadXML = function (sXml) {
- var oParser = new DOMParser();
- var oXmlDom = oParser.parseFromString(sXml, "text/xml" );
- while ( this .firstChild) {
- this .removeChild( this .firstChild);
- }
- for ( var i = 0; i < oXmlDom.childNodes.length; i++) {
- var oNewNode = this .importNode(oXmlDom.childNodes[i], true );
- this .appendChild(oNewNode);
- }
- };
- Document.prototype.__load__ = Document.prototype.load;
- Document.prototype.load = function (sURL) {
- this .__load__(sURL);
- };
- // 为节点定义xml获取函数,使其节点可以直接使用方法.xml
- // __defineGetter__方法只在 Mozilla中定义
- Node.prototype.__defineGetter__("xml" , function () {
- var oSerializer = new XMLSerializer();
- return oSerializer.serializeToString( this , "text/xml" );
- });
- }
测试代码如下:
测试1、当使用同步模式时
- function test() {
- var oXmlDom = XmlDom();
- oXmlDom.async = false ;
- oXmlDom.load("exam1.xml" );
- alert(oXmlDom.xml);
- }
测试2、当使用异步模式时
- function test() {
- var oXmlDom = XmlDom();
- oXmlDom.async = true ;
- oXmlDom.onreadystatechange = function () {
- //IE|FF
- if (oXmlDom.readyState == 4 || oXmlDom.readyState == "complete" ) {
- alert(oXmlDom.xml);
- }
- }
- oXmlDom.load("exam1.xml" );
- }
如果异步模式时仍使用测试1的代码,将不会得不到任何返回值;
csdn地址:http://blog.csdn.net/oxcow/archive/2010/06/06/5650937.aspx
发表评论
-
【译】jQuery插件编写
2012-12-02 20:19 1292最新内容请查看:http://leeyee.github.i ... -
jQuery eTable Plugin
2012-10-15 13:56 1083最新内容请查看:http://leeyee.github. ... -
ECMAScript中原始类型Null和Undefined小结
2012-07-16 15:40 1068请移步访问:http://leeyee.github.io/ ... -
基于jQuery的简单消息框MsgBox插件
2012-06-10 10:10 10907最新内容请查看:http://leeyee.github.i ... -
【HTML5活动】HTML5 Canvas实现贪吃蛇
2011-11-26 16:10 2565活动地址:http://html5.group.iteye.c ... -
js表格字段排序
2008-09-20 23:33 8351.比较函数生成器: /** * 比较函数生成器 ... -
js实现身份证号码验证
2009-05-08 22:09 798文章最新地址请访问:http://leeyee.github ... -
js检测浏览器版本
2009-08-24 21:47 823最新地址请查看:http://leeyee.github.i ... -
实现调用window.close()关闭窗口时IE不提示
2009-08-24 22:13 1149请查看最新地址:http://leeyee.github.i ... -
javascript 贪吃蛇(一)
2010-03-31 11:00 765snake怎么玩,这里就不做介绍,大家都应该知道。写这篇东西 ... -
javascript 贪吃蛇(二)
2010-03-31 11:56 739在javascript 贪吃蛇(一 ... -
javascript 贪吃蛇(三)【附带源码】
2010-03-31 19:24 922在javascript 贪吃蛇(一 ... -
javascript 最佳实践
2010-04-07 15:58 791首次尝试翻译,如有理解错误还请指正。原文出自http://ww ... -
javascript俄罗斯方块【附带源码】
2010-04-19 14:55 795在看了W3C的关于ECMScript的对象及继承后,先是完成贪 ... -
javascript省市地区联动【素材】
2010-09-12 11:54 940资源源码下载地址:http://download.csdn.n ... -
一些关于javascript、jQuery使用时的建议
2011-04-09 11:53 808最新内容请查看:http:/ ... -
javascript XPath 实现【补充】
2010-06-07 14:23 1759在昨天参照《JavaScript高级程序设计》第15章后,针对 ... -
javascript XPath 实现
2010-06-06 16:26 4601关于XPath的相关知识可以参看http://www.w3sc ...
相关推荐
### JavaScript处理XML文档 #### DOM文档对象模型概述 文档对象模型(Document Object Model,简称DOM)是一种用于HTML和XML文档的标准编程接口。DOM定义了一种逻辑结构,以及一系列用于访问和操纵文档的方法。...
虽然在客户端使用JavaScript直接保存XML文件存在限制(通常需要在服务器端处理),但在某些情况下,可以使用`save`方法(仅限于IE)或通过`toString`方法获取XML文档的字符串表示,然后通过AJAX请求或其他方式将其...
总结,XML文件处理是软件开发中的基础技能,涉及文件读写、DOM操作、XPath查询等多个方面。掌握这些知识能帮助我们有效地管理和操作结构化数据。在实际项目中,理解并运用这些概念可以提高数据处理的效率和准确性。
JavaScript,作为Web开发中的主要脚本语言,常常被用来解析和操作XML文档,以实现动态内容的生成和数据处理。 在JavaScript中处理XML,主要有两种方法:DOM(Document Object Model)和SAX(Simple API for XML)。...
- **节点类型**:理解XML文档中的不同节点类型(如元素节点、文本节点、属性节点等)对于有效处理XML至关重要。 - **获取节点**: - **`getElementsByTagName`**:根据标签名获取一组节点。 - **`...
最后,我们可以将处理后的XML文档保存到文件或直接获取其字符串表示: - **保存到文件**: ```javascript xmlDoc.save("output.xml"); ``` - **获取XML字符串**: ```javascript alert(xmlDoc.xml); ``` #### 三...
因此,JavaScript 对 XML 文件的解析能力对于处理动态数据非常关键。 #### 二、JavaScript 解析 XML 的方法 ##### 1. **使用 ActiveXObject (IE 浏览器)** - **代码示例**: ```javascript function ...
DOM是一种标准,允许程序和脚本动态更新、添加、删除和改变元素和属性,使得XML文档可以被解析和处理。下面将详细介绍如何使用JavaScript进行XML文件的操作,主要包括增加、删除、修改和查询。 1. **加载XML文件** ...
在JavaScript中,XML DOM(Document Object Model)提供了一组接口,用于创建、修改和遍历XML文档。例如,你可以使用`DOMParser`对象将XML字符串解析为DOM树: ```javascript let xmlString = '<root><item id="1">...
总之,这篇博客详细介绍了如何使用JavaScript与XML文件交互,这对于任何需要在客户端处理结构化数据的Web开发者来说都是非常有价值的知识。通过掌握这些技术,开发者可以构建更强大、更灵活的Web应用程序,动态地...
总结来说,Node.js结合`xml2js`库提供了强大且灵活的XML处理能力,使JavaScript开发者能够轻松地在服务器端进行XML文件的读写操作。通过理解这一实例,你可以更好地掌握在Node.js环境中使用JavaScript处理XML的技巧...
- **XMLSerializer**:如果需要将修改后的XML文档保存为文件,可以使用XMLSerializer将DOM对象序列化为字符串。 ```javascript var serializer = new XMLSerializer(); var xmlString = serializer....
// 在此处处理解析后的XML文档 } }; xhr.send(); ``` 这段代码创建了一个新的XMLHttpRequest实例,打开到'm.xml'的连接,然后发送请求。当请求完成且状态为200(表示成功)时,`onreadystatechange`函数会被调用,...
XML文档结构清晰,易于机器解析和生成,常用于数据交换、配置文件和API接口的数据格式。 XSL(eXtensible Stylesheet Language)是一种样式表语言,用于转换XML文档的格式。XSL分为两个主要部分:XSLT(XSL ...
资源名称:使用Javascript解析xml文件或xml格式字符串 中文WORD版 内容简介: 本文档主要讲述的是使用Javascript解析xml文件或xml格式字符串;javascript中,不论是解析xml文件,...
本文档将详细介绍一个自定义的JavaScript库,该库提供了一系列用于操作XML数据的方法,包括加载XML文件(同步和异步)、将字符串转换为XML文档等功能。 #### 二、XML操作函数库概览 该库包含三个主要方法:`XML....
在JavaScript中,XML文档可以通过DOM(Document Object Model)接口来解析。DOM是一种标准,允许程序和脚本动态更新、添加和删除HTML或XML文档的内容和结构。XML文档被解析成一个DOM树,每个节点代表XML文档的一个...
在浏览器环境下,我们通常用`XMLHttpRequest`对象来获取服务器上的XML文件,然后使用`responseXML`属性来获取XML文档对象。 以下是一个基本的示例,展示了如何使用JavaScript加载XML文件并进行解析: ```...
一旦有了XML文档对象,我们可以将其内容转换为HTML。这通常涉及到遍历XML节点并创建对应的HTML元素。例如,如果XML是简单的列表,我们可以创建一个`<ul>`元素,并为每个`<item>`元素创建一个`<li>`: ```javascript...
XML文档通常包含结构化信息,而处理这些文档时,我们经常需要链接不同的XML文件或者对XML文档进行操作。在这个主题中,我们将深入探讨XML链接、文档处理以及XPath在其中的作用。 XML链接主要涉及到两个概念:XLink...