【JavaScript】 サーバーからXMLデータを取得して利用する方法
更新日：2020/06/22
ブラウザ上でサーバーからXMLデータをダウンロードして、値を取り出す方法を３つ紹介します。
今回はネイティブなJavaScriptだけでなくjQueryもとりあげます。
サーバーからXMLを取得
Ajaxを利用して、サーバー上のxmlデータを読み込んでみます。
ブラウザ上で簡単にAjaxを利用する方法は、いくつかあります。
今回は次の3つを紹介します。
(1) XMLHttpRequestを使用する
(2) fech()を使用する
(3) jQueryの$.ajax()を使用する
それぞれの使用例をお伝えします。
なお、今回は次のような当サイトのサイトマップを読み込んでみます。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://note.affi-sapo-sv.com/</loc>
<lastmod>2020-06-18</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://note.affi-sapo-sv.com/programming.php</loc>
<lastmod>2020-06-18</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
</urlset>
また共通関数として、次の関数でXMLの内容を取得します。
共通関数
const printXML = xmlData => {
const xml = xmlData.querySelectorAll("urlset url loc");
for( x of xml ){
console.log( x.textContent );
}
};
取得方法１：XMLHttpRequestを使用
XMLHttpRequestのインスタンスを作成して、open()メソッドで読み込みXMLデータのURLを指定します。
次にoverrideMimeType()メソッドでMimeタイプに"text/xml"をセットします。
こうすることで、サーバーから受け取ったデータを強制的にXMLとして処理します。
このとき、responseTypeは""（空白文字列）または"document"である必要があります。
次に通信成功時の処理をonloadプロパティに。
失敗時の処理をonerrorプロパティにセットします。
onloadは、サーバーからレスポンスが返ってくると呼び出されます。
404なども通信としては成功なので、onerrorではなくてonloadが呼び出されます。
const xmlUrl = "http://note.affi-sapo-sv.com/sitemaps.xml";
const xreq = new XMLHttpRequest();
xreq.open( "GET" , xmlUrl );
xreq.responseType = "document";
xreq.overrideMimeType("text/xml");
xreq.onload = ()=>{
if( xreq.readyState === 4 ){
if( xreq.status >= 200 && xreq.status <= 299 ){
if( xreq.responseXML === null ) {
console.log( "XMLではない" );
}else{
printXML( xreq.responseXML );
}
}else {
console.log( "status error:" + xreq.status );
}
}
};
xreq.onerror = (e) => {
console.log( "error" );
};
xreq.send();
XMLデータはxreq.responseXMLにセットされます。
これはDOM操作と同じようにセレクターを使用して値を取得することができます。
取得方法２：fetch()を使用
fetch()を使用すると、XMLHttpRequestよりも簡潔な記述が可能です。
fetch()は指定したURLからデータを取得します。
fetch()のリターン値はPromiseオブジェクトで、then()メソッドで登録したコールバック関数でXMLデータ（文字列）を取得します。
なお下の例では、コールバックでres.text()の実行結果をリターンしています。
これは、res.text()はPromiseオブジェクトをリターンするためです。
そのため、次に続くthen()でXMLデータ（文字列）を受け取っています。
受け取ったデータは文字列なので、オブジェクトに変換します。
XML文字列をオブジェクトに変換する方法は、次のページを見てください。
参考記事：【JavaScript】 文字列のXMLデータをオブジェクトに変換する方法
const xmlUrl = "http://note.affi-sapo-sv.com/sitemaps.xml";
fetch(xmlUrl)
.then( res => {
if (res.status >= 200 && res.status < 300) {
return res.text();
}
throw new Error( `${res.statusText}(${res.status})` );
})
.then( xmlString => {
const xmlData = new window.DOMParser().parseFromString(xmlString, "text/xml");
if( xmlData.getElementsByTagName("parsererror").length ){
throw new Error( "XMLではない" );
}
printXML( xmlData );
})
.catch( e => console.log( e.message ) );
取得方法３：$.ajaxを使用
jQueryを読み込んでいる場合は、$.ajaxを使用します。
下の例のように、$.ajaxの第一引数にオブジェクトで、urlに読み込むXMLのURL、typeに"GET"、dataTypeに"xml"を指定します。
このオブジェクトには、成功時のコールバック(successプロパティ)と、エラー時のコールバック(errorプロパティ)を指定できますが、現在はほとんど使われていません。
かわりに、$.ajax()の返り値（Deferredオブジェクト）が持っているthen()メソッドを使用します。
Deferredオブジェクトは、Promiseオブジェクトと同じように使用できます。
const xmlUrl = "https://note.affi-sapo-sv.com/sitemaps.xml";
$.ajax( {
url:xmlUrl,
type:"GET",
dataType:"xml"
}
).then(
xmlData => {
printXML( xmlData );
},
( xhr , errorText , error ) => {
console.log( `error: status ${xhr.status}(${xhr.statusText}) Message "${ errorText}"` );
}
);
更新日：2020/06/22
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
