ajax通信でレスポンスが複数回に見える原因とは？

Question

ajax通信で、ブラウザからsend()を1回しか行っていないにも関わらず
サーバから複数回のレスポンスがあるようにみえます。

以下に疑似コードを示します。

    let request = new XMLHttpRequest();

    // サーバからの返信を受ける関数
    request.onreadystatechange = function()
    {
        if (request.readyState == 4   // 通信完了
         && request.status == 200) {  // 通信成功
            console.log("ajax success");
        }else{
            console.log("ajax fail");
        }
    }

    request.open("POST", "/abc");
    request.send(data);

上記を実行後、ブラウザのデベロッパーツールのコンソールを確認すると、ajax failが3回表示された後、ajax successが1回表示されています。
ブラウザのデバッガで、request.send(data);が1回しか実行されていないことは確認しました。
サーバ側でもデバッガを使って、リクエストを1回しか受けていないことは確認しました。
理由がわからないので、もしご存知の方がおりましたら教えて頂けると幸いです。

Answer 1

onreadystatechangeはreadyState 属性が変化するたびに呼び出されます。

Comments

[torimingo]

ご回答をありがとうございました。
デバッガでrequest.readyStateの値を確認したところ、1から4まで遷移していました。
ajax failが3回表示されたのは、request.readyStateが1から3まで遷移したためですね。

[hentaiman]

そうですね。
XMLHttpRequestに拘り無いならfetch使った方が良いですよ。
fetchにも同様にステータス判断するものとして、pending/fulfilled/rejectがあったりしますが

[退会済みユーザー]

if (request.readyState == 4 // 通信完了
&& request.status == 200) {

を

if (request.status == 200) {
にしてください。これで解決します。

[hentaiman]

> shjy 2020/12/29 22:07
>
> if (request.readyState == 4 // 通信完了
> && request.status == 200) {
>
> を
>
> if (request.status == 200) {
> にしてください。これで解決します。

それだと表示されるログの種類が変わるだけで4回ログが表示される事に変わりありません

[torimingo]

>> hentaimanさん
fetchについて調べてみます。
教えて頂きましてありがとうございます。

>> shjyさん
修正案をありがとうございます。
しかし4回ログが表示されてしまうようですね（^^；）

[退会済みユーザー]

失礼しました
こうしてください

let request = new XMLHttpRequest();

// サーバからの返信を受ける関数
request.addEventListener('loadend', function(){
if(request.status === 200){
console.log("ajax success");
}else{
console.log("ajax fail");
}
});
request.open("POST", "/abc");
request.send(data);

[torimingo]

>> shjyさん
それですと、4回ajax successが表示されちゃいましたので
とりあえず、以下みたいにしときました。
if (request.readyState == 4 // 通信の完了
&& request.status == 200) { // 通信の成功
console.log("ajax success");
}else if(! request.status == 200){
console.log("ajax fail");
}