原生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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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 stripslashes和addslashes的区别
2014/02/03 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
简单的分页代码js实现
2016/05/17 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
Python中title()方法的使用简介
2015/05/20 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python实现数独算法实例
2015/06/09 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python 导入数据及作图的实现
2019/12/03 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
HTML5标签大全
2016/11/23 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
操行评语大全
2014/04/30 职场文书
写字楼租赁意向书
2014/07/30 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL