MENU

JavaScriptXMLjQuery

【JavaScript】 サーバーからXMLデータを取得して利用する方法

更新日:2020/06/22

 

ブラウザ上でサーバーからXMLデータをダウンロードして、値を取り出す方法を3つ紹介します。
今回はネイティブな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>https://affi-sapo-sv.com/note/</loc>
        <lastmod>2020-06-18</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://affi-sapo-sv.com/note/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 );
                    }
};

 

 

取得方法1:XMLHttpRequestを使用

 

XMLHttpRequestのインスタンスを作成して、open()メソッドで読み込みXMLデータのURLを指定します。

 

次にoverrideMimeType()メソッドでMimeタイプに"text/xml"をセットします。
こうすることで、サーバーから受け取ったデータを強制的にXMLとして処理します。

 

このとき、responseTypeは""(空白文字列)または"document"である必要があります。

 

次に通信成功時の処理をonloadプロパティに。
失敗時の処理をonerrorプロパティにセットします。

 

onloadは、サーバーからレスポンスが返ってくると呼び出されます。
404なども通信としては成功なので、onerrorではなくてonloadが呼び出されます。

 

 

const xmlUrl = "https://affi-sapo-sv.com/note/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操作と同じようにセレクターを使用して値を取得することができます。

 

 

 

 

取得方法2:fetch()を使用

 

fetch()を使用すると、XMLHttpRequestよりも簡潔な記述が可能です。

 

fetch()は指定したURLからデータを取得します。
fetch()のリターン値はPromiseオブジェクトで、then()メソッドで登録したコールバック関数でXMLデータ(文字列)を取得します。

 

なお下の例では、コールバックでres.text()の実行結果をリターンしています。
これは、res.text()はPromiseオブジェクトをリターンするためです。

 

そのため、次に続くthen()でXMLデータ(文字列)を受け取っています。

 

受け取ったデータは文字列なので、オブジェクトに変換します。
XML文字列をオブジェクトに変換する方法は、次の記事を見てください。
参考記事:【JavaScript】 文字列のXMLデータをオブジェクトに変換する方法

 

const xmlUrl = "https://affi-sapo-sv.com/note/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 ) );

 

参考記事:【JavaScript】 非同期はPromise?解説が難しいので自分で理解してみた

取得方法3:$.ajaxを使用

 

jQueryを読み込んでいる場合は、$.ajaxを使用します。
下の例のように、$.ajaxの第一引数にオブジェクトで、urlに読み込むXMLのURL、typeに"GET"、dataTypeに"xml"を指定します。

 

このオブジェクトには、成功時のコールバック(successプロパティ)と、エラー時のコールバック(errorプロパティ)を指定できますが、現在はほとんど使われていません。

 

かわりに、$.ajax()の返り値(Deferredオブジェクト)が持っているthen()メソッドを使用します。
Deferredオブジェクトは、Promiseオブジェクトと同じように使用できます。

 

const xmlUrl = "https://affi-sapo-sv.com/note/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}"` );
            }
);

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php