XHRでresponseTextがうまく取得できない。

Question

初めまして。
JavaScriptでどうにも分からない事が出来たため、ご質問させていただきます。
皆様の知恵をお借りいただければと思っております。
どうぞ、宜しく願いいたします。

##XHRのresponseTextがうまく取得できない
趣味でJavaScriptとPHPの非同期通信を使ったアプリを作ろうとしています。
現在分からない事は、この非同期通信の部分でresponseTextが取得できません。

この"取得できない"と言うのは少し語弊がありまして
"取得はできているが、そのデータを扱おうとした時に扱うことができない"の方が正しいかもしれません。

##実際みてみる
xhrオブジェクトの中身をみてみますと、やはり取得自体は出来ているようです。

しかしこれを

console.log(xhr.responseText);

などで利用しようとすると

中身が空扱いになり、扱うことができません。

##理由が全然分からない
xhrオブジェクトのresponsTextプロパティには、間違いなく値は入っているにもかかわらず、
何故、その値を使用しようとするとできないのでしょうか？

皆様の知識でお教えいただければと思います。

宜しくお願いいたします。

##追記
ご指摘をいただきましたので、該当のJavaScriptファイルのソースコードを記載します。
宜しくお願いいたします。

'use strict';

const w = window,
      d = document
      ;

const $ = id => {
  return d.getElementById(id);
}

const $t = tag => {
  return d.getElementsByTagName(tag);
}

const $c = cls => {
  return d.getElementsByClassName(cls);
}

class User{

  constructor(){
    const form = $t('form');
    this.xhr = new XMLHttpRequest();

    for(let i=0; i < form.length; i++){
      form[i].addEventListener('submit', (e) => {
        return e.preventDefault();
      });
    }

    $('tweet_btn').addEventListener('click', () => {
      this.postTweet();
      this.getNewTweets();
    });

    this.xhr.onreadystatechange = () => {
      if (this.xhr.readyState === 4 && this.xhr.status === 200){
      }
    }
  }

  postTweet() {
    const url = './tweet.php',
          tweet_msg = $('tweet_msg').value,
          data = {
            tweet : tweet_msg,
            mode : 'ALL'
          }
          ;
    
    this.xhr.open('POST', url);
    this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    this.xhr.send(JSON.stringify(data));
  }

  getNewTweets() {
    const url = './tweet.php',
          latest = $c('tweet_date').item(0).innerText,
          data = {
            latest : latest,
            mode : 'LATEST'
          }
          ;

    this.xhr.open('POST', url);
    this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    this.xhr.send(JSON.stringify(data));
    console.log(this.xhr.responseText);
  }

}

const user = new User();

Comments

[Lhankor_Mhy]

情報が少ないので推測ですが、非同期処理の結果を同期的に取得しようとしているのではないでしょうか。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[yambejp]

パラメータ無しでlocalhostのtweet.phpにアクセスすると
「これはresponseTextです」が取得できるという仕様でしょうか？

[ar0890]

Lhankor_Mhy様
申し訳ありませんでした。
追記いたしましたので、宜しくお願いいたします。

[ar0890]

yambejp様
そのご認識であっています。
後にjsonを扱うつもりではありますが、取りあえずで試してみた所、
質問のエラーが出て困っている所です。

[yambejp]

回答付けておきました
jsonに変換したい場合は
res.text()をres.json()としてください

[ar0890]

重ね重ねありがとうございます。
textとjsonの扱いが違うのは承知しておりましたが、
取り合えず今理解できてない部分から理解をして次に進もうと思っています。
Lhankor_Mhy様もお忙しい中ありがとうございました。

Answer 1

fetch('tweet.php').then(res=>res.text()).then(console.log);

Comments

[ar0890]

ありがとうございます。
コピペですが、無事にデータを取得する事が出来ました。
正直、理解がおいついていませんが、非同期通信と同期通信のデータの扱いに合わせて、
そちらの構文を説明してるドキュメントを見ながら理解を深めていこうと思います。

[yambejp]

xhrはほぼfetchにリプレースされつつあります
非同期通信、データ渡しが楽になり
戻り値のデータ変換も簡単にできるので
この手の処理では基礎的な技術になっています

[ar0890]

jQueryを使わずAjaxを扱うとなると、xhrが基本と思っておりましたが、
現在ではそうなっているのですね。
自分の知見の狭さがただただお恥ずかしい限りです。
詳しくお教えいただきありがとうございます。

Answer 2

IEサポートする理由がなければ、yambejp さんの回答を参考に fetch() で実装したほうが良いと思います。

理由が全然分からない

readyState が 4 未満のため、データを参照できない状態だからです。

ご質問のconsole.log(this.xhr.responseText) をconsole.log(this.xhr.readyState) に変えて確認してみてください。

    this.xhr.onreadystatechange = () => {
      if (this.xhr.readyState === 4 && this.xhr.status === 200){
        console.log( this.xhr.responseText );
      }
    }

Comments

[ar0890]

そういう事なんですね。
理解不足な部分が多々ありお恥ずかしい限りです。
正直readyStateの事はあまりよくわかっていなかったので、ご指摘の通りに色々試してみようと思います。
ありがとうございます。

[AkitoshiManabe]

https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState
参考までに。