原生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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php生成图形验证码几种方法小结
2013/08/15 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
Angular实现form自动布局
2016/01/28 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
就业协议书怎么填
2014/04/11 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
期末学生评语大全
2014/04/24 职场文书
疾病捐款倡议书
2014/05/13 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
债务授权委托书范本
2014/10/17 职场文书
群众路线专项整治方案
2014/10/27 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
小学生暑假生活总结
2015/07/13 职场文书
公司转让协议书
2016/03/19 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python