jQueryでAjax

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

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

jQueryでAjax(非同期通信)やってみよう

材料

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

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

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

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

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

<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>

phpから帰ってくるxmlは↓

<?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>

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

Share

One Response to “jQueryでAjax”

  1. kattsu Says:

    どこの ぱくり?

トラックバックURL

コメントする