原生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 操作下拉列表框实现代码
Feb 22 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
支持中文的php加密解密类代码
2011/11/27 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php实现三级级联下拉框
2016/04/17 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
Python迭代用法实例教程
2014/09/08 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python实现代码统计程序
2019/09/19 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
《难忘的泼水节》教学反思
2014/02/27 职场文书
房产委托公证书
2014/04/08 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
环境卫生整治简报
2015/07/20 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS