原生javascript实现解析XML文档与字符串


Posted in Javascript onMarch 01, 2016

之前写过一篇 《使用jquery解析XML的方法》链接是https://3water.com/article/54842.htm,上篇文章详细解释了jQuery 与字符串互相转换的方法 ,这里着重论述javascript操作xml。

总代码如下:

var XMLHttp = null;
if (window.XMLHttpRequest) { //现代浏览器
  XMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5/IE6
}
if (XMLHttp !== null) {
  XMLHttp.onreadystatechange = function() {
    if (XMLHttp.readyState === 4) {
      if (XMLHttp.status === 200 || XMLHttp.status === 304) {
        // var XMLDom = XMLHttp.responseXML; //解析XML文档
        var XMLDoc = XMLHttp.responseText; //解析XML字符串
        var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
        //异步代码写这里
        console.log(XMLDom);
        console.log("world"); //后出现world
      }
    }
  };
  XMLHttp.open("get", "test1.xml", true);
  XMLHttp.send();
  //非异步代码写这里
  console.log("hello"); //先出现hello
}

第一步,创建XMLHTTPREQUEST:

var XMLHttp = null;
if (window.XMLHttpRequest) { //现代浏览器
  XMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE5/IE6
}

第二步,检测ONREADYSTATECHANGE(非异步不需要):

if (XMLHttp !== null) {
  XMLHttp.onreadystatechange = function() {
    if (XMLHttp.readyState === 4) {
      if (XMLHttp.status === 200 || XMLHttp.status === 304) {
        //异步代码写这里
      }
    }
  };
  XMLHttp.open("get", "test1.xml", true);
  XMLHttp.send();
  //非异步代码写这里
}

第三步,解析XML文档或字符串(异步):

XMLHttp.onreadystatechange = function() {
    if (XMLHttp.readyState === 4) {
      if (XMLHttp.status === 200 || XMLHttp.status === 304) {
        // var XMLDom = XMLHttp.responseXML; //解析XML文档
        var XMLDoc = XMLHttp.responseText; //解析XML字符串
        var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
        //异步代码写这里
        console.log(XMLDom);
      }
    }
  };

第四步,解析XML文档或字符串(非异步):

if (XMLHttp !== null) {
  // XMLHttp.onreadystatechange = function() {
  //   if (XMLHttp.readyState === 4) {
  //     if (XMLHttp.status === 200 || XMLHttp.status === 304) {}
  //   }
  // };
  XMLHttp.open("get", "test1.xml", false);
  XMLHttp.send();
  //非异步代码写这里
  // var XMLDom = XMLHttp.responseXML; //解析XML文档
  var XMLDoc = XMLHttp.responseText; //解析XML字符串
  var XMLDom = (new DOMParser()).parseFromString(XMLDoc, "text/xml");
  //异步代码写这里
  console.log(XMLDom);
}
Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
js取模(求余数)隔行变色
May 15 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
生成二维码方法汇总
Dec 26 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 #Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 #Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 #Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
jquery trigger函数执行两次的解决方法
Feb 29 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python写xml文件的操作实例
2014/10/05 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
信息管理应届生求职信
2014/03/07 职场文书
委托书范本
2014/04/02 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
公司合作协议范文
2014/10/01 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python