xmlhttpで取得した複数の項目を任意の場所に別々に表示したい

javascriptでゲームを作っています。

ゲームのデータそのものはサーバーに保管し、クライアント側では、サーバー上の文字を表示するだけの仕様となります。

データそのものは下記のサーバーに保管されています。

https://example.com/data.php

ユーザーID(sha256)とパスワード(新規接続ごとに毎回発行したものをcookieで保管)をPOSTすることにより、下記の表示が可能です。

現在の仕様

xmlhttpで取得したものをクライアント側で表示させます。

ただ
https://example.com/data.php
を xmlhttpで取得すると

がまとまって表示されてしまいます。

ポイント、保有金額は任意の場所に分けて表示させたいため、
data_point.php　とdata_money.phpを新たに作り、それぞれはポイントと
金額だけを表示するようにします。

https://example.com/data_point.php

https://example.com/data_money.php

上記のように2つのPHPに分けて独自に表示させ、
そこから取得できた

を任意の場所に置くことにより、ポイントと金額を別々の場所に表示させています。

javascript
1
2  <script language="javascript" type="text/javascript">
3  function OnButtonClick() {
4    var xmlhttp = new XMLHttpRequest();
5    xmlhttp.onreadystatechange = function () {
6      var READYSTATE_COMPLETED = 4;
7      var HTTP_STATUS_OK = 200;
8      if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) {
9        // レスポンスの表示
10        var outFrame = document.getElementById('my_money_view_p');
11        outFrame.innerHTML = this.responseText;
12      }
13    }
14    var textBox1 = document.getElementById('Text1');
15    var textBox2 = document.getElementById('Text2');
16    var PostData = encodeURIComponent('usr') + '=' + encodeURIComponent(textBox1.value)
17      + '&' + encodeURIComponent('pass') + '=' + encodeURIComponent(textBox2.value);
18    PostData = PostData.replace(/%20/g, '+');
19    xmlhttp.open('POST', 'https://example.com/data_money.php');
20    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
21    xmlhttp.send(PostData);
22  }
23  </script>
24</head>
25<body>
26  <input id="Text1" type="hidden" name="usr"/><br/>
27  <input id="Text2" type="hidden" name="pass"/><br/>
28
29<script>
30　　$("[name='usr']").val(usr);
31　　$("[name='pass']").val(pass);
32</script>
33  <input id="my_money_click_p" type="hidden" value="送信" onclick="OnButtonClick();"/>
34  <div id="my_money_view_p"></div>
35</body>
36</html>
37<script>
38document.getElementById('my_money_click_p').click();
39</script>
40
41
42
43
44  <script language="javascript" type="text/javascript">
45  function OnButtonClick() {
46    var xmlhttp44 = new XMLHttpRequest();
47    xmlhttp44.onreadystatechange = function () {
48      var READYSTATE_COMPLETED = 4;
49      var HTTP_STATUS_OK = 200;
50      if (this.readyState == READYSTATE_COMPLETED && this.status == HTTP_STATUS_OK) {
51        // レスポンスの表示
52        var outFrame44 = document.getElementById('my_point_view_p');
53        outFrame44.innerHTML = this.responseText;
54      }
55    }
56    var textBox144 = document.getElementById('Text144');
57    var textBox244 = document.getElementById('Text244');
58    var PostData = encodeURIComponent('usr') + '=' + encodeURIComponent(textBox1.value)
59      + '&' + encodeURIComponent('pass') + '=' + encodeURIComponent(textBox2.value);
60    PostData44 = PostData44.replace(/%20/g, '+');
61    xmlhttp44.open('POST', 'https://example.com/data_point.php');
62    xmlhttp44.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
63    xmlhttp44.send(PostData44);
64  }
65  </script>
66</head>
67<body>
68  <input id="Text144" type="hidden" name="usr"/><br/>
69  <input id="Text244" type="hidden" name="pass"/><br/>
70
71<script>
72　　$("[name='usr']").val(usr);
73　　$("[name='pass']").val(pass);
74</script>
75  <input id="my_point_click_p" type="hidden" value="送信" onclick="OnButtonClick();"/>
76  <div id="my_point_view_p"></div>
77</body>
78</html>
79<script>
80document.getElementById('my_point_click_p').click();
81</script>
82
83

やりたいこと。

現在は
金額については
xmlhttp.open('POST', 'https://example.com/data_money.php');で　<div id="my_money_view_p"></div>を取得、

ポイントについては
xmlhttp44.open('POST', 'https://example.com/data_point.php');で<div id="my_point_view_p"></div>を取得していますが、

このように、phpが項目ごとに独立しているのではなく、

xmlhttp.open('POST', 'https://example.com/data.php');の1回だけで

<div id="point">256</div> <div id="money">45000</div> を一気に取得し、 <div id="my_point_view_p"></div> および <div id="my_money_view_p"></div> をそれぞれ任意の場所に表示できるようにしたいというのが希望です。

PHPを用いたスクレイピングでは、1回に複数のIDを取得し、それぞれを
任意の場所に表示させることが可能ですが、同じようなことを希望しています。

このようなことが可能かご教示いただきたくお願いいたします。

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

回答1件

ベストアンサー

https://example.com/data.php

を xmlhttpで取得すると

<div id="point">256</div> <div id="money">45000</div> がまとまって表示されてしまいます。

まとまって表示されるのは、innerHTML に代入して表示の命令をしているからです。

普通は、表示前にデータをJavaScriptで扱いやすい形に変換します。
応答結果が（XMLなどの）マークアップ言語である場合、DOMParserを使います。

javascript
1var responseText = `<div id="point">256</div>
2<div id="money">45000</div>`;
3
4var parser = new DOMParser();
5var parsed = parser.parseFromString( responseText, "text/html");
6console.log( parsed ); // html > body に 格納される。
7var data = {
8  point: parsed.getElementById("point").textContent|0,
9  money: parsed.getElementById("money").textContent|0
10}
11console.log( data ); // {point:256,money:45000}

https://example.com/data.php に POSTすると、上記のように2種類の値を取得できるので、必要な値 data.money または data.point それぞれを個別にDOM操作で書き換えできます。

したがって、以下のエンドポイント実装は無駄です。

https://example.com/data_money.php
https://example.com/data_point.php

また、応答を JSON とすることで JSON.parse() が使えますので値を活用しやすくなります。

https://example.com/data.php に POST

=> {point:256,money:45000} を応答となるサーバー実装にする。

xmlhttp ではなく、xhr（XMLHttpRequest）と略記するのが一般的です。
また、XHRを使うのであれば、ユーザ関数を作ってコールバック関数を与える方式にし、エンドポイント、応答後の処理関数だけを与える形にします。
コードを読む限り、jQuery.ajax() を使うのが良いと思います。

投稿2020/07/23 23:54

AkitoshiManabe

総合スコア5432

tajix_japan

2020/07/24 06:36

有難うございます。まさに、探していた機能です。ありがとございます。早速、使用してみました。下記で、 text = "<div><money>150,000</money><point>38</point></div>"; に記載されているmoneyとpointを分けて表示することが可能でした。 <BR>+++++++++demo+++++++++++++<BR> <p id="demo"></p> <BR>+++++++++demo2+++++++++++++<BR> <p id="demo2"></p> <BR>+++++++++++++++++++++++++++<BR> <script> text = "<div><money>150,000</money><point>38</point></div>"; var text, parser, xmlDoc; parser = new DOMParser(); xmlDoc = parser.parseFromString(text,"text/xml"); document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("point")[0].childNodes[0].nodeValue; var text, parser2, xmlDoc2; parser = new DOMParser(); xmlDoc2 = parser.parseFromString(text,"text/xml"); document.getElementById("demo2").innerHTML = xmlDoc2.getElementsByTagName("money")[0].childNodes[0].nodeValue; </script> 次に、 text = "<div><money>150,000</money><point>38</point></div>"; の部分を直書きではなく、PHPから拾ってきます。まず、サーバー側のPHPを下記に書き換えました。 <?php header("Access-Control-Allow-Origin: *"); ?> <div><money>120,300</money><point>638</point></div> 次に、javascriptの内容を下記としました。前回作ったjavascriptの内容を今回作ったjavascriptと合体させたつもりなのですが PHPの内容を表示することができませんでした。やってみたことは、 text = "<div><money>150,000</money><point>38</point></div>"; の部分を text = ""+ data + ""; と変えてみました。 document.getElementById("test_view").innerHTML = data; のdataをtext に渡したつもりです。しかしphpの内容を今回作ったjavascriptに渡すことができません。 text = ""+ data + "";　の部分はどう記載すればいいかご教示いただけませんでしょうか? よろしくお願いいたします。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> var xmlHttp; function loadText(){ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://example.com/test.php", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ // alert(xmlHttp.responseText); // alert(xmlHttp.responseText); var data = xmlHttp.responseText; // Ｅ document.getElementById("test_view").innerHTML = data; // 読み込み終わったら画像を消す //document.getElementById("loading").innerHTML = ''; } } </script> </head> <body> <form> <input id="test_click" type="hidden" onClick="loadText()"> </form> <script> document.getElementById('test_click').click(); </script> <div id="test_view"></div> <BR>+++++++++demo+++++++++++++<BR> <p id="demo"></p> <BR>+++++++++demo2+++++++++++++<BR> <p id="demo2"></p> <BR>+++++++++++++++++++++++++++<BR> <script> text = ""+ data + ""; var text, parser, xmlDoc; parser = new DOMParser(); xmlDoc = parser.parseFromString(text,"text/xml"); document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("point")[0].childNodes[0].nodeValue; var text, parser2, xmlDoc2; parser = new DOMParser(); xmlDoc2 = parser.parseFromString(text,"text/xml"); document.getElementById("demo2").innerHTML = xmlDoc2.getElementsByTagName("money")[0].childNodes[0].nodeValue; </script>

AkitoshiManabe

2020/07/24 07:11 編集

xhrのイベントリスナの中で、PHPからの応答を利用できるようになります。 DOMParserは、イベントリスナ内で実行してください。追記）GET async に仕様変更していますね。表示されないのは var data のスコープによるものと思います。

tajix_japan

2020/07/24 07:29

有難うございます。下記で無事取得できました。大変助かりました。深く御礼申し上げます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> var xmlHttp; function loadText(){ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://example.com/test.php", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var data = xmlHttp.responseText; // Ｅ var data, parser, xmlDoc; parser = new DOMParser(); xmlDoc = parser.parseFromString(data,"text/xml"); document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("point")[0].childNodes[0].nodeValue; var data, parser2, xmlDoc2; parser = new DOMParser(); xmlDoc2 = parser.parseFromString(data,"text/xml"); document.getElementById("demo2").innerHTML = xmlDoc2.getElementsByTagName("money")[0].childNodes[0].nodeValue; } } </script> <form> <input id="demo_click" type="hidden" onClick="loadText()"> </form> <script> document.getElementById('demo_click').click(); </script> <BR>+++++++++demo+++++++++++++<BR> <p id="demo"></p> <BR>+++++++++demo2+++++++++++++<BR> <p id="demo2"></p> <BR>++++++++++++++++++++++++++++<BR>

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