JavaScriptのDOMパーザー

プログラミング

XMLHttpRequestのresponseXMLを使う場合、ブラウザによってはcontent-typeによってパーズしないでnullになる場合がある。これは、responseTextで得られるXMLテキストから、DOMパーザーに通せば強制的にDOM Documentにできます。IEでのローカルファイルでresponseXMLがnullになる問題(ローカルファイルでチェックする場合に便利程度ですが)はこれでも解決できるはず。

function parseXml(xmlText) {
  if (window.ActiveXObject) {
    var domDoc = new ActiveXObject('Microsoft.XMLDOM');
    domDoc.async = false;
    domDoc.loadXML(xmlText);
    return domDoc;
  } else if(window.DOMParser) {
    var domParser = new DOMParser();
    return domParser.parseFromString(xmlText, "application/xml");
  } else {
    return null;
  }
}

function createXmlHttp() {
  if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else if(window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else {
    return null;
  }
}

function createXmlHttpWithCallback(callback) {
  var xmlhttp = createXmlHttp();
  var handler = function () {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        callback(xmlhttp);
      }
    }
  };
  handler.xmlhttp = xmlhttp;
  handler.callback = callback;
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function xmlGet(uri, callback) {
  var xmlhttp = createXmlHttpWithCallback(function (xmlhttp) {
    var dom = parseXml(xmlhttp.responseText);
    if (dom != null && dom.documentElement != null) {
      callback(dom);
    }
  });
  xmlhttp.open("GET", uri, true);
  xmlhttp.send(null);
}

使い方は

xmlGet(uri, function (domdoc) {
 domdoc.getElementById(...;
});

IEはActiveXObjectでMocrosoft.XMLDOM(もしくはMSXML2.DOMDocument)を、firefoxやOperaはwindow.DOMParserを使えます。

以下チェック用JavaScript:

<?xml version="1.0"?>
<html>
  <head>
    <script language="JavaScript">
      //<![CDATA[
        function load() {
          if (window.ActiveXObject) {
            dump("window.ActiveXObject: exists");
          }
          if (window.XMLHttpRequest) {
            dump("window.XMLHttpRequest: exists");
          }
          if (window.DOMParser) {
            dump("window.DOMParser: exists");
          }
        }
        
        function dump(obj) {
          document.getElementById("dump").innerHTML += obj + "<br />";
        }
      //]]>
    </script>
  </head>
  <body onload="load();">
    <div id="dump"/>
  </body>
</html>