jQueryでXMLの読み込み&出力をする

jQueryでXMLの読み込み&出力をする

jQueryを使ったXMLファイルの操作サンプルです。内容は$.ajaxを使用してXMLファイルの参照&内容をパースし、出力(html整形)をするサンプルです。今更感があるかもしれませんがご参考までに。




XMLファイルの読み込み&出力

今回は$.ajaxを使います。$.getでも良いのですが今回はあえての$.ajaxです(クロスドメイン制限解除のオプションが使えるので)。
以下サンプルソースとなります。できるだけシンプルな形にしてあります。

■html
<div id="sample">
<ul></ul>
</div>
■javascript
$(function(){
	$.ajax({
		url:'sample34.xml',
		type:'GET',
		dataType:'xml',
		timeout:1000,
		error:function() {
			alert("ロード失敗");
		},
		success:function(xml){
			$(xml).find("sample").each(function() {
				$("#sample ul").append('<li><a href="' + $(this).find('url').text() +  '" target="_blank">' + $(this).find('title').text() + '</a></li>');
			});
		}
	});
});
■xml(sample34.xml)
<?xml version="1.0" encoding="utf-8"?>
<sample_list>
	<sample>
		<title>ページ内を自在にスクロール | よく使うjQuery</title>
		<url>http://www.finefinefine.jp/jqeury/kiji1388/</url>
	</sample>
	<sample>
		<title>タブの切替 | よく使うjQuery</title>
		<url>http://www.finefinefine.jp/jqeury/kiji422/</url>
	</sample>
	<sample>
		<title>jQueryでプルダウンメニュー(たった5行で!)</title>
		<url>http://www.finefinefine.jp/jqeury/kiji1581/</url>
	</sample>
</sample_list>
  • サンプル
  • ダウンロード
  • 解説

    外部のxmlファイルを$.ajaxで参照しhtmlに整形して出力します。先に各オプションに関して説明します。

    url:呼び出すファイルの参照先URLを指定します。
    type:HTTP通信の種類を指定します。尚、初期値はGETとなりますので、今回指定していますが省力しても問題ありません。
    dataType:ファイルのタイプを指定します。xmlの他にhtmlやjsonなども指定できます。
    timeout:タイムアウトまでの時間をミリ秒単位で指定します。
    error:ファイル読み込みエラー次の処理を記載します。
    success:ファイル読み込み成功時の処理を記載します。

    より詳細な内容は本家のドキュメントをご確認下さい。
    jQuery.ajax() | jQuery API Documentation

    ちなみに今回は使っていませんが、外部サイトのファイルを参照する場合、

    crossDomain : ture
    

    とオプションを追加するだけでクロスドメインの制約を突破します。

    では、今回のサンプルの説明です。オプションurlで「sample34.xml」を参照します。ここは特段難しいことはないかと思います。

    $(function(){
    	$.ajax({
    		url:'sample34.xml',
    		type:'GET',
    		dataType:'xml',
    		timeout:1000,
    

    続いてエラー処理と読み込み成功時の処理です。
    errorオプションではとりあえずalertを表示するように記載していますが、こちらはどのような処理を行うかは任意で記載してもらえればと思います。正直errorオプション自体記載しなくてもよいです。
    そして成功時はxmlの内容をパースします。
    まず、find()でxml中の「sample」タグが見つかる度に、要素ulに整形したhtmlをappendで追加していきます。

    		error:function() {
    			alert("ロード失敗");
    		},
    		success:function(xml){
    			$(xml).find("sample").each(function() {
    				$("#sample ul").append('<li><a href="' + $(this).find('url').text() +  '" target="_blank">' + $(this).find('title').text() + '</a></li>');
    			});
    		}
    	});
    });
    

    基本的にxmlの要素はfind()で探して、text()で出力します。

    ※ちなみにブラウザによってはローカルでは動作しない場合があります。詳しくはこちらの記事を参照
    Google Chromeの起動オプション



    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です