原生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动态调整iframe高度的代码
Apr 10 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
Angular(5.2->6.1)升级小结
Dec 27 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
Underscore源码分析
2015/12/30 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
package.json文件配置详解
2017/06/15 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
js 发布订阅模式的实例讲解
2017/09/10 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
大学自荐信
2013/12/12 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
二年级学生期末评语
2014/12/26 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS