原生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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 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实现原生态图片上传封装类方法
2016/11/08 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
C语言笔试题
2014/09/04 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
大学国际贸易专业自荐信
2014/06/05 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
工作检讨书500字
2014/10/19 职场文书
模范教师材料大全
2014/12/16 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js