Ajaxによる非同期通信 (3/5)
作成:2010-04-14 10:53
更新:2010-05-12 08:17
更新:2010-05-12 08:17
■get/postによる通信
「load」は、データを受け取り指定のエレメントに表示する、という一連の処理をまとめて行います。ですから、逆に「受け取った後の処理は独自にやりたい」というような場合には使えません。
こうした場合に用いられるのが、jQueryオブジェクトの「get」「post」というメソッドです。いずれも、指定のアドレスにGET/POSTで接続しデータを取得するものです。これらは、以下のような形で記述します。
コールバック関数では、サーバーから受け取ったデータ（この場合、テキスト）が引数として渡されます。ですから、後はこれを使って事後処理を用意すればよいのです。非常にシンプルですね。
実を言えば、loadメソッドでも、同様に第３引数にコールバック関数を指定することはできたのです。ただし、loadは受け取ったデータを指定のエレメントに表示するものですから、ここに関数を用意しても「エレメントにデータを表示」ということ自体はキャンセルできません。従って、事後処理を独自にしたい場合は、loadではなく、このget/postを利用するのが基本と考えたほうがよいでしょう。
では、以下にサンプルをあげておきましょう。先ほどのコードを修正したものです。メニューを選ぶとgetdata.phpから指定のデータを受け取るのは同じですが、表示する際にテキストの背景色を変更します。
こうした場合に用いられるのが、jQueryオブジェクトの「get」「post」というメソッドです。いずれも、指定のアドレスにGET/POSTで接続しデータを取得するものです。これらは、以下のような形で記述します。
$.get( アドレス , パラメータ指定 , 関数 );第１、第２引数はloadと同じです。アクセス先のアドレスと、送信するパラメータを連想配列でまとめます。第３引数には、通信が完了した後の処理を行う関数を指定します。こうすることで、通信完了後、指定された関数が自動的に呼び出され、事後処理を行わせることができます。こうした「後で自動的に呼び出される関数」のことを「コールバック関数」と呼びます。
$.post( アドレス , パラメータ指定 , 関数 );
コールバック関数では、サーバーから受け取ったデータ（この場合、テキスト）が引数として渡されます。ですから、後はこれを使って事後処理を用意すればよいのです。非常にシンプルですね。
実を言えば、loadメソッドでも、同様に第３引数にコールバック関数を指定することはできたのです。ただし、loadは受け取ったデータを指定のエレメントに表示するものですから、ここに関数を用意しても「エレメントにデータを表示」ということ自体はキャンセルできません。従って、事後処理を独自にしたい場合は、loadではなく、このget/postを利用するのが基本と考えたほうがよいでしょう。
では、以下にサンプルをあげておきましょう。先ほどのコードを修正したものです。メニューを選ぶとgetdata.phpから指定のデータを受け取るのは同じですが、表示する際にテキストの背景色を変更します。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var id = $('#list1').val();
$.post('getdata.php',{id:id},callback);
}
function callback(result){
$('#message').css('background','#AAFFFF');
$('#message').text('受信データ：' + result);
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div class="msg" id="message">テキストをここに表示します。</div>
<select id="list1" onchange="doAction();">
<option value="0">-</option>
<option value="1">１番目</option>
<option value="2">２番目</option>
<option value="3">３番目</option>
</select>
</body>
</html>
※関連コンテンツ