studio-fun.net

昨日の記事で「手を動かせ」って言ったからには手を動かさなきゃです。
なんとなく出来るな?ってコード見ては思っていたので実際なんか簡単なものを作って実験＆勉強です。

ｊQueryでDOM操作とか、CSS操作とかは結構やっているのでもう良いので
やっぱりAjax非同期通信ですかね、って事でサンプルを作りながら勉強。
ネタはその辺に転がっている物を寄せ集めてみた。

jQueryでAjax（非同期通信）やってみよう

材料

• jQuery
• xmlを返すphpプログラム（まぁ何でもいい）
• やる気

どんなものなのかまずは [サンプル] を見て下さい。
今回のphpプログラムは超適当にxml返すだけだけど、実際はパラメータ飛ばして受け取ったキーでDB検索後にｘｍｌ返すとか
そんな処理を書けばいいと思う。ブログ記事ごときでDBとか作るのめんどかったので簡単phpです。phpもボンヤリしか書けないのであえて載せません。

ボタンを押すと以下の様な流れで処理が走ります。

1. webブラウザボタン押下
2. クライアントJavaScriptからサーバーサイドへアクセス（ｈｔｔｐで通信、非同期通信）
3. サーバーサイドphpプログラム起動、xmlで結果返却
4. クライアントサイドでコールバック処理

後はサンプルのソースを見るか、以下にJavaScript（ｊQuery）ソースを書いておきますのでご参考に。

<script src="/js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	$("button").click(function(){
		$.ajax({
			url: './test_xml.php',
			type: 'GET',
			dataType: 'xml',
			timeout: 1000,
			error: function(){
				alert('Error');
			},
			success: function(xml){
				$(xml).find('user').each(function(){
					var item_text = $(this).text();
					$('<li></li>')
						.html(item_text)
						.appendTo('ol')
						.css("display","none");
						$("li").fadeIn("slow");
			});
			}
		});
	});
});
</script>

ｐｈｐから帰ってくるｘｍｌは↓

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<user>
		<id>0000000001</id>
		<name>山田　太郎</name>
		<tel>03-1234-1234</tel>
	</user>
	<user>
		<id>0000000002</id>
		<name>東京　太郎</name>
		<tel>03-3333-1234</tel>
	</user>
	<user>
		<id>0000000003</id>
		<name>川田　真一</name>
		<tel>06-3333-1234</tel>
	</user>
</data>

細かいツッコミや質問されても正直ちゃんと答えられないが、動きや仕組みはイメージ出来るので
何も考えずに使えばいい、動けばいい。
※もうちょっと簡単に書けそうなんだけど、今度もう少しまともなの作ろう。