Ajaxによる非同期通信 (4/5)
作成:2010-04-14 11:45
更新:2010-05-12 08:23
更新:2010-05-12 08:23
■JSONオブジェクトを送受する
シンプルなテキストだけならこれでOKですが、もっと複雑なデータの場合、どのように受け渡しするのがよいのでしょうか。XMLでもいいのですが、jQueryの場合、JSONを利用する方法がシンプルで使い易いでしょう。
JSONというのは「JavaScript Object Notation」の略で、JavaScriptのオブジェクトをテキストとして記述するためのフォーマットです。このJSON形式に従ってデータを記述し、やり取りすることで、JavaScriptのオブジェクトとしてデータを受け渡しできます。
JSON形式でサーバーからデータを受け取るには「getJSON」というメソッドを使います。これは以下のように記述します。
では、これも簡単な例を上げましょう。先ほどのサンプルを改良し、メニューを選ぶと、サーバーからメッセージ・テキスト色・背景色といったデータを受け取り、メッセージを表示します。サーバー側ではPHPのスクリプトを使ってJSONデータを送信するようにしています。これは、
JSONというのは「JavaScript Object Notation」の略で、JavaScriptのオブジェクトをテキストとして記述するためのフォーマットです。このJSON形式に従ってデータを記述し、やり取りすることで、JavaScriptのオブジェクトとしてデータを受け渡しできます。
JSON形式でサーバーからデータを受け取るには「getJSON」というメソッドを使います。これは以下のように記述します。
$.getJSON( アドレス , 連想配列 , 関数 );パラメータは、get/postと同じですね。これで指定したアドレスにアクセスし、そこからデータを受け取ることができます。ただし！ get/postと大きく違うのは、「コールバック関数で受け取るデータが、JavaScriptのオブジェクトになっている」ということでしょう。オブジェクトですから、そのままそこから必要なプロパティなどを取り出して処理することができるのです。
では、これも簡単な例を上げましょう。先ほどのサンプルを改良し、メニューを選ぶと、サーバーからメッセージ・テキスト色・背景色といったデータを受け取り、メッセージを表示します。サーバー側ではPHPのスクリプトを使ってJSONデータを送信するようにしています。これは、
{message: メッセージ , background: 背景色 , color: テキスト色 }こういう構造のデータを用意し、送り返すようになっています。callbackで引数に受け取ったresultは、既にJavaScriptのオブジェクトになっています。ですから、そこからresult.messageというようにしてプロパティにアクセスすれば、必要なデータが取り出せるというわけです。(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※サーバー側のスクリプト
<?php
$data =array(
array(message=>'ごめん、ない。', color=>'#666666', background=>'#AAAAAA'),
array(message=>'最初のデータです。', color=>'red', background=>'#FFCCCC'),
array(message=>'次のデータです。', color=>'green', background=>'#CCFFCC'),
array(message=>'最後のデータです。', color=>'blue', background=>'#CCCCFF')
);
$id = $_GET['id'] * 1;
if ($id < count($data)){
$result = $data[$id];
} else {
$result = $data[0];
}
header('Content-type:application/json; charset=utf8');
echo json_encode($result);
※Webページのソースコード
<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();
$.getJSON('getdata.php',{id:id},callback,"json");
}
function callback(result){
$('#message').css('color',result.color);
$('#message').css('background',result.background);
$('#message').text('受信データ：' + result.message);
}
//-->
</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>
※関連コンテンツ