BLOG ENTRY
AJAX(非同期通信)リクエストをPrototypeとjQueryでそれぞれ行う。
内容としては、ユーザーの入力値をpostで投げて、返ってきたデータをinnerHTMLで表示する、という単純なもので２つのjavascriptライブラリの実装方法を比較。
とりあえず両者の実装の差がわかりやすいように、入力フォームHTMLとリクエスト先ファイルは今回共通のコードを使って比較。
共通入力フォームHTML
まーなんでもいいけど今回はこんな感じで。
<form>
<table>
<tfoot>
<tr>
<th></th>
<td><input type="button" value="サンプル実行" id="exeBtn" /></td>
</tr>
</tfoot>
<tbody>
<tr>
<th></th>
<td><p id="result"></p></td>
<tr>
<th>ID:</th>
<td><input type="text" id="userId" /></td>
</tr>
<tr>
<th>メールアドレス:</th>
<td><input type="text" id="email" /></td>
</tr>
</tbody>
</table>
</form>
共通リクエスト先 request.php
ここも別になんでもいい(htmlファイルでもなんでもいい)けど今回はこんな感じで。
<?php
foreach ($_POST as $key => $value) {
echo $key . "は" . htmlspecialchars($value, ENT_QUOTES) . "です<br />\n";
}
で、次に共通入力フォームHTMLのソース内にjavaScriptの実装（外部ファイルでもなんでも）をする。
PrototypeでAJAXリクエスト
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function btn_set() {
Event.observe($("exeBtn"), "click", execute, false);
}
function execute() {
var aj = new Ajax.Request(
"request.php",
{
method : "post",
parameters : $H({ userId: $('userId').value, email: $('email').value }).toQueryString(),
onComplete : function(request) {
$('result').innerHTML = request.responseText;
}
}
);
}
Event.observe(window, "load", btn_set, false);
//]]>
</script>
jQueryでAJAXリクエスト
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#exeBtn").click(function() {
$.ajax({
url : "request.php",
type : "post",
data : ({ userId: $('#userId').val(), email: $('#email').val() }),
success: function(request) {
$('#result').html(request);
}
});
});
});
//]]>
</script>
他にもいろんなパラメータを追加できるけど、今回は必要最低限の内容です。
詳しい内容は以下のリファレンスを参照させていただく・・・と。
リファレンスなど
関連記事
- JSでイベントリスナーやらでバリデートの実装いろいろ
- formの複数選択のselectボックスの値をJSで取得する
- イベントハンドラを使わないでデザインとロジックを分割
- javascriptで独自オブジェクトを作成する
関連記事
comments(0)
DATE2008.10.25
MENU
