原生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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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 多关键字 高亮显示实现代码
2012/04/23 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
python实现redis三种cas事务操作
2017/12/19 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python文字转语音实现过程解析
2019/11/12 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
财产公证书样本
2014/04/04 职场文书
班长竞选演讲稿
2014/04/24 职场文书
初三新学期计划书
2014/05/03 职场文书
武夷山导游词
2015/02/03 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
首都博物馆观后感
2015/06/05 职场文书
英雄儿女观后感
2015/06/09 职场文书