html→javascript→phpの読み込み

初めまして、プログラミング初心者です。
下記内容がなかなか解決できず困っております...。
ご存じの方がいらっしゃいましたらお力をお借りしたいです。

【実現したい内容】
下記①→②→③の順でファイルを読み込み、③のjsonデータをブラウザに表示させることです。
※各ファイルのコードは下記に記載しております。
①sample_php2.html
②sample_php3.js
③sample_php1.php

【困っていること】
②の「request.readyState」の値がずっと「2」のままで「4(=DONE)」になりません。
そのため、②の「request.onreadystatechange = function() 」以降の処理ができない状態です。
サーバーはxamppで、ローカルホストで動作させております。

何かアドバイスを頂けましたら凄く嬉しいです。
宜しくお願いします。

①sample_php2.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width">
6  <title>Test</title>
7</head>
8
9<body>
10  <div id="ans1"></div>
11  <div id="ans2"></div>
12  <script src="sample_php3.js"></script>
13</body>
14</html>

②sample_php3.js

javascript
1var request = new XMLHttpRequest();
2  request.open('GET', 'http://localhost/test/sample_php1.php?str=100', true);
3  request.responseType = 'json';
4  request.send(null);
5  alert(request.readyState);
6  alert(request.status);
7  request.onreadystatechange = function() {
8    if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
9      var data = this.response;
10      alert(request.readyState);
11      alert(request.status);
12      alert(data.ans1);
13      alert(data.ans2);
14      console.log("ans1", data.ans1);
15      document.getElementById("ans1").innerHTML = "ans1=" + data.ans1;
16      console.log("ans2", data.ans2);
17      document.getElementById("ans2").innerHTML = "ans2=" + data.ans2;
18    }
19  };

③sample_php1.php

php
1<?php
2$ret = 0;
3if(isset($_GET['str'])) {
4  $str = $_GET['str'];
5  eval(sprintf('$ret=%s;',$str));
6}
7$array = array("ans1" => $ret, "ans2" => $ret * $ret);
8header("Content-Type: text/javascript; charset=utf-8");
9echo json_encode($array);
10?>

追記しました。(2020/04/16)
④sample_php2.php

php
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample</title>
6</head>
7<body>
8  <div id="ans1"></div>
9  <div id="ans2"></div>
10  <script src="sample_php3.js"></script>
11</body>
12</html>

m.ts10806

2020/04/15 14:52

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/04/15 14:53

responseType を「json」にしているのにPHPからは「text/javascript」で返しています。これはどういう意図でしょうか。

sabu

2020/04/15 15:13 編集

アドバイス有難う御座います。その意図は特にありません。ネットで調べ、PHPでJSON用のヘッダを定義して出力する方法に、そのような記述を見ましたのでそれを参考にしました...。

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

回答1件

３点試してみてください。
0. Content-typeをapplication/jsonまたはtext/jsonにする
0. AjaxではなくブラウザからURL直に打って（クエリストリングは固定値で）実行結果を確認
0. ?>を削除

１はそもそも間違ってるので対応必須です。
JSON返すならJSONにしなければなりません。
（レスポンス受け取る側が正しく認識できない可能性）

２はGETで対応されているので、JavaScriptから実行しなくても結果は確認できると判断でしました。

３は返したいのがJSON文字列だけなら閉じる必要がないと判断しました。
何かでゴミが出力されてしまうと正しく認識されない可能性があります。

あと、これは確認ですが、eval()使われてますが、これは何のためでしょう？
単に$retに代入するだけで良いのでは？
初期化含めて三項演算子やNULL合体演算子だけでも済みそうに思います。

php
1//三項演算子
2$ret = (isset($_GET['str']))?$_GET['str']:0;
3//NULL合体演算子
4$ret = ($_GET['str'])??0;
5

投稿2020/04/15 21:31

m.ts10806

総合スコア80850

sabu

2020/04/16 14:38 編集

アドバイス有難う御座います。１に関して、修正しましたが結果は同じでした...。 ※下記２、３は１を反映した状態で確認してみました。２に関して、私の対応方法が違っていたらすいません。ブラウザに「http://localhost/test/sample_php1.php」と入力するとブラウザに{"ans1":0,"ans2":0}と表示されました。３に関して、削除しましたが結果は同じでした。 > あと、これは確認ですが、eval()使われてますが、これは何のためでしょう？ > 単に$retに代入するだけで良いのでは？ ⇒こちらも特に意味がなく、ネット情報を参考にしたのみです...。また、②、③のファイルの内容はそのままで、①を質問へ追記しました④sample_php2.phpに置き換え実行しますと実現したい結果を得ることができしたが、これをhtmlで実現したいです。

AkitoshiManabe

2020/04/18 08:32

> こちらも特に意味がなく、ネット情報を参考にしたのみ eval(オブジェクトリテラル) は初期のPrototype.js が採用していた方法です。 eval 関数の特徴から毒のある手法のため、 json.org によって JSONが提唱され、 JSON.stringify() JSON.parse() の標準実装に至っています。