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>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 );
                    }
};

取得方法1: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操作と同じようにセレクターを使用して値を取得することができます。

 

 

 

 

取得方法2: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 ) );

 

 

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

取得方法3:$.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}"` );
            }
);

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

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


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

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

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

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

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。