JavaScriptによる、XML空白要素からの属性取得

レスポンスをXMLの空白要素で返すアプリケーションがあり、そのレスポンスから属性情報を取得したいです。

レスポンスとして返ってくるXML※ClientIdをJSで取得したい。

xml
1<?xml version="1.0"?>
2<RegisterClientResponse ResponseCode="0" ClientId="799df50f-2006-49ac-b567-55628000e2f1" />

getElementByTagName
での取得を試みましたが、うまくいかず・・・
妙案があればぜひアドバイスお願いします。

試したHTMLソース
アラートから、正しいxmlが返ってきていることは確認済です。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title></title>
6
7  <script type="text/javascript">
8    function getData() {
9      var xmlhttp = new XMLHttpRequest();
10      xmlhttp.open("GET", "http://127.0.0.1:61234/app/api/registerclient?name=foo");
11      xmlhttp.send();
12
13      xmlhttp.onreadystatechange = function () {
14        if (xmlhttp.readyState == 4) {
15          if (xmlhttp.status == 200) {
16            var elem = document.getElementById("output");
17
18            window.alert(xmlhttp.documentElement);
19            elem.innerHTML += "----- getElementsByTagName -----<br/>";
20            elem.innerHTML += "1<br/>";
21            var docelem = xmlhttp.responseText.documentElement;
22            elem.innerHTML += "docelem=" + docelem + "<br/>";
23            elem.innerHTML += "response=" + xmlhttp.responseXML + "<br/>";
24            var chkresponsecode = docelem.hasAttribute("ResponseCode");
25            var responsecode = docelem.getElementsByTagName("RegisterClientResponse").getAttribute("ResponseCode");
26            console.log(chkresponsecode);
27            elem.innerHTML += "chkresp=" + chkresponsecode + "<br/>";
28            <!--var sourcelineorg = xmlhttp.responseXML.getElementsByTagName("RegisterClientResponse");-->
29            <!--var sourceline = xmlhttp.responseXML.getElementsByTagName("RegisterClientResponse").getAttribute("ClientId");-->
30            <!--var clientid = sourceline.getAttribute("ClientId");-->
31            window.alert("response=" + chkresponsecode);
32            <!--window.alert("clientid=" + clientid);-->
33            elem.innerHTML += "2<br/>";
34            elem.innerHTML += "response:" + responsecode.xmlContent + "<br/>";
35            <!--elem.innerHTML += "clid:" + clientid.textContent;-->
36            elem.innerHTML += "----------<br/>";
37          } else {
38            alert("status = " + xmlhttp.status);
39          }
40        }
41      }
42    }
43  </script>
44</head>
45<body>
46  <input id="Button_Get" type="button" value="取得" onclick="getData();" />
47  <div>受信情報</div>
48  <div id="output"></div>
49</body>
50</html>

int32_t

2021/12/22 01:57 編集

現状のコードでalert()とconsole.log()とid="output"要素の中身には何が表示されるのですか? あと、JavaScript コード内でのコメントは // や /* */ です。 でも間違いとは言い切れませんが、やめたほうがよいです。

Ytaka

2021/12/22 04:08 編集

コメントありがとうございます。 alertやConsole.logは、切り分けのため取得（するはずの）属性、xml自体などを表示させています。 →最終的には全ていらなくなる。 outputの箇所は、ボタンクリック時にinner.HTMLで作成したHTMLを表示します。コメント記載方法についても、アドバイスありがとうございます＜（＿＿）＞

int32_t

2021/12/22 04:16

具体的にどういう文字列が表示されているのかを知りたいです。例えば最初のalert()は「undefined」になりますよね。

Ytaka

2021/12/22 05:30

アラートは1つだけポップされ、「undefined」 html上の表示は === ----- getElementsByTagName ----- 1 docelem=undefined response=[object XMLDocument] === コンソールのエラーとしては以下が表示されていました。 === Uncaught TypeError: Cannot read properties of undefined (reading 'hasAttribute') at XMLHttpRequest.xmlhttp.onreadystatechange (sample3.html:24) 属性の読み込みが正常にできていないのだと思います。

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

回答2件

js
1var docelem = xmlhttp.responseText.documentElement;

docelem が undefined になっているかと思います。responseText は文字列なので、documentElement というプロパティはありません。

xmlhttp.responseXML.documentElement.getAttribute('ClientId') で目的の値が取れるはずです。

投稿2021/12/22 05:27

int32_t

総合スコア20850

Ytaka

2021/12/22 08:50

ありがとうございます。こちらの方法も、ぜひトライしてみたいと思います！先に回答いただいた方にBAつけさせていただきました＜（＿＿）＞

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

ベストアンサー

fragmentを利用しようかと思ったのですが、普通にダミーのDOMを作るだけでいけそうですね

javascript
1const xml='sample.xml';
2fetch(xml).then(res=>res.text()).then(txt=>{
3  const xml=Object.assign(document.createElement('xml'),{innerHTML:txt});
4  const ClientId=xml.querySelector('RegisterClientResponse').getAttribute('ClientId');
5  console.log(ClientId);
6});