jQuery 外部XMLファイルを読み込む

| comment (0) | trackback (0)

xml 形式のデータは、単なるテキストではなく階層構造をもったオブジェクトとして取得するために ajax() 関数を使用します。
次に示すのは ajax() 関数の書式です。

$.ajax({
	url: '読み込むxmlファイル',
	dataType: 'xml',
	success : function(data){
		// 読み込んだファイルに対する処理
	}
})

url には取得したい xml ファイルのファイル名を指定します。
dataType にはデータの種類として 'xml' を設定します。
success はデータの取得に成功したときに実行する関数を設定します。引数は取得した xml オブジェクトです。

$.ajax({
	url: '読み込むxmlファイル',
	dataType: 'xml',
	success: xmlParser
})

function xmlParser(xml) {
	// 読み込んだファイルに対する処理
}

次のような xml ファイル 'books.xml' を読み込みデータを加工して html として表示してみましょう。

<?xml version="1.0" encoding="utf-8" ?>
<booklist>
  <book>
    <title>数学読本〈2〉 簡単な関数 平面図形と式 指数関数・対数関数 三角関数</title>
    <description>1次関数、2次関数、分数関数などの関数についての初歩から始め、数式の座標による表わし方に進み、指数関数・対数関数・三角関数に入ります。(「BOOK」データベースより)</description>
  </book>
  <book>
    <title>数学入門〈上〉</title>
    <description>数学は試験のためにだけ必要なもの、卒業と同時にさっぱり忘れてしまうものではなかったか。しかし今日数学はあらゆる分野に活用されている。現代社会に活動するすべての日本人に必要な数学の知識を、日常生活の論理に定着させて分りやすく説き、会社経営や商品販売は勿論、家庭生活にも豊富な知恵とアイディアを提供する。(「BOOK」データベースより)</description>
  </book>
  <book>
    <title>数学ガール</title>
    <description>「僕」の心をときめかす、数式と二人の少女。オイラー生誕300年に捧ぐ魅惑の数学物語。(「BOOK」データベースより)</description>
  </book>
</booklist>

読み込んだデータの加工は each() 関数を使用します。

$("book",xml).each(function () {
	$("dl").append('<dt>' + $("title",this).text() + '</dt><dd>' + $("description",this).text() + '</dd>');
});
$(document).ready(function () {
	$.ajax({
		url: 'books.xml',
		dataType: 'xml',
		success: xmlParser
	});
});

function xmlParser(xml) {
	$("book",xml).each(function () {
		$("dl").append('<dt>' + $("title",this).text() + '</dt><dd>' + $("description",this).text() + '</dd>');
	});
}

trackback (0)

trackback URL: http://gelsol.sub.jp/core/mt-tb.cgi/27

Post your comment