JavaScript

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

  /

今回は、jQueryの$.get()メソッドを使ってXML形式のデータを取得し、表示する方法を紹介します。
この方法は、Web開発においてXMLデータを動的に読み込む際に非常に便利です。初心者にもわかりやすく説明しますので、ぜひ試してみてください。

Contents

$.get()とは

$.get()は、jQueryのAjaxメソッドの一つで、サーバーからデータを非同期に取得するために使用されます。このメソッドを使うと、指定したURLからデータを簡単に取得することができます。$.get()は、GETリクエストを送信し、サーバーから返されたデータを処理するためのコールバック関数を指定することができます。

xmlとは

XML（eXtensible Markup Language）は、データを構造化して記述するためのマークアップ言語です。XMLは、人間にも機械にも読みやすい形式でデータを保存するためによく使われます。例えば、Webサービスのデータ交換や設定ファイルなどで広く利用されています。

今回はxml形式のファイルdata.xmlを読み込みます。

XMLの基本的な構造は、以下のようなタグの組み合わせで表されます。

<!--?xml version="1.0" encoding="utf-8"?-->
<categories>
<item>
<category>TOP</category>
<url>https://dad-union.com/</url>
</item>
<item>
<category>ABOUT</category>
<url>https://dad-union.com/about</url>
</item>
<item>
<category>JAVASCRIPT</category>
<url>https://dad-union.com/category/javascript</url>
</item>
<item>
<category>JQUERY</category>
<url>https://dad-union.com/category/jquery</url>
</item>
</categories>

xmlデータを取得表示するためのCSS記述例

まずは、XMLデータを取得するボタン（#btn）とデータ表示エリア（#cat）のスタイルを設定します。以下の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>

xml形式のデータを取得表示するJavaScriptの記述例

次に、jQueryを使ってXMLデータを取得し、表示するためのJavaScriptコードを記述します。このスクリプトは、ボタンがクリックされたときにXMLファイルを読み込み、データを表示エリアに出力します。

id=”btn”ボタンをクリックすると$.get()を使ってdata.xmlファイルのxml形式のデータ取得し、出力先エリア（id=”cat”）に出力表示します。

<script type="text/javascript" src="https://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>

xml形式のデータを取得表示するHTMLの記述例

最後に、HTMLコードを記述します。このコードは、XMLデータを取得するためのボタンと、データを表示するためのエリアを定義します。

id=”btn”ボタンをクリックすると取得したxml形式のデータをid=”cat”タグに出力します。

<div class="clWrap">

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


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

</div>

<!--/clWrap-->

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

今回紹介した方法を使ったデモページを以下のリンクから確認できます。

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

まとめ

jQueryの$.get()メソッドを使って、XMLデータを取得し、表示する方法を紹介しました。
この方法は、Web開発において動的にデータを読み込む際に非常に便利です。簡単に実装できるので、ぜひ試してみてください。XMLデータの取り扱い方や、jQueryの他のAjaxメソッドについても学んでおくと、より複雑なWebアプリケーションを開発する際に役立つでしょう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

xml get
関連記事