原生javascript實現(xiàn)解析XML文檔與字符串

字號:


    這篇文章主要介紹了javascript解析XML文檔和XML字符串的方法和具體的代碼解析,有需要的小伙伴可以參考下。
    總代碼如下:
    var XMLHttp = null;
    if (window.XMLHttpRequest) { //現(xiàn)代瀏覽器
      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"); //后出現(xiàn)world
          }
        }
      };
      XMLHttp.open("get", "test1.xml", true);
      XMLHttp.send();
      //非異步代碼寫這里
      console.log("hello"); //先出現(xiàn)hello
    }
    第一步,創(chuàng)建XMLHTTPREQUEST:
    var XMLHttp = null;
    if (window.XMLHttpRequest) { //現(xiàn)代瀏覽器
      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);
    }