449
516

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

はじめてのAjax(jQuery) 2018年版

Last updated at Posted at 2017-01-20
  • 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';
	}
?>

##結果
Kobito.2kWa0H.png

##コードの中身の説明
###全般
流れとしては
フォームに入力して送信→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

#参考URL

449
516
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
449
516

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?