javascriptでhttpステータスコードを取得

お世話になります。

javascriptをローカルのブラウザで動作させて
対象のwebサーバからhttpのステータスコードを取得、
200か否かで表のSTATUS欄の色と文言を変化させたいです。

※クロスドメイン制限はブラウザで解除

xhr.onreadystatechange実行時にif文で

resultにOKかNG
bg_colorに表示する色

を代入していますが、
その後のdocument.writeにうまく反映されません。
(undefinedになってしまう)

ご教授願います。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

    <script language="JavaScript" type="text/javascript">
      // 自動更新のリロード時間
      //setTimeout("location.reload()",1000*60);

      // DUMY SERVERのURL
      var base_url = "http://XXX.XXX.XXX.";
      
      // DUMY SERVERの数
      var max = 15;
    </script>

  </head>

  <body>

    <script language="JavaScript" type="text/javascript">
      document.write("<table border=\"3\">");
      document.write("<tr bgcolor=\"Aqua\"><th>DUMY SERVER</th><th>STATUS</th></tr>");

      var ip = 10;

      for(var i = 1 ; i <= max ; i++) {
        
        ip++;
        var url = base_url + ip;
        var server = "SAVEDUMY" + i;
        
        var result;
        var bg_color;
      
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);

        xhr.onreadystatechange = function(){
          if (xhr.readyState === 4 && xhr.status === 200){
            //console.log("200");
            result = "OK";
            bg_color = "Lime";
          }else{
            result = "NG";
            bg_color = "Red";
          }
        };

        xhr.send();
        
      document.write("<tr><td>" + server + "</td><td bgcolor=\"" + bg_color + "\">" + result + "</td></tr>");
      }

      document.write("</table>");
    </script>
    
  </body>

</html>

行動規範の内容に同意します

回答2件

        xhr.onreadystatechange = function(){
          if (xhr.readyState === 4 && xhr.status === 200){
            //console.log("200");
            result = "OK";
            bg_color = "Lime";
          }else{
            result = "NG";
            bg_color = "Red";
          }
        };

の中で確実にresultとbg_colorに値が入っていますか？
プログラムのミスやエラーの原因を探る基本的な方法として、console.log()で、処理がどこを通っているかを確認してみるといいと思います。

ちなみにIE11で試したらred,NGがそれぞれ入り、Firefoxだと両者ともundifinedになりました。
クロスオリジン要求が通らずそもそもgetできていない感じです。

※クロスドメイン制限はブラウザで解除
とありますが、これがうまくいっていないのではないでしょうか？

投稿2016/08/01 08:07

NatsumiOki

総合スコア1298

XMLHttpRequest は非同期通信なので、onreadystatechange を定義した直後の document.write は高確率で undifined になります。描画処理は onreadystatechange に代入している関数内で行うのが良いでしょう。

また、document.write は記述場所と実行タイミングによって描画位置が変わる場合があるため、今回のコードであれば "</table>" の後に "<tr><td>"･･･ が出力される可能性があります。

追記：

未テストですが、書くならこういう感じという参考になれば幸いです。
for の中の var を削除したのは、for は var ではスコープを持たないためです。（letなら意図通りになるかも）

JavaScript
1var $body = document.querySelector( 'body' );
2// tableをbodyに追加
3$body.insertAdjacentHTML( 'beforeend', '<table border="3" id="my_table"><tr bgcolor="Aqua"><th>DUMY SERVER</th><th>STATUS</th></tr></table>' );
4var $table = document.getElementById( 'my_table' );
5var ip = 10;
6var i, url, server;
7for ( i = 1 ; i <= max ; i++) {
8	ip++;
9	url = base_url + ip;
10	server = 'SAVEDUMY' + i;
11	( function () {
12		var xhr = new XMLHttpRequest();
13		xhr.open( 'GET', url, true );
14		xhr.onreadystatechange = function() { // ここの中で server などの変数を使うために即時関数を利用しています。
15			var result, bg_color;
16			console.log( xhr.status );
17			if ( xhr.readyState === 4 && xhr.status === 200 ) {
18				result = 'OK';
19				bg_color = 'Lime';
20			} else {
21				result = 'NG';
22				bg_color = 'Red';
23			}
24			// tableに行を追加
25			$table.insertAdjacentHTML( '<tr><td>' + server + '</td><td style="background-color:' + bg_color + ';">' + result + '</td></tr>' );
26		};
27		xhr.send();
28	} )( url, server ); // 即時関数
29}

【JavaScriptのスコープとクロージャとletステートメント - Qiita】
http://qiita.com/yaegaki/items/704f547afca7a09ad131

【JavaScriptで即時関数を使う理由 - Qiita】
http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ?ウェブ開発者アンテナ? [W'ANEB]】
http://web.antenna.work/innerhtml/

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 ? 01日目） | Ginpen.com】
http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/

投稿2016/08/01 08:21

編集2016/08/01 08:49

kei344

総合スコア69400

think49

2016/08/01 21:21 編集

> $table.insertAdjacentHTML( '<tr><td>' + server + '</td><td style="background-color:' + bg_color + ';">' + result + '</td></tr>' ); IE9- には innerHTML で table 要素ノードを書き換えられない仕様があります。 https://blogs.msdn.microsoft.com/ie/2011/07/06/html5-parsing-in-ie10/ MSは2017年4月11日まではIE9をサポートしています。 IE9を動作対象に含めるならば、insertAdjacentHTML を使う事を前提とするなら、文字列処理で "<table>...</table>" を生成し、insertAdjacentHTML で <table> を挿入するといいと思います。もしくは table API でゴリゴリやってもいいですね。 http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/index.html#ID-798055546-h3

kei344

2016/08/01 17:47

いつも指摘ありがとうございます！ IE9を（ほぼ）無視できるまであと1年切ったんですね･･･感慨深いです。 > もしくは table API でゴリゴリやってもいいですね。追加のたびにテーブルを削除するのがあまり美しく無い気がするので、IE9が対象に入るならこちらでしょうね。（通信が終わるまで待って一括で、もできますがそのためにコードを増やすのもあれなので）

行動規範の内容に同意します

あなたの回答