BLOG ENTRY

AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS]

javascript

AJAX(非同期通信)リクエストをPrototypeとjQueryでそれぞれ行う。

内容としては、ユーザーの入力値をpostで投げて、返ってきたデータをinnerHTMLで表示する、という単純なもので2つのjavascriptライブラリの実装方法を比較。

とりあえず両者の実装の差がわかりやすいように、入力フォームHTMLとリクエスト先ファイルは今回共通のコードを使って比較。

共通入力フォームHTML

まーなんでもいいけど今回はこんな感じで。
[php]
<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>
[/php]

共通リクエスト先 request.php

ここも別になんでもいい(htmlファイルでもなんでもいい)けど今回はこんな感じで。
[php]
<?php
foreach ($_POST as $key => $value) {
echo $key . "は" . htmlspecialchars($value, ENT_QUOTES) . "です<br />\n";
}
[/php]

で、次に共通入力フォームHTMLのソース内にjavaScriptの実装(外部ファイルでもなんでも)をする。

PrototypeでAJAXリクエスト

[php]
<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>
[/php]

jQueryでAJAXリクエスト

[php]
<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>
[/php]
他にもいろんなパラメータを追加できるけど、今回は必要最低限の内容です。
詳しい内容は以下のリファレンスを参照させていただく・・・と。

リファレンスなど

関連記事

WRITE COMMENT


(required)


(required)


(required)

MENU

veltica creative of twitter