https://idea-hack.com/courses/understand-how-to-handle-data-using-xmlhttprequest-method-of-javascript/lessons/how-to-load-xml-using-javascripts-xmlhttprequest/
https://idea-hack.com/courses/understand-how-to-handle-data-using-xmlhttprequest-method-of-javascript/lessons/how-to-load-xml-using-javascripts-xmlhttprequest/

JavaScriptのXMLHttpRequestを使ってXMLを読み込む方法

JavaScriptのXMLHttpRequestを使ってXMLデータを読み込む

JavaScriptでデータの送信・受信を行う場合、fetch()メソッドを使うのが一般的ですが、昔から存在する機能でHMLHttpRequestがあります。

XMLHttpRequestはfetch()メソッドよりも冗長な書き方をしなければいけませんが、画像読み込み時のプログレスバーを出すことができる点でfetch()メソッドよりも優れている部分があります。

補足

fetch()メソッドでもプログレスバーを出すことができる様ですが、ハック的な実装になります。

メソッド

メソッド意味返り値
new XMLHttprequest()インスタンスを生成するXMLHttpRequest
opne(メソッド, url)リクエストを読み込むなし
send()リクエストを送信するなし
XMLHttpRequestAPIの仕様

サンプルコード

サンプルコードとして、XMLファイルを読み込んでページ上に表示するサンプルコードを紹介します。

XMLHttpRequestは基本的にloadイベントを監視して処理後の動作を実装します。

Output
読み込まれたXMLデータの中身
Pug
table.table
			tbody
				tr
					th 読み込まれたXMLデータの中身
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

// XHRを作成
  const req = new XMLHttpRequest();

	// データの種類を設定
  req.responseType = 'text';
	
  // 読み込み完了時のイベント
  req.addEventListener('load', (event) => {
    // レスポンスを受け取る
    const data = event.target.response;
	
    // テキストを出力
		const parser = new DOMParser();
		const XMLDom = parser.parseFromString(data, 'text/xml');
		
		const xmlSeriaize = new XMLSerializer();//XMLの内容を文字列で出力するためにシリアライズ
		const serializedXmlStr = xmlSeriaize.serializeToString(XMLDom);
		targetText.textContent = `${serializedXmlStr}`;
  });

  // ファイルを指定
  req.open('GET', 'https://idea-hack.com/wp-content/uploads/2019/12/sample.xml');
  // 読み込み開始
  req.send();
インストラクター