原生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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
js select常用操作控制代码
Mar 16 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JS扩展方法实例分析
Apr 15 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JS+CSS实现动态时钟
Feb 19 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模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python微信公众号开发简单流程
2018/03/23 Python
YUV转为jpg图像的实现
2019/12/09 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
幼儿教师个人总结
2015/02/05 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2015年教师国培感言
2015/08/01 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
全新239军机修复记
2022/04/05 无线电