トップ > JavaScript > 「JavaScript」Prototype と jQuery で Ajax やってみた

「JavaScript」Prototype と jQuery で Ajax やってみた

JavaScript

Prototype と jQuery それぞれで Ajax やってみたのでメモ。

コードは以下の感じになります。簡単ですね。

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function prototypeAjax() {
	new Ajax.Request(
		'./ajax.php', {
		method: 'post',
		parameters: {param: 'hoge'},
		onSuccess: function(transport) { alert(transport.responseText); },
		onFailure: function(transport) { alert('failure'); }
	    });
}

function jQueryAjax() {
	$.ajax({
		type: 'post',
		url: './ajax.php',
		data: {param: 'uga'}
		})
		.done(function(msg) {
		  alert(msg);
		})
		.fail(function(msg) {
		  alert('fail');
		});
}
</script>
</head>
<body>
	<input type="button" value="prototypeAjax" onclick="prototypeAjax()"/><br>
	<input type="button" value="jQueryAjax" onclick="jQueryAjax()"/>
</body>
</html>

サーバ側は「<?php echo $_POST["param"]; ?>」みたいな感じで。

■ ドキュメント
・Prototype JavaScript Framework | Introduction to Ajax
http://prototypejs.org/learn/introduction-to-ajax.html
・jQuery.ajax() | jQuery API Documentation
http://api.jquery.com/jquery.ajax/

[ 環境情報 ]
Prototype 1.7.2
jQuery 1.11.1