jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、xml形式のデータを読み込み、パースし、表示する方法。
実装例(サンプル)
実装例(サンプル)の動作について
「toggle」ボタンをクリックすると、「jquery-sample-ajax-xml.xml」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。
読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。
「toggle」ボタンを、再度クリックすると、元に戻す。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . ajax( {
url: 'jquery-sample-ajax-xml.xml',
dataType: 'xml',
success: function( data ) {
jQuery ( data ) . find( 'color' ) . each( function() {
var name = jQuery ( this ) . find( 'name' ) . text();
var colorName = jQuery ( this ) . find( 'colorName' ) . text();
var colorCode = jQuery ( this ) . find( 'colorCode' ) . text();
var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
jQuery( '#jquery-sample-ajax' ) . append( html );
} );
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
},
error: function( data ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
} );
},
function() {
jQuery( '#jquery-sample-ajax' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . ajax( {
url: 'jquery-sample-ajax-xml.xml',
dataType: 'xml',
success: function( data ) {
jQuery ( data ) . find( 'color' ) . each( function() {
var name = jQuery ( this ) . find( 'name' ) . text();
var colorName = jQuery ( this ) . find( 'colorName' ) . text();
var colorCode = jQuery ( this ) . find( 'colorCode' ) . text();
var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
jQuery( '#jquery-sample-ajax' ) . append( html );
} );
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
},
error: function( data ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
} );
},
function() {
jQuery( '#jquery-sample-ajax' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
width: 300px;
}
#jquery-sample-ajax {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
width: 300px;
}
#jquery-sample-ajax {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-ajax"></div>
</div>
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-ajax"></div>
</div>
読み込むxmlファイルの内容
<colors>
<color>
<name>赤色</name>
<colorName>red</colorName>
<colorCode>#ff0000</colorCode>
</color>
<color>
<name>青色</name>
<colorName>blue</colorName>
<colorCode>#0000FF</colorCode>
</color>
<color>
<name>緑色</name>
<colorName>green</colorName>
<colorCode>#008000</colorCode>
</color>
</colors>
<color>
<name>赤色</name>
<colorName>red</colorName>
<colorCode>#ff0000</colorCode>
</color>
<color>
<name>青色</name>
<colorName>blue</colorName>
<colorCode>#0000FF</colorCode>
</color>
<color>
<name>緑色</name>
<colorName>green</colorName>
<colorCode>#008000</colorCode>
</color>
</colors>