DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生javascript實現解析XML文檔與字符串
原生javascript實現解析XML文檔與字符串
編輯:關於JavaScript     

之前寫過一篇 《使用jquery解析XML的方法》鏈接是http://www.jb51.net/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);
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved