POST処理中のJavascript画面再描画( XMLHttpRequest.readyState の状態表示 )がしたい

Question

目標

(用語や考え方が間違っていたらすみません。)
XMLHttpRequest.readyState (0～4)の状態を画面表示したい

練度

基本的なHTMLとCSSが記述できるレベル
(静的な画面表示を依頼されているなかで問題に遭遇中)

現状

正常終了(XMLHttpRequest.status===200 && XMLHttpRequest.readyState===4)
のときのみ再描画される

Foo.OnCreateSuccess = function() {

// nowLoading 表示
dispLoading('NowLoading'); 

// POST値受取
var hoge = new XMLHttpRequest();
hoge.open('POST', 'https://httpbin.org/post'); // ←適当にPOSTできるサイト
hoge.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
var replaceData = POSTする各値をセット;
hoge.send(replaceData);

// 決済開始イベント
hoge.onreadystatechange = function() {
    try{
        if( hoge.status===200 ){
            switch( hoge.readyState ){
              case 2:
                console.log("POST readyState 2/4");
                dispLoading('2/4');
                break;
              case 3:
                console.log("POST readyState 3/4");
                dispLoading('3/4');
                break;
              case 4:
                console.log("POST readyState 4/4");
                dispLoading('4/4');
                if(hoge.responseText.indexOf('success')>0){
                  console.log("success");
                  showPayinfo_after();
                }
                break;
              default:
                dispLoading('connect');
                console.log("HTTP connection success");
                break;
            }
        }else{
          console.log('HTTP error status:' + hoge.status );
          showPayinfo_ng(hoge.status);
        }

    }catch(e){
      console.log('例外を捕捉: ' + e.description);
      showPayinfo_ng('例外を捕捉: ' + e.description);
      return;
    }
  } 

} 

/*------------------------------
Loading 画面表示
------------------------------*/
function dispLoading(msg){

  // #loading があればいったん解除
  removeLoading();

  if( msg == undefined ){ msg = ""; }

  // 画面表示メッセージ
  var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";

  // ローディング画像が表示されていない場合のみ出力
  if($("#loading").length == 0){
    $("body").append("<div id='loading'>" + dispMsg + "</div>");
  }
}

/*------------------------------
Loading 画面解除
------------------------------*/
function removeLoading(){
  $("#loading").remove();
}

/*------------------------------
終了後の画面表示
------------------------------*/
function showPayinfo_after() {
removeLoading();
$('#dialog-box').hide();
$('#dialog-overlay').hide();
$('#message').hide();
$('#before_pay').hide();
$('#after_pay').show();
$('#ng_pay').hide();
}

Comments

[yambejp]

status=200を前提とするのにreadyState=4以外をとって何がしたいのでしょうか？

[yoh0811]

yambejp さま
処理待ち時間が長いため、「2/4→3/4→4/4→success」と進捗の状態表示をしたいのが主な目的です。

[yambejp]

回答つけましたが、読み込み開始から読み込み終わりまでを
単にsetIntervalでLoading画面を出す方がロジックが簡単です

Answer 1

サーバー側の処理のバッファリング次第ですね
なにも対策しないとreadyStateの2,3,4はほぼ同時にシフトします

たとえばサーバー側をPHPで処理する場合こう

• mypage.htm

<script>
var xhr = new window.XMLHttpRequest();
xhr.open("post","xhr.php");
xhr.send();
xhr.onreadystatechange=function(){
  if(xhr.status == 200){
    switch(xhr.readyState){
    case 2:
      document.querySelector('#load').textContent='Loading ';
      break;
    case 3:
      document.querySelector('#load').textContent+='.';
      break;
    case 4:
      document.querySelector('#load').textContent='';
      document.querySelector('#content').textContent=xhr.responseText;
      break;
    };
  }
}
</script>
<div id="load"></div>
<div id="content"></div>

• xhr.php

<?PHP
$str='echo " ";';
passthru($str);
ob_flush();
flush();
$str='sleep 3 ; echo " ";';
passthru($str);
ob_flush();
flush();
$str='sleep 1 ; echo " ";';
passthru($str);
ob_flush();
flush();
$str='sleep 2 ; echo "content";';
passthru($str);
ob_flush();
flush();
ob_end_flush();

※OSのwait処理を使うのでOSによってはsleepを
「timeout /t nn > null」のような適当なwaitに変える必要があります

サーバー側に都度ゴミデータを履かせないとreadyState=3が拾えません。
readyState=2を待たないでも読み込み開始のトリガーからreadyState=4までを
setIntervalしてもよいかも。

Comments

[yoh0811]

ご指摘いただいたとおり、順番にそれぞれの画面(2/4～4/4)の表示状態で
止めてみたところ、きちんと表示されていることが確認できました。
一瞬で通り過ぎていただけだったんですね。

私の練度が至らずPHPも絡めた処理は実現できませんでしたが、
setInterval 含め引き続き勉強したいと思います。

ありがとうございました。

Answer 2

hoge.status===200 は readyState が 4 になっていないと採れません。

【XMLHttpRequest.status - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/status

【【メモ】XMLHttpRequestのイベントについて - Qiita】
https://qiita.com/ShinyaKato/items/64b6726c361f5377b0f3

Comments

[Lhankor_Mhy]

ご提示のQiita記事には、「readyStateが2以上の時アクセス可能」と書いてありますね。

[kei344]

To: Lhankor_Mhyさん
それはreadyState自体なのでは？
hoge.statusが200になるのはreadyState が4の時（それ以前は0）という回答です。（私の勘違いかも）

[Lhankor_Mhy]

当方の環境で試してみたところ、HEADERS_RECEIVED 時点で取れました。

XHRのサンプルコードを見ると、HEADERS_RECEIVED 時点でレスポンスヘッダを取りに行っているので、ステータスコードだけ取れない、というのも少し変な感じがします。
https://xhr.spec.whatwg.org/#the-getresponseheader()-method

[kei344]

確かにそうですね、指摘ありがとうございます。

[yoh0811]

Lhankor_Mhyさま
readyStatus=4 まで 0 から順番に来るものと思って、初期バージョンは case 0,1 もありました(お恥ずかしい)。
Qiita記事、参考になりました、ありがとうごいざいます。