XMLHttpRequest 非同期処理中にローディングアニメーションを実装

Question

前提・実現したいこと

XMLHttpRequestを非同期で情報をやり取りできるお問合せフォーム実装。
その処理の間、ローディングアニメーションを実装したい。

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

cssでローディングの要素を作り、あとはjs側で表示、非表示を切り替えるだけなのだが、
非同期処理が始まり、終了する間にうまいタイミングで表示されない

var xhr = new XMLHttpRequest();
        var send_flag = false;
        xhr.onreadystatechange = function() {
          switch ( xhr.readyState ) {
          case 0:
            console.log( '未初期化' );
            break;
          case 1:
            console.log( '送信中' );

            break;
          case 2:
            console.log( '待ち' );
            break;
          case 3:
            console.log( '受信中:'+xhr.responseText.length+' bytes.');
            break;
          case 4:
            console.log('受信完了');
            _returnValues = JSON.parse(xhr.responseText);
            console.log(_returnValues);
            if(xhr.status == 200) {
              location.href = './complete.html';
            } else {
              alert("エラーが発生しました。\n" + _returnValues.message);
            }
            break;
          }
        };
          
          var data = JSON.stringify({
            companyName: document.getElementById('company').value,
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            phoneNumber: document.getElementById('tel').value,
            desiredAmount: document.getElementById('price').value
          });
          console.log(data);
          xhr.open('POST','https://url', false );
          xhr.setRequestHeader( 'Content-Type', 'application/json' );
          xhr.send(data);
          return false;

このxhrの処理の初めと終わりに$("#pageloader").fadeIn();と$("#pageloader").fadeOut();
を入れ表示、非表示を切り替えれば良いと思っていたが、どこに表示コードを入れても非同期処理が終わってからアニメーションが表示されてしまう。

非同期処理の間の良いタイミングでアニメーションを表示させるにはどうすれば良いでしょうか？

Answer 1

          xhr.open('POST','https://url', false );

非同期処理になっていません。第3引数を消しましょう。

Comments

[fumii]

ありがとうございます！！
認識が逆になっていました。
無事に解決できました！！