XMLHttpRequestを使用したjsonデータの送受信

前提・実現したいこと

node.js + express.jsでjsonデータを返信するシステムを作成しています。
ブラウザ側で、XMLHttpRequestを使ってjsonデータを要求し、
サーバー側で、アクセスに応じてres.jsonでjsonデータを返しています。
ブラウザ側では、確認のために、受信したデータをinnerHTMLを使って表示させようとしています。
なお、テンプレートエンジンはEJSを使用しています。

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

エラーメッセージは発生していないのですが、受信したデータがブラウザに表示されません。
XMLHttpRequest.statusを表示させると０になります。

一方で、

ブラウザのアドレスバーに該当アドレス(http://127.0.0.1:3000/resdata)を直接打ち込むと、jsonデータが表示される。
下記index.ejsの<script>内部の日付表示やステータス表示のinnerHTMLは正しく表示される。

ので、XMLHttpRequestの使い方が間違っていると思っているのですが、解決策が分かりません。

ソースコード

####index.js

javascript
1let express = require('express');
2let router = express.Router();
3
4/* GET home page. */
5router.get('/', (req, res, next) => {
6    res.render('index');
7});
8
9module.exports = router;

####index.ejs

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="content-type" content="text/html" ; charset="UTF-8">
5    <title>sample data</title>
6    <link rel='stylesheet' href='/stylesheets/style.css'/>
7</head>
8<body>
9<p>sample data</p>
10<p id="date"></p>
11<p id="res_data"></p>
12<p id="status"></p>
13<p id="response"></p>
14</body>
15<script>
16    window.onload = () => {
17<!-- 日付データ表示 -->
18        let date = new Date();
19        document.getElementById("date").innerHTML = date;
20
21        let xmlHttpRequest = new XMLHttpRequest();
22
23        xmlHttpRequest.timeout = 1000;
24        xmlHttpRequest.responseType = 'json';
25
26        xmlHttpRequest.open( 'GET', 'http://127.0.0.1:3000/resdata', true );
27
28<!-- 受信データ表示 -->
29        xmlHttpRequest.loadend = () =>
30        {
31                document.getElementById("res_data").innerHTML = xmlHttpRequest.responseText;
32        };
33
34        xmlHttpRequest.send( null );
35
36<!-- 確認データ（.status,.response）表示 -->
37        document.getElementById('status').innerHTML = xmlHttpRequest.status;
38        document.getElementById('response').innerHTML = xmlHttpRequest.response;
39
40    };
41</script>
42</html>
43

####resdata.js

javascript
1let express = require('express');
2let router = express.Router();
3let mysql = require('mysql');
4
5let knex = require('knex')({
6    client: 'mysql',
7    connection: {
8        host: 'localhost',
9        user: '******',
10        password: '',
11        database: 'sample_data',
12        charset: 'utf8',
13    },
14});
15
16let Bookshelf = require('bookshelf')(knex);
17
18let Sample_data = Bookshelf.Model.extend({
19    tableName: 'sample_data',
20});
21
22/* GET home page. */
23router.get('/', (req, res, next) => {
24
25    new Sample_data().orderBy('datetime', 'asc')
26        .fetchAll()
27        .then((collection) => {
28            let data = {
29                title: 'sample_data',
30                content: collection.toArray(),
31            };
32            res.json(data);
33        });
34});
35
36module.exports = router;
37

試したこと

下記サイトや他のサイトも検索し、XMLHttpRequestの使用部分(index.ejsの<script>内部)で、

xmlHttpRequest.loadendを.onloadにする。
document.getElementById("res_data").innerHTML = xmlHttpRequest.responseText;の実行時に、this.readyState == 4 && this.status == 0の条件を追加

などを試しました。

参考サイト１
 参考サイト２

補足情報（FW/ツールのバージョンなど）

OS:MacOS 10.14.6
IDE:WebStorm 2019.2.4
ブラウザ:google Chrome Version 78.0.3904.97

以上、よろしくお願いします。

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

回答3件

XHRは他の人がおっしゃるように古いので、覚える必要ないです。
多分動かしたいだろうということでサンプル載せときます。

JavaScript
1var httpRequest = new XMLHttpRequest();
2httpRequest.onreadystatechange = function() {
3	if (httpRequest.readyState === XMLHttpRequest.DONE) {
4		if (httpRequest.status === 200) {
5			console.log(JSON.parse(httpRequest.responseText));
6		} else {
7			alert('リクエストに問題が発生しました');
8		}
9	}
10};
11httpRequest.open('GET', 'https://api.zipaddress.net/?zipcode=1000000', true);
12httpRequest.send();

元ネタ
https://developer.mozilla.org/ja/docs/Web/Guide/AJAX/Getting_Started

投稿2019/11/14 11:52

退会済みユーザー

総合スコア0

AkitoshiManabe

2019/11/14 12:00

> 古いので、覚える必要ない XHRを覚えてしまった身としては、レスポンスヘッダーの取得や意図的に abort() してブラウザにキャッシュさせないといった、巧妙なことができるので実は結構好きなオブジェクトです。

退会済みユーザー

2019/11/14 12:05

あ、そうかもでもそのうちstaticおじさんならぬ、コールバックおじさんとか言われちゃいそうです

pierogi.user

2019/11/15 04:34

＞古いので、覚える必要ないはっきり言っていただいて助かります。他の方が教えてくださったfetchで解決できました。サンプルコードもいただきありがとうございました。

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

ベストアンサー

node.jsでもfetchを実現するライブラリがあるようです。
xhrの煩雑な作業よりfetchの方が直感的に処理できると思います

投稿2019/11/14 10:20

yambejp

総合スコア116694

AkitoshiManabe

2019/11/14 10:28

貴重な情報（NodeJS用fetchモジュールの件）、ありがとうございます。質問に関してはブラウザ側でXHR を使うとの事で上記回答ですが、fetch() でも十分ですよね。

pierogi.user

2019/11/15 04:36

fetchを知らなかったのですが、調べて試してみたら上手くいきました。確かに、fetchの方が直感的で使いやすいです。ありがとうございました。

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

XMLHttpRequestの使い方が間違っていると思っているのですが

イベントリスナの設定方法には２種類あります。

javascript
1let handleEvent = ( event ) => {}
2
3
4xhr.addEventListener('loadstart', handleEvent);
5
6xhr.onloadstart = handleEvent;

後者の書き方の場合、oneventType です.

投稿2019/11/14 09:40

AkitoshiManabe

総合スコア5434

pierogi.user

2019/11/15 04:42

XMLHttpRequestは、fetchよりも煩雑な分、高度な使い方があるのですね。回答頂きありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

XMLHttpRequestを使用したjsonデータの送受信

前提・実現したいこと

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

ソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問