jQueryの$.get()を使ってxmlデータを取得表示する方法



過去に、

をご紹介しましたが、

今回は$.get()を使ってxmlデータを取得してみます。

1.読み込むxml形式のファイル

data.xmlを読み込みます。

<?xml version="1.0" encoding="utf-8"?>
<categories>
<item>
<category>CSS</category>
<url>http://www.blinderhidden.com/category/css</url>
</item>
<item>
<category>Facebook</category>
<url>http://www.blinderhidden.com/category/facebook</url>
</item>
<item>
<category>HTML5</category>
<url>http://www.blinderhidden.com/category/html5</url>
</item>
<item>
<category>JavaScript</category>
<url>http://www.blinderhidden.com/category/javascript</url>
</item>
<item>
<category>Ajax</category>
<url>http://www.blinderhidden.com/category/javascript/ajax</url>
</item>
<item>
<category>jQuery</category>
<url>http://www.blinderhidden.com/category/javascript/jquery</url>
</item>
<item>
<category>Ajax</category>
<url>http://www.blinderhidden.com/category/css</url>
</item>
<item>
<category>PHP</category>
<url>http://www.blinderhidden.com/category/php</url>
</item>
<item>
<category>Smarty</category>
<url>http://www.blinderhidden.com/category/php/smarty</url>
</item>
<item>
<category>SEO</category>
<url>http://www.blinderhidden.com/category/seo</url>
</item>
<item>
<category>WordPress</category>
<url>http://www.blinderhidden.com/category/wordpress</url>
</item>
<item>
<category>etc</category>
<url>http://www.blinderhidden.com/category/sonohoka</url>
</item>
<item>
<category>smartphone</category>
<url>http://www.blinderhidden.com/category/smartphone</url>
</item>
<item>
<category>Android</category>
<url>http://www.blinderhidden.com/category/smartphone/android</url>
</item>
</categories>

2.CSSの記述例

以下は任意です。

<style type="text/css"> 
#btn{
	width:150px;
	height:30px;
	margin:0 auto;
	background-color:#333;
	color:#FFF;
	font-weight:bold;
	border:solid 1px #333333;
	text-align:center;
	line-height:1.8em;
	cursor:pointer;
}
#btn:hover{
	background-color:#FFF;
	color:#333;
	font-weight:bold;
	border:solid 1px #333333;
}
#cat{
	width:600px;
	margin:0 auto;
	line-height:1.8em;
	padding-top:20px;
}
</style>

3.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#btn").one('click', function() {
		$.get("data.xml",function(xml) {
			$(xml).find('item').each(function() {
				$("#cat").append(
					'<div>'
					+ $(this).children('category').text() + ' ⇒ '
					+ '<a href="' + $(this).children('url').text() + '" title="' + $(this).children('category').text() + '">' + $(this).children('url').text() + '</a>'
					+ '</div>'
				);
			});
		});
	});
});
</script>

4.HTMLの記述例

<div class="clWrap">

	<div id="btn">ココをクリック</div>

	<div id="cat"></div>

</div><!--/clWrap-->

jQueryの$.get()を使ってxmlデータを取得表示するデモ

xml形式のファイルって色々と取得方法がありますよね。
何を使うのが最適なのか迷います。