ajaxによるxmlの読み込み

jquery

javascriptでも外部ファイルを読み込む処理って今や当たり前になりましたね。
なので、ちょっとajaxを利用してxmlファイルを読み込む処理の実験をしたいと思います。

javascriptでajaxだとちょっと記述がめんどくさいのでjQueryによるxmlファイルの読み込みを記事にしたいと思います。

ajaxによる読み込み

$(document).ready(function(){
	//
	$.ajax({
		url:"index.xml",
		type:"get",
		dataType:"xml",
		timeout:1000,
		cache:false,
		error:function(){
			alert("xmlファイルの読み込み失敗");
			},
		success:function(xml){
			var listdata="";
			$(xml).find("list").each(function(){
				//
				var title=$(this).find("title").text();
				//
				var name=$(this).find("title").attr("name");
				//
				var gen=$(this).find("gender").text();
				//
				alert(name);
				listdata+="
"+title+" : "+gen+" : "+name+"
";
				});
			$("#res").html(listdata);
			}
		});
	//
});

ajaxのパラメーター

dataTypeでは「xml」のほか「html」 「script」「json」 「jsonp」などがある
typeでは「post」「get」とあるが「post」だとアクセスエラーになりました。

■読み込み後にデータにアクセス

読み込み後にxmlの各ノードにアクセスするにはjqueryのfindを使用して子要素をeachで繰り返し検索して抽出する。

success:function(xml){
			var listdata="";
			$(xml).find("list").each(function(){
				//
				var title=$(this).find("title").text();
				//
				var name=$(this).find("title").attr("name");
				//
				var gen=$(this).find("gender").text();
				//
				alert(name);
				listdata+="
"+title+" : "+gen+" : "+name+"
";
				});
			$("#res").html(listdata);
			}

上記の例だとxmlの子要素の「list」タグをeach関数で検索してさらにlistタグの子要素をfindでxmlのタグ名を検索して、そのテキストを抽出している。
属性にアクセスする場合は,「attr(“属性名”)」で取得できる

var title=$(this).find(“title”).text();



	
		test1
		mens
	
	
		test2
		mens
	
	
		test3
		ladys

実験結果

get()による読み込み

今度は短く「$.get()」を使用した例ということで基本構文は

$.get( url, data, callback )となる

  • 第一引数は読み込むデータ
  • 第2引数は送るデータ？？
  • 第3引数はコールバック関数

使用方法は単純でコールバックでデータ処理をすればいいだけで前回と同じ。
ただしこの方法は成功時だけでの処理となるのでエラー対処時には最初の$.ajaxを使用したほうがよさそう

$(document).ready(function(){
	//
	$.get("index.xml",function(xml){
		var listdata="";
			$(xml).find("list").each(function(){
				//
				var title=$(this).find("title").text();
				//
				var name=$(this).find("title").attr("name");
				//
				var gen=$(this).find("gender").text();
				//
				alert(name);
				listdata+="
"+title+" : "+gen+" : "+name+"
";
				});
				$("#res").html(listdata);
		});
	//
});

実行結果（同じ）