原生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 文件引入实现代码
Apr 23 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js同源策略详解
May 21 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js单词形式的运算符
2014/05/06 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python版简单工厂模式
2017/10/16 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
新书吧创业计划书
2014/01/31 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python