XMLHttpRequestによる同期通信

Web系 JavaScript HTML

同期通信によって同一オリジンの別ファイルを読み出そうとしたときにハマってしまったのでメモとして残しておきます。

やりたいこととしては、複数の別のファイルを読み込んで、<div> ～ </div> にその内容を表示させるというものです。for文を回してファイルを複数回取得し、もしファイルが存在しなかったら、代わりに「ファイルが存在しません」というメッセージを <div> ～ </div> に表示させます。

 

読み込むファイルは、page1.html ～ page4.html とし、表示先の <div> の id をそれぞれ "info1" ～ "info4" とします。

プログラムのキモとしては次のようなことになると思います。

  • XMLHttpRequest.open(...) の第3引数をfalseにする
  • XMLHttpRequest.send(...) のあとにresponseTextを取得する
    （イベント処理をしない）
  • XMLHttpRequestに関係する処理を try { ... } でくくる

こうすることでファイルの取得に失敗した場合は、catch節に入ってくるようになります。

 

<script type="text/javascript">
  window.onload = function () {

    var files = [
      "./page1.html",
      "./page2.html",
      "./page3.html",
      "./page4.html"
    ];
    
    var loop = files.length + 1;
    for (var i = 1; loop > i; ++i) {

      try {
        var xhr = new XMLHttpRequest();

        // 同期処理で外部ファイルを処理する
        xhr.open("GET", files[i], false);

        // リクエストを送る
        xhr.send(null);

        // 同期処理なのでresponseをこのタイミングで受け取れる
        document.getElementById("info" + i).innerHTML = xhr.responseText;		
      }
      // Ajax通信でエラーが起きた場合
      catch(e) {
        document.getElementById("info" + i).innerHTML = "<p>ファイルが存在しません</p>";
      }
    }
  };
</script>

<h2>page1の内容</h2>
<div id="info1"></div>
<hr>

<h2>page2の内容</h2>
<div id="info2"></div>
<hr>

<h2>page3の内容</h2>
<div id="info3"></div>
<hr>

<h2>page4の内容</h2>
<div id="info4"></div>

 

 

参考Webページ