jQueryでXMLファイルの読み込みを行う方法を解説！
jQueryでXMLファイルの読み込みを行う方法をサンプルコード付きで解説します。jQueryのajaxメソッドを使って簡単に外部のXMLファイルの読み込みを行う事が出来ます。
コンテンツ [表示]
jQueryでXMLファイルを読み込みをして表示するまでの方法をサンプルコード付きで解説していきます。
jQueryでXMLファイルの読み込みを行う方法
それでは早速jQueryでXMLファイルの読み込みを行う方法をサンプルコードで紹介します。最初にjQueryの準備からです。
準備
今回jQueryのajaxメソッドを利用します。jQueryではslim版という機能を絞ったjQueryが用意されていますが、slim版だとajaxメソッドが使えないためslim版以外を利用しましょう。
参考までにjQueryのCDNからの読み込みのコードを紹介しておきます。
head要素の中などに追加してjQueryを利用できる状態にしましょう。
jQueryのCDNからの読み込み
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>実装
実際にjQueryでXMLファイルの読み込みをしていきます。下記のサンプルコードを見てみましょう。
上記のサンプルコードの「RUN」ボタンを押すとXMLファイルを読み込み、その後テーブルにXMLファイルの中身を出力します。
コードの解説をしていきます。
まずXMLファイルの読み込みはjQueryのajaxメソッドを使い行います。
jQueryでXMLファイルを読み込む
$.ajax({
url: 'XMLファイルのURL',
type: 'GET',
dataType: 'XML',
cache: false,
// 成功時の処理
success: function(data) {
// dataにxmlのデータが入っている
},
// 失敗時の処理
error: function(err) {
console.log(err);
}
});
});ajaxメソッドでdataTypeを「XML」として読み込みましょう。successには成功時の処理を、errorには失敗時の処理を設定します。
あとはsuccessの引数にXMLのデータが渡ってくるので（特にパースする必要もなく）、適宜中身をいじくりまわして、画面に出力します。
XMLのデータを解析
$(data).find("fruits item").each(function(index, item){
// id
var id = $(item).find('id').text();
// name
var name = $(item).find('name').text();
// color
var color = $(item).find('color').text();
// テーブルに追加
$('#result tbody').append('<tr><td>'+id+'</td><td>'+name+'</td><td>'+color+'</td></tr>');
});jQueryのfindメソッドを使い、中身のデータを適宜取り出しましょう。
