こちらでは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オプションの中でよく使うプロパティものについて解説します。
よく使うものとしてurl
、type
、data
、dataType
、beforeSend
、success
、error
、complete
、timeout
、cache
などがあります。
- 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リクエストをし、サーバーでデータを処理してレスポンスを返し、受け取ったデータを表示するサンプルを考えてみます。
まずクライアント側で画面を表示するためのHTMLファイルと、サーバー側でデータを処理するPHPファイルを用意します。
<!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
はテキストボックスに入力された文字列を取得しています。
<?php
if(isset($_GET['your_name']))
{
$name = htmlspecialchars($_GET['your_name'], ENT_QUOTES, "UTF-8");
echo 'こんにちは、' . $name . 'さん。';
}
else
echo '名前を入力してください。';
?>
GET
で送信されてきたデータを処理してレスポンスを返すPHPです。
②のサーバー上での処理は、名前を受け取り挨拶を返す簡単な処理となっています。
③文字列でレスポンスを返すので、そのまま表示することができます。.done()
でid="result"
の部分のみを更新しています。