Ajax

Ajax は、JavaScript によるバックグラウンド通信(XMLHttpRequest) を含む動的コンテンツ向けライブラリの総称です。非常に多くの種類があるのですが、 今回はjQuery を利用してみます。
更新日 2016-02-13

概要

Ajax は、動的ウェッブサイトの構築に便利なJavaScript ベースの汎用ライブラリの事です。独自実装にかかる手間を大幅に省く事が出来ます。Ajax を謳う ライブラリはアチコチで開発されていますが、有名なところでjQuery があります。使い方はjQuery日本語リファレンス が参考になります。
またAjax の基本機能としてJavaScript で完結する通信機能があります。これを使えばページリロードを伴わずにデータ送信が可能です。UTF-8 での通信しますので リクエストもレスポンスもそれで実装しておきます。

実装手順

とりあえずフォームデータをAjax で送信してみましょう。

jQuery ライブラリのダウンロード

まずjQuery 公式サイト にて最新版のjs ファイル(jquery-1.3.2.min.js) をダウンロードします。あとはいつも通りの記述するだけ。
<script src="/jquery-1.3.2.min.js" language="javascript">
</script>
select タグに変更があると、その都度送信を行うようにします。
<form action="/updateshoppingcart.action" method="POST" id="id_form">
	<select name="selected_lot" onchange="changeSelectedLot()">	
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</form>

<div id="saveBox" style="visibility:hidden;">
	[保存しています]
</div>
イベントハンドラのスクリプトを記述します。
<script language="javascript">
function changeSelectedLot()
{
	// メッセージを表示
	$("#saveBox").fadeIn(100);
	$("#saveBox").css("visibility","visible"); 

	// 送信
	$.ajax({
		type: "POST",
		url:  $("form#id_form").attr("action"),
		data: $("form#id_form").serialize(),
		success: hideSaveBox
	});
}

function hideSaveBox(msg)
{
	// 送信成功後に呼ばれます
	$("#saveBox:visible").fadeOut(1500);	
}
</script>