Ajaxとは
Ajax（エージャックス）とは、非同期通信を意味する用語で、ウェブ上で非同期でデータの送信を行う技術のことを指します。
通常、ウェブサイトというのはURLを入力（リクエスト）することで、ページ情報を取得します。
ですから、リアルタイムに情報を取得して変化させるということはできないわけです。
Ajaxというのは、これを実現する技術となります。
お問い合わせフォームでのAjax活用
問い合わせフォームで言えば、通常のフローでは、入力画面→確認画面→送信完了画面という３つのページを遷移しながら進むことになります。
しかし、このページ遷移なしでフォームから直接送信したいと思うかもしれません。
そういった場合には、通常のページ遷移時のPOST送信ではなく、Ajaxから直接ＰＨＰプログラムにデータを渡す方法で実装することが可能です。
HTML部
<input type="text" id="send-name" name="send-name" placeholder="名前を入力してください。" value="" />
<input type="text" placeholder="件名を入力してください。" id="send-subject" value="" />
<textarea placeholder="メッセージを入力して下さい。" id="send-body" rows="10"></textarea>
<input type="button" id="send-btn" value="送信する">
フォームはできるだけシンプルにするため、必要なもの以外は省いています。
通常使用するformタグがありません。
Jquery部
<script type="text/javascript">
$(function() {
// 送信確認
$('#send-btn').on('click', function() {
// フォームから入力値を取得
var name = $('#send-name').val();
var subject = $('#send-subject').val();
var body = $('#send-body').val();
// 入力内容の確認
if(name != "" && subject != "" && body != ""){
// PHPに送信
$.ajax({
type: 'POST',
url: "./send_data_ajax.php",
data: {
name:name,
subject:subject,
body:body
},
success: function( data ) {
if(data.match(/success/)){
alert("送信が完了しました。");
location.href = "./"; // 送信後戻り先URL
}
},
error: function() {
alert("予期せぬエラーが発生しました。");
}
});
} else {
alert("キャンセルされました。");
}
}
} else {
alert("未入力の項目があります。");
}
});
</script>
Ajaxによる送信では確認画面を挟みませんので、Javascript側で入力情報のチェックを行います。
ただし、クライアントサイド側のプログラムでのバリデーションは完全ではないため、理想を言えば、サーバープログラム（ＰＨＰ）側でもチェックを入れるのが好ましいでしょう。
PHP部（send_data_ajax.php）
<?php
// データ取得
$name = $_POST['name'];
$subject = $_POST['subject'];
$body = $_POST['body'];
// 送信メール作成
mb_language("Japanese");
mb_internal_encoding("utf-8");
$to = "送信先メールアドレス";
$header = "From: 送信元メールアドレス";
$subject = ".$subject;
$body = "
お名前
".$name."
お問合せ内容：
".$body."
";
// メール送信
if(mb_send_mail($to,$subject,$body,$header)){
echo "success";
}
?>
ＰＨＰ側では、データを取得しsendmailを実行しています。
最終的に、Javascript側で送信の成功・失敗を判定するために、”success”の文字列を返しています。
Ajaxの場合にはreturnの戻り値は使用せず、echoで返します。