JavaScriptでxmlファイルの読み込み

Question

お世話になっております。
新人プログラマーです。
現在JavaScriptでUI開発を行っております。

###前提・実現したいこと
javascriptで同フォルダにあるxmlファイルの
読み込みをし、HTMLに出力したいと思っています。
現在xmlファイル内の情報を取得し、HTMLに出力
できているのですが以下のエラーがででいます。
エラーの原因を教えていただきたいです。。

###発生している問題・エラーメッセージ

download.js: Uncaught TypeError: Cannot read property 'documentElement' of null
    at XMLHttpRequest.xmlhttp.onreadystatechange 

###該当のソースコード:download.js

//タイトル取得
function getTitle() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    var elem = document.getElementById("title");
    var result = xmlhttp.responseXML.documentElement;
    var nodes = result.getElementsByTagName("Title");
    elem.innerText = nodes[0].textContent;
  }
  xmlhttp.open("GET", "config.xml");
  xmlhttp.send();

・getTitle()はhtml<script>内のwindow.onloadに記載しています。
・download.jsの読み込みはbodyタグの最後に記載しています。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報を記載したほうが良い場合は
教えていただけると幸いです。

Answer 1

xmlhttp.onreadystatechange は、レスポンスが返ってきたとき以外にも、状態が変更したときに呼ばれますので、レスポンスを使いたい場合は、readyState のチェックが必要です。

たとえば、参考 ...

• [Ajax] onreadystatechange の代わりに loadend イベントを使う - Qiita

Comments

[_3104]

回答ありがとうございます！
参考サイトがわかりやすく勉強になりました。

Answer 2

readyState と status を見て処理してください。

    if (xmlhttp.readyState !== 4 || xmlhttp.status !== 200) {
      return;
    }

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/onreadystatechange
https://msdn.microsoft.com/ja-jp/library/dd576252(v=vs.85).aspx

Comments

[_3104]

回答ありがとうございます！
処理を書き忘れていました。