Javascript - textファイルを読み込みページに表示する(XMLHttpRequest)

下記のボタンを押すと非同期通信(XMLHttpRequest)でファイルを読み込み、内容を表示する

Javascript

非同期通信(XMLHttpRequest)を使用し指定されたファイルを指定されたID名のタグに表示する。

注意：XMLHttpRequestはWWWサーバー上でないと動作しないので、サーバーの起動していないローカルコンピューターでは動作しない

非同期のため、一般的な順次処理と違いプログラムの書き方が特殊でロード状況を逐次確認する部分がある。

      function xmlhttprewuest_demo(id,file){
        var xobj = new XMLHttpRequest();
        xobj.open('GET',file,true);

        //xobj.setRequestHeader('Pragma','no-cache');
        //xobj.setRequestHeader('Cache-Control','no-cache');
        //xobj.setRequestHeader('If-Modified-Since','Thu, 01 Jun 1970 00:00:00 GMT');
        //上の3行のコメントアウトを外すとキャッシュから読み込まなくなります。
        xobj.onreadystatechange = function(){ /* readyStateが変化した時実行される */
          if(xobj.readyState === 4 && xobj.status === 200){
            document.getElementById(id).innerHTML = xobj.responseText;
          }else{
            if(xobj.status === 404){
              document.getElementById(id).innerHTML = "ファイルが見つかりません"+x;
            }else{
              document.getElementById(id).innerHTML = "読み込み中"+x;
            }
          }
        };
        xobj.send(null); /* 通信開始 */
      }
    

Html

      <!-- 書き換える部分 -->
      <div id="target_xmlhttprewuest"><p>外部から読み込まれたファイルはここに表示</p></div>

      <!-- Javascriptを実行するボタン -->
      <p><input type="button" value="タイトル" onclick="xmlhttprewuest_demo(ID名,ファイル名);" /></p>
    

読み込むファイル

内容はHTMLも使用可能。

http://www.achiachi.net/