とりあえずAjax動かしてみたよ

近いうちにこのサイトを運用しているレンタルサーバーがlolipopからCoNoHa WINGに変わります。国内最速を謳っているサーバーの力、楽しみです。

現在の案件で必要になったので、今まで単語は聞きつつも見ないふりしてたAjaxのお勉強をします。

Ajaxとは

Ajax(エイジャックス、アジャックス)は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。

Wikipedia

要はjsを用いてページの再読み込みなしにサーバーと通信、ページの更新(PHPの$_GET、$_POST)を行えるシステムみたいですね。

実装

シンプルなカウントアップを行うプログラムを書きました。WordPressのjQueryを使用しているため最初にjQuery(function($)(){...となってます。

準備

jQuery。バージョンによってコードの書き方が変わるみたいです。参考サイト

HTML + JS

<form method="post">
	<input type="number" id="cnter" value="0" name="counter" readonly>
</form>
<button id="ajax">カウントを増やす</button>
<script type="text/javascript">
	jQuery( function ($) {
		// Ajax button click
		$('#ajax').click(function(){
			$.ajax( {
					url: './request.php',
					type: 'POST',
					data: {
						'counter': $( '#cnter' ).val()
					}
				} )
				// Ajaxリクエストが成功した時発動
				.done( ( data ) => {
					$( '#cnter' ).val( data );
					console.log( data );
				} )
				// Ajaxリクエストが失敗した時発動
				.fail( ( data ) => {
					$( '.result' ).html( data );
					console.log( data );
				} )
				// Ajaxリクエストが成功・失敗どちらでも発動
				.always( ( data ) => {

				} );
		} );
	} );
</script>

PHP

<?php
    header('Content-type: text/plain; charset= UTF-8');
    if( isset($_POST['counter']) ){
		$num = intval(filter_input(INPUT_POST, 'counter'));
		$num++;
        echo $num;
    }else{
        echo 'FAIL TO AJAX REQUEST';
    }
?>