【jQuery】「Ajax」、「jQuery Deferred」による「非同期通信」

Ajax（エイジャックス）とは？

「Asynchronous JavaScript + XML」の略で、2005年に登場しました。

非同期でファイルのやり取りをするための仕組みのことと言われますが、良く何のことかわかりませんよね。

要は、JavaScriptのプログラムを中核として、XML、CSS、HTTP通信、CGI等の様々なWeb技術を組み合わせたグラフィカルな技術のことと捉えるといいでしょう。

背景

JavaScriptは、本格的なインタラクティブなサイトを作るには力不足と言われていました。（当時は、Adobe Flashの一人勝ちの時代でした。）

ところが、2005年に登場したこの「Ajax(エイジャックス)」という技術で、状況は一遍し、大人気となりました。

Ajaxのメリット

ページ全体のリロードではなくページの必要な部分の更新だけをするので、いちいちユーザーを待たせることなくリアルタイムに入力や閲覧を続けることができます。これがなければサーバーとクライアントで送受信が完了するまでいちいち待たなければなりません。

Ajaxの代表例

Googleの「Googleマップ」です。

このサイトは、「マップを、拡大縮小させたり」、「ストリートビューでパノラマ形式に閲覧する」といった非常にグラフィカルな機能を提供するサービスです。

しかし、このサイトは、「Adobe Flash」等の機能は一切使わず、標準のWebブラウザの機能（Ajax）だけでそれを実現しています。

実際の動作

「XMLHttpRequest」という機能を使って、JavaScriptから非同期でページの再読込みなしにページを更新します。(バックグラウンドで行ってくれます。）詳しくは、下記の記事でも解説しています。

XmlHttpRequestオブジェクトとは？

Ajaxの最も基本となるオブジェクトで、サーバー側が保持しているデータを動的に取得できます。

このオブジェクトを利用することで、サーバー側からデータを取得するために画面遷移を行う必要がなくなります。

Ajax処理の基本的な流れ

XmlHttpRequestオブジェクトを生成する。
レスポンス受信時の処理を設定する。
リクエスト先のURLや、送信データを設定する。
リクエスト処理をする。
レスポンスしたデータを元に処理をする。

1.XmlHttpRequestオブジェクトを生成する。

構文

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

1	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

※この例では、IEでしか動きません。

2.レスポンス受信時の処理を設定する。

構文

xmlhttp.onreadystatechange = httpHandler;

1	xmlhttp.onreadystatechange = httpHandler;

ここでは、「XmlHttpRequestオブジェクト」の「onreadystatechange」に対して、「httpHandler」という関数を設定しています。

3.リクエスト先のURLや、送信データを設定する。

構文

xmlhttp.open("GET", "リクエスト先のURL");

1	xmlhttp.open("GET", "リクエスト先のURL");

実際にリクエストをするURL等を設定します。

4.リクエスト処理をする。

構文

xmlhttp.send(null);

1	xmlhttp.send(null);

send関数でリクエストをします。引数にはデータを渡すこともできます。

5.レスポンスしたデータを元に処理をする。

構文の例

function httpHandler(){
	if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
		alert(xmlhttp.responseText);
	}
}

function httpHandler(){

if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {

alert(xmlhttp.responseText);

}

「XmlHttpRequestオブジェクト」の「onreadystatechange」に設定した関数が呼び出されます。

上記の関数では、サーバーからレスポンスされてきたデータをアラートで出力しています。

上記、関数の中ではいくつかプロパティの値を使用しています。

readyStateプロパティ

「XmlHttpRequestオブジェクト」の処理状態を保持するプロパティ値になります。

値	説明
0	オブジェクトが初期化されていない。
1	openが呼び出し済み。
2	sendが呼び出し済み。
3	サーバーからデータをダウンロード中
4	サーバーとの通信処理が完了した。

Ajaxで扱えるデータフォーマット

下記のフォーマットで扱うことが普通になっています。

単なるプレーンテキスト(.txt)
XML(.xml)
JSON(JavaScript Object Notation)(.json)

Ajaxの動作確認方法

ローカルでファイルを開いても、悪意あるJavaScriptコードを外部に送らせないようにするため、セキュリティ上の制限が課せられて、Ajaxは動作しないです。

ローカルでテストをするには？

では、どうやってテストすればよいでしょうか。

それは、もちろんサーバーにアップロードして動作を確認するというのは一つの手ですが、かなり手間になります。

なので、ローカルにApache等のWebサーバーをインストールして、そこに配置して動作確認するようにしましょう。

jQueryで、Ajaxによる非同期通信（データ送受信と画面の描画を同時に行う処理）を行うには、「ajaxメソッド」を使います。

ajaxメソッドの構文

<script type="text/javascript">
$.ajax({
	url: 'Ajax通信によって、読み出すURL',
	dataType: '受信するデータの種類を指定',
	async: (true/false：非同期通信を有効にするか設定できる),
	success: 【データの受信に成功した場合の処理を記述】,
	error: 【データの受信に失敗した場合の処理を記述】
});
</script>

$.ajax({

url: 'Ajax通信によって、読み出すURL',

dataType: '受信するデータの種類を指定',

async: (true/false：非同期通信を有効にするか設定できる),

success: 【データの受信に成功した場合の処理を記述】,

error: 【データの受信に失敗した場合の処理を記述】

});

</script>

dataTypeの種類

項目	説明
xml	XML
html	HTML
script	JavaScriptコード
json	JSONデータ
jsonp	JSONPデータ
text	テキストファイル

loadメソッド

また、例えば「HTMLファイル」の内容を埋め込むのみといった簡潔な処理をしたい場合は、「ajaxメソッド」を使わずに「loadメソッド」を使うというのも一つの手です。

jQuery Deferredとは？

非同期処理を直列に記述するための仕組みです。

非同期処理を指定した順番で指定することもできます。

Deferredオブジェクトとは？

下記のいずれかの状態を持つオブジェクトです。

unresolved(デフォルト値です。)
resolved
rejected

状態によって、下記のように次にどんな処理を実行するかを決めてくれます。

unresolvedなら、後続処理は実行しない。
resolvedなら、doneメソッドを実行する。
rejectedなら、fatalメソッドを実行する。

使い方

jQueryでは、ajax処理終了後にPromiseオブジェクトが返却されるので、その値によって色々設定します。

doneメソッド

Promiseが正常終了した場合に、Promiseオブジェクトにコールバック関数をここに登録します。

failメソッド

Promiseが異常終了した場合に、Promiseオブジェクトにコールバック関数をここに登録します。

thenメソッド

done,fail,progress用のコールバック関数をまとめて登録することができます。

$.when()メソッド

2つ以上のpromiseが成功または失敗したタイミングで、コールバック関数を実行したい場合に使用する。

複数の非同期処理が完了するまでは、特定の処理を実行させないといったようなトリッキーなことができる便利なメソッドです。