2018/03/21　2018年版に再編集

はじめに：Ajaxとは

　Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。
　Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。
簡単にまとめると次のようになります。

ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる
他の処理と同時並行で、サーバとやりとりができる

また、jQueryでのAjax実装が手軽なので、今回はjQuery、ローカルサーバにMAMPを使用しています。
最初は、pythonやnodeなどのワンライナーでのローカルサーバで行うとしたのですが、どちらもajax通信は成功しませんでしたので、通信確認する際はネットワーク環境についても考慮してください。

環境

jquery:3.1.1
MAMP:4.1.1

サンプル：ログイン認証（POST送信）

　今回は、ログイン認証を想定して、htmlでのフォームの内容をAjaxでPHPに送り、そこから返された結果をhtmlにレンダリングする、という機能を実装します。
　なお、フォーム内での送信ボタンをクリックすると、ページ遷移してしまいますが、今回はAjaxの動作確認をしたいので、Ajaxボタンで動作確認します。

コードの中身

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<form id="form_1" method="post" accept-charset="utf-8" return false>
		<p>名前 <input type="text" name = "userid" id ="userid"> </p>
		<p>パスワード <input type="text" name = "passward" id="passward"> </p>
	</form>

	<button id="ajax">ajax</button>
	<div class="result"></div>

	<script type="text/javascript">

		$(function(){
			// Ajax button click
			$('#ajax').on('click',function(){
				$.ajax({
					url:'./request.php',
					type:'POST',
					data:{
						'userid':$('#userid').val(),
						'passward':$('#passward').val()
					}
				})
				// Ajaxリクエストが成功した時発動
				.done( (data) => {
					$('.result').html(data);
					console.log(data);
				})
				// Ajaxリクエストが失敗した時発動
				.fail( (data) => {
					$('.result').html(data);
					console.log(data);
				})
				// Ajaxリクエストが成功・失敗どちらでも発動
				.always( (data) => {
					
				});
			});
		});

	</script>
</body>
</html>

request.php

<?php
	header('Content-type: text/plain; charset= UTF-8');
	if(isset($_POST['userid']) && isset($_POST['passward'])){
		$id = $_POST['userid'];
		$pas = $_POST['passward'];
		$str = "AJAX REQUEST SUCCESS\nuserid:".$id."\npassward:".$pas."\n";
		$result = nl2br($str);
		echo $result;
	}else{
		echo 'FAIL TO AJAX REQUEST';
	}
?>

結果

コードの中身の説明

全般

流れとしては
フォームに入力して送信→jqueryのボタンイベント発火→ajax処理起動→指定されたurl,type,dataでリクエスト→リクエスト先でデータを受取レスポンス→レスポンスデータを処理→画面に反映

　2014年の記事になりますが、Ajaxの中身の設定については、こちらの記事を参考ください。わかりやすいです。

通信結果処理

　以前はsuccess、errorという書き方でajaxが成功・失敗した場合の分岐を書いていたのですが、こうするとコールバック地獄に陥ってしまうので、Promiseインターフェースを利用して、done,failで分岐処理させるようになったのだそう。また、成功、失敗どちらの処理にも呼ばれるalways関数もあります。
　
done:通信に成功
always:failを含め処理が完了したときに起動
fail:通信に失敗

レスポンスデータ

　今回のサンプルでは、こちらにuserid、passwardのフォームのデータが含まれた文字列のレスポンスを処理しています。ここではdataという引数を使っていますが、別の名前でも可能です。

おわりに

　次はFastly,ServiceWorkerを触ってみたいです。
　Twitter: プログラムの話とかつぶやいているので、気軽にフォローしてください
　https://twitter.com/zakiyamaaaaa