jQueryによるAjax通信の方法【コピペOKサンプルコード付き】

jQueryによるAjax非同期通信

こちらではjQueryを使ったAjaxについて解説しています。

Ajaxとは?

Ajaxは「Asynchronous JavaScript and XML」の略です。

訳すと「JavaScriptとXMLを使った非同期通信」となりますが、XMLは必須ではありません。JSON形式のデータをやり取りすることが多いです。

従来のHTMLで作られたページは静的なものなので、ユーザーの操作に合わせてページの情報を更新するには、ページ全体を読み込み直す必要がありました。

更新したいのは一部分なのに、全体を読み込み直すとなると無駄が発生します。

そこで更新したいデータだけをサーバーとやり取りし非同期でページを更新する技術を総称してAjaxと言います。

非同期通信とは?

同期通信

非同期通信でない場合(同期通信の場合)、サーバーと通信をして全てのデータがそろってからブラウザで操作できるようになります。

言い方を変えると、ブラウザ(クライアント)からサーバーにデータをリクエストしたら、そのレスポンスが来るまで他の処理を行わずに待っています。

非同期通信

非同期通信の場合は、ブラウザからサーバーにデータをリクエストした後でも他の処理をすることが可能です。

つまり非同期でない場合は、ページを読み直している間に操作をできなくなりますが、非同期の場合は読み直し中でも操作ができるということです。

ゲームの非同期処理
テレビゲームでも非同期処理(非同期通信ではない)が使われることが多いです。
ゲームの画面に表示されている世界と、コンピュータ内で計算されている世界が非同期になっています。
年々ゲーム画面がどんどん綺麗になっていますが、それにともない処理落ちすることが多くなっています。
処理落ちしたときに、キャラクターがワープしたように進むことがあります。
これは画面表示が処理落ちしたときでも、内部の世界の計算が進んでいるので、キャラクターの位置などは表示されない間も動いているからです。

jQueryのAjaxに関連するメソッド

jQueryにはAjaxを行うためのメソッドが用意されています。jQueryを使うと素のJavaScriptで記述するよりもシンプルに記述することができます。

jQueryのAjaxに関連するメソッドのうちよく使用されるものを紹介します。

メソッド 解説
$.ajax() 非同期のHTTPリクエストを実行する。Ajax通信の基本となるメソッド。
.load() サーバーからデータをロードし、返ってきたHTMLをマッチした要素に配置する。
$.get() HTTPメソッドのGETリクエストを送る場合の$.ajax()のショートカット。
$.post() HTTPメソッドのPOSTリクエストを送る場合の$.ajax()のショートカット。
$.getJSON() dataType'json'を指定した場合の$.get()のショートカット。
$.getScript() スクリプトを取得して実行します。同一ドメインの制限を受けません。

$.ajax()

$.ajax()はjQueryによるAjax通信の基本となるメソッドで、非同期のHTTPリクエストを実行します。

$.ajax()には以下の2種類の構文があります。

jQuery.ajax(url [,settings])
jQuery.ajax([settings])

それぞれについて説明します。

jQuery.ajax(url [,settings])

文字列でURLを指定し、Ajax通信を実行します。。

url
リクエストを送るURL。
[,settings]
Ajaxリクエストを構成するキーと値のオブジェクト。全ての設定はオプションとなっており、$.ajaxSetup()で任意のオプションにデフォルト値を設定できます。

jQuery.ajax([settings])

リクエストを送るURLをsettingsオブジェクトの中に含めて指定し、Ajax通信を行います。

[settings]
Ajaxリクエストを構成するキーと値のオブジェクト。全ての設定はオプションとなっており、$.ajaxSetup()で任意のオプションにデフォルト値を設定できます。

$.ajax()の引数のsettingsについて

settingsはキーと値のオブジェ形式でオプションを設定します。

非常に多くのプロパティがあるので、ここではどのようなプロパティがあるかだけ紹介します。

詳しい解説はjQueryの公式サイトで確認してください。

  • accepts
  • async
  • beforeSend
  • cache
  • complete
  • contents
  • contentType
  • context
  • converters
  • crossDomain
  • data
  • dataFilter
  • dataType
  • error
  • global
  • headers
  • ifModified
  • isLocal
  • jsonp
  • jsonpCallback
  • method
  • mimeType
  • password
  • processData
  • scriptAttrs
  • scriptCharset
  • statusCode
  • success
  • timeout
  • traditional
  • type
  • url
  • username
  • xhr
  • xhrFields

よく使うsettingオプションのプロパティ

settingオプションの中でよく使うプロパティものについて解説します。

よく使うものとしてurltypedatadataTypebeforeSendsuccesserrorcompletetimeoutcacheなどがあります。

url
リクエストを送るURL。デフォルトは現在のページ。
method
'POST''GET''PUT'のHTTPメソッド。デフォルトは'GET'
data
サーバーに送るデータ。オブジェクト、文字列、配列で指定する。
dataType
サーバーに返答を期待するデータのタイプ。使用可能なタイプは'xml''html''script''json''jsonp''text'となっています。
beforeSend
送信前にjqXHRオブジェクトを変更するためのコールバック関数。これを使用しカスタムヘッダーなどを設定する。
success
リクエストが成功したときのコールバック関数。Ver1.8からは非推奨。代替は.done()メソッド。
error
リクエストが失敗したときのコールバック関数。Ver1.8からは非推奨。代替は.fail()メソッド。
complete
リクエスト終了時のコールバック関数。Ver1.8からは非推奨。代替は.always()メソッド。
timeout
リクエストがタイムアウトする時間をミリ秒で設定する。0のときはタイムアウトしない。
cache
falseに設定すると、ブラウザでページをキャッシュしない。リクエストが'GET'のときのみ正常に動作する。

$.ajax()の使い方

$.ajax()の簡単な使い方を紹介します。

クライアント側からAjaxリクエストをし、サーバーでデータを処理してレスポンスを返し、受け取ったデータを表示するサンプルを考えてみます。

jQueryによるAjaxのサンプルの流れ

まずクライアント側で画面を表示するためのHTMLファイルと、サーバー側でデータを処理するPHPファイルを用意します。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>名前を入力して、送信ボタンを押してください。</p>
<p>
	<label>名前 </lable><input type="text" name="name" id="name">
	<input type="button" id="button1" value="送信">
</p>
<div id="result"></div>

<script type="text/javascript">
$(function(){
	$('#button1').click(function(){
		$.ajax({
			url:'ajax_test.php',
			type:'GET',
			dataType:'text',
			data: {
				your_name:$('#name').val()
			},
		}).done(function(data){
			$('#result').html(data);
		}).fail(function(){
			alert('通信に失敗しました。');
		});
	});
});
</script>
</body>
</html>

テキストボックス1つと、送信ボタンが1つあります。

テキストボックスに名前を入力し、送信ボタンを押すとAjaxリクエストを送信します。

①のAjaxリクエストはGETで送信することにします。

$.ajax()の引数のurlは同一ドメイン内でなければなりません。ファイル名やパスはご自身の環境のものに合わせて修正してください。

dataはテキストボックスに入力された文字列を取得しています。

ajax_test.php
<?php
if(isset($_GET['your_name']))
{
	$name = htmlspecialchars($_GET['your_name'], ENT_QUOTES, "UTF-8");
	echo 'こんにちは、' . $name . 'さん。';
}
else
	echo '名前を入力してください。';
?>

GETで送信されてきたデータを処理してレスポンスを返すPHPです。

②のサーバー上での処理は、名前を受け取り挨拶を返す簡単な処理となっています。

③文字列でレスポンスを返すので、そのまま表示することができます。.done()id="result"の部分のみを更新しています。

[prism]