動作確認の環境
- サーバ:CentOS Apache/2.2.3
- クライアント:Windos XP Opera 11.50
- PHP:5.1.6
- jQuery:1.6.2 Uncompressed Code
- JSON.php :1.31
処理の流れは、
- [クライアント] テキストエリアに文字列を入力
- [クライアント] 送信ボタン押下でテキストをサーバへ送信
- [サーバ] 取得したテキストと時刻でJSONデータを作成
- [クライアント] サーバからのJSONデータを処理して、画面に表示
クライアント側のサンプル
jQueryのサイトへアクセスしてDonwloadボタンでjsファイルをダウンロードします。ソースを見やすいようにUncompressed版にしました。
http://jquery.com/
現在最新は1.6.2でした。これをサーバへアップロード。上図の画面を表示すべくサンプルソースは、
<html>
<head>
<script type="text/javascript" src="./jquery-1.6.2.js">
</script>
<script type="text/javascript">
$(function(){
// 初期化処理
$("#frmSend").submit(function(){
send($("#keyword").val());
return false;
});
});
function send(keyword) {
// 送信処理
$.ajax({
type:"POST",
url:"http://takaiwa.net/"
+"works/public/samplepg/20110721/server.php",
data: { // 付加する情報
"keyword":keyword
},
success: function(ret) {
// サーバからのレスポンス処理
var jsonObj = eval(ret);
var str = "";
if(jsonObj[0].timestamp) {
str = jsonObj[0].timestamp + ":";
}
if(jsonObj[0].keyword) {
str += jsonObj[0].keyword;
}
str += "<br>";
$("#disp").append(str);
}
});
}
</script>
</head>
<body>
<form id="frmSend">
<textarea type="text" id="keyword" rows="6" cols="40"></textarea>
<BR>
<input type="submit" value="送信">
</form>
<br>
<div id="disp"></div>
</body>
</html>
初期化処理で、送信ボタンを押したら、send関数を実行するようにしています。send関数への引数は、textarea内のデータ。
また、send関数内のsuccessはサーバの処理が成功して返ってきたら実行する関数です。引数retにJSONデータが格納されています。
[JSONデータ例]
[
{
"timestamp":"2011-07-21 09:11:32",
"keyword":"hogehoge"
}
]
※見やすく改行等を入れてる
jsonデータはeval関数を使って、JavaScriptオブジェクトに変換しています。この時、JSONデータの書式に誤りがあ場合は、JavaScriptエラーになります。Operaの場合は、Operaボタン → ページ → 開発者用ツール → エラーコンソールでエラーを確認できます。
サーバ側のサンプル
JSONデータを作成するにあたり、PEARのJSON.phpライブラリを使用します。
http://mike.teczno.com/JSON.tar.gz
これをコマンドで、
# wget http://mike.teczno.com/JSON.tar.gz
でサンプルファイルと同じディレクトリへダウンロードし、
# tar xzvf JSON.tar.gz
コマンドで解凍すると、JSON.phpファイルが出現します。これを利用して、
<?php
require_once "./JSON.php";
// 一旦、配列として格納
$arr = array();
$data["timestamp"] = date("Y-m-d H:i:s");
$data["keyword"] = $_POST["keyword"];
array_push($arr, $data);
// 配列をJSONデータに変更
$json = new Services_JSON;
$encode = $json->encode($arr);
echo $encode;
?>
連想配列を作成してから、エンコードしてJSONデータを作成します。これにより作成されるJSONデータは上記に示したような形式です。
デモ
jQueryで作る Ajaxアプリケーション
posted with amazlet at 11.09.03
沖林 正紀
技術評論社
売り上げランキング: 144718
技術評論社
売り上げランキング: 144718
コメント
コメントを投稿