1. 加载XML文件

方法1:ajax方式。代码如下:

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", "data.xml", false);
xhr.send(null);
var xmlDoc = xhr.responseXML;
console.log(xmlDoc);

(关于XMLHttpRequest对象的用法,请参加 http://www.w3school.com.cn/xmldom/dom_http.asp

注意,代码第二行的“false”,表示不用异步。如果这里改为“true”,那么xmlDoc将得到null。因为js的异步操作,不会等待文件加载完,就直接执行下面的语句了。所以,我们这里必须设置为“false”,表示必须等待文件加载完,再执行以下操作,这样才能得到正确的xmlDoc。

这种方式兼容所有高级浏览器,建议采用这种方式加载。

方法2:IE的方式。代码如下:

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

通过IE特有的ActiveXObject("Microsoft.XMLDOM")对象的load()方法加载文件。

注意,这里还是设置了异步是false,原因和方法1的一样。

方法3:Firefox的方式,代码如下:

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

关于跨域加载:安全起见,现代浏览器不能跨域访问,即只能加载本机上的xml文件。

2. 加载XML字符串

先看代码:

       function LoadXmlText() {

             //拼接XML字符串
var txt = '';
txt = txt + "<note>";
txt = txt + "<to>George</to>";
txt = txt + "<from>John</from>";
txt = txt + "<heading>Reminder</heading>";
txt = txt + "<body>Don't forget the meeting!</body>";
txt = txt + "</note>"; if (window.DOMParser) {
//非IE浏览器
xmlDoc = (new DOMParser()).parseFromString(txt, "text/xml");
} else {
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
// 或者:xmlDoc = new ActiveXObject("MSXML2.DOMDocument"); xmlDoc.async = "false"; //不启用异步,保证加载文件成功之前不会进行下面操作
xmlDoc.loadXML(txt);
} console.log(xmlDoc);
}

如果浏览器支持window.DOMParser对象,则直接用它的parseFromString()方法加载xml字符串。

IE浏览器不支持window.DOMParser,则用loadXML()加载。

代码中注释都写的很亲你清楚。

js便签笔记(8)——js加载XML字符串或文件的更多相关文章

  1. javascript加载XML字符串或文件

    1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...

  2. js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2

    1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...

  3. js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  4. js便签笔记(3)——切记:appendChild()、insertBefore()是移动element节点!

    appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> & ...

  5. js便签笔记(6)——jQuery中的ready()事件为何需要那么多代码?

    前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...

  6. js便签笔记(13)——jsonp其实很简单【ajax跨域请求】

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  7. js便签笔记(13)——jsonp事实上非常easy【ajax跨域请求】

    前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明 ...

  8. js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1

    1. 前言 这两天看了一下TOM大叔的<深入理解js系列>中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题.写篇文章,供大家分享. 2. 关于HTMLCollect ...

  9. js便签笔记(10) - 分享:json2.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

随机推荐

  1. bzoj5109(图论好题)

    我的参考题解:https://www.cnblogs.com/ccz181078/p/7907022.html: 不过我感觉题解的压位有问题,(1<<x)还不炸上天.不过这题数据水,好像怎 ...

  2. bzoj1212(trie+dp)

    开始一看多个字符串就想ac自动机,结果发现不行.果然学傻了,,,,只要建个trie然后刷表dp就行了,复杂度最坏是O(字典中最长单词长度*文章长度)的.trie的空间换时间挺不错的. #include ...

  3. spring之jdbcTemplate

    spring的另一个功能模块data access对于数据库的支持 spring data access第一个helloword案例: 使用java程序实现访问配置 1.导包 2.测试案例 @Test ...

  4. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  5. Android 百度云推送

    http://developer.baidu.com/wiki/index.php?title=docs/cplat/push/sdk/clientsdk. public class DemoAppl ...

  6. Docker windows下安装并搭建Nodejs的webapp

    一.关于Docker 什么是Docker?Docker 采用go语言编写,是一个开源的应用容器引擎.让开发者可以快速打包他们的应用以及依赖包到一个封装的可移植的容器Image中,然后发布到任何流行的机 ...

  7. 3D打印软件工具

    切片与工艺规划(打印)软件: 3D打印中另外两个重要的步骤(切片和打印)中可以用到的一些开源,免费的软件和应用 Cura        开源, 免费                    Python ...

  8. vdscode连接git服务器(以码云为例)

    准备工作:先下载并安装git客户端 1.在码云或者github上新建项目,获得新建项目的地址,得到一个类似:https://gitee.com/zhangshitongsky/vueTest.git ...

  9. cxgrid强大用法

    cxgrid强大用法 (2012-07-25 14:09:42) 转载▼ 标签: delphi cxgrid 用法 强大 杂谈 分类: Delphi cxGrid功能强大,适合做企业级的复杂查询.非常 ...

  10. Android-Recyclerview-GridView&瀑布流等效果

    由于Recyclerview是在 android.support.v7.widget.包 RecyclerView,所以需要导Recycler库: 导Recycler库: 选择项目,右键-->  ...