Home
- 2007年10 月15日（月）
-
「oka」
- JavaScripts/Ajax
どーも、okaです。
人生初ブログです・・・。
そんなことはさておき、
Ajax、Ajaxと騒がれ早２年ですが、恩恵は受けていたのですけどこれまで関わったことがありませんでした。
ようやく関わることがありましたので、その時に学んだAjaxの非同期通信の基礎について書きたいと思います。
環境としまして、Apache、PHP、MySQLが動く環境であることとします。
また、Ajaxを扱ううえで必要なAjaxライブラリは prototype.js(version 1.5.0) を使用します。
今回は、ボタンのクリックで入力したデータをPHPへAjaxで送信し、受信したデータを画面に表示する処理を作成したいと思います。
最初に、クライアント側のソースは以下のようになります。
<head>
<!– Ajaxライブラリ[prototype.js]の読み込み –>
<script language=”JavaScript” src=”./prototype.js”></script>
<!– Ajax送受信を行うscript –>
<script language=”JavaScript”>
<!–
// メッセージの送信
function ajaxSend(url, obj) {
var param = ‘data=’ + obj.form.data.value;
var myAjax = new Ajax.Request( ・ ・ ・ ・ ・ ・ ①
url, ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ②
{
method : ‘post’, ・ ・ ・ ・ ・ ・ ③
parameters : param, ・ ・ ・ ・ ・ ④
onComplete : ajaxReceive ・ ・ ・ ⑤
}
);
}
// メッセージの受信
function ajaxReceive(orgRequest) {
var str = orgRequest.responseText;
$(’output’).innerHTML = str;
}
//–>
</script>
<title>Ajaxテスト</title>
</head>
<body>
<!– 入力エリアとボタン –>
<form>
<input type=”text” name=”data”/>
<input type=”button” value=”Ajaxテスト” onClick=”ajaxSend(’./AjaxServer.php’, this);”/>
</form>
<!– 受信データを表示するエリア –>
<div id=”output”>ここに表示</div>
</body>
</html>
まず、①でAjax.Request オブジェクトをnewし、引数に②遷移先のurl、無名オブジェクトを設定しています。
無名オブジェクトには、③値（'post'）をもつmethodプロパティ、④値（クエリ文字列）をもつmethodプロパティ、
及び⑤値（関数 ajaxReceive）をもつonCompleteプロパティの３つのプロパティが設定されています。
このサンプルでは、引数②の url に変数 param のクエリ文字列を付加して HTTP POST で呼び出し、
Ajax.Request オブジェクトがレスポンスを取得し終わった時に ajaxReceive関数を呼び出します。
次に、サーバー側のソースは以下のようになります。
// 画面よりデータ取得
$data = $_POST['data']; ・ ・ ・ ・ ①
$data = "「".$data."」を受信しました";
echo $data; ・ ・ ・ ・ ・ ・ ・ ・ ②
?>
①では、クライアント側からデータを取得し、②でクライアント側へデータを送信しています。
これらの記述だけでAjaxを用いた初歩的な非同期通信が行えます。
サンプル画面動作
→ 
また、サーバー側のソースのみの変更で、データベースと連携しデータを表示することもできます。
// 画面よりデータ取得
$data = $_POST['data'];
// DBより対象データの取得
$db = mysql_connect('localhost', 'user', 'pass');
mysql_select_db('test', $db);
$data = mysql_real_escape_string($data);
$query = "SELECT COMMENT FROM MENBER WHERE NAME='$data'";
$menber = mysql_query($query, $db);
$ret = "";
while ($row = mysql_fetch_assoc($menber)) {
$ret = $data." さんのコメント<br />「".$row['COMMENT']."」";
}
echo $ret;
?>
以下の画面のようになります。
サンプル画面動作
→ 
このようにページの一部を必要なときに書き換えることができ、最小限のデータのやりとりですむため
サーバーに負荷が掛からず、高速に画面を更新することができます。
まだ、Ajaxを試したことのない方がいらっしゃいましたら、ちょこっと取り入れてもいいのではないでしょうか。
- Newer: FeedburnerとYahoo!ブログ検索の関係
- Older: ウェブアプリケーションの脆弱性、XSIO を知っていますか？
