【画面遷移せずにデータを取得できる】Ajax、非同期通信について

TAKAYA OHTAやOPERAのようにシームレスな画面遷移を実現する場合にAjaxが使われます。

SPA（Single Page Application）などデスクトップアプリのように操作できるのですが、それにもAjaxなどの非同期通信が使われています。具体的なサービスを挙げるとFacebookやTwitterですね。

今回、Ajaxや非同期通信についてあんまり理解せずに使っていたのでまとめてみました。

目次

1. 非同期通信とは？
2. メリット・デメリット
3. Ajaxの概要
4. 方法
   1. JavaScriptで書いた場合
   2. jQueryで書いた場合
5. まとめ
6. 参考文献

非同期通信とは？

まず、ウェブページなどを閲覧するためにHTTP通信をしてますよね。
ざっくり説明すると、まずWebブラウザ（クライアント）がウェブサイト（サーバー）にHTTPリクエストを送ります。
サーバーが処理を行い、その結果をブラウザに返すのがHTTPレスポンスです。
ブラウザがそれを表示することで、ユーザーがウェブページを見ることができます。
この流れがHTTP通信です。

同期通信はリクエストを出してからレスポンスを受け取るまで、他の処理を行うことができません。
それに対して非同期通信は、リクエストを投げてもブラウザの操作が行うことができます。そしてサーバーからレスポンスを受け取ると、受信処理を実行します。

ページの一部だけ変更するのに同期通信をしていたら、その間操作できないのでユーザビリティが損なわれますよね。
そんなときに非同期通信を使えば、ユーザビリティを損なうことなくページを更新することができます。

メリット・デメリット

次に非同期通信を使うメリット・デメリットをそれぞれ表にまとめてみました。

Ajaxの概要

Ajax(エイジャックス)とは、簡単に言ったらJavaScriptで非同期通信を行うことです。

Ajaxを使っているものを挙げるとGoogle マップが有名です。
地図をスライドするとその先の地図が表示されますよね。スライドしている間に足りない地図のデータをAjaxでリクエストしているから、ぬるぬる地図を動かすことができるのです。
もしAjaxがなければスライドする度にページを再読み込みする必要があるので、Ajaxに感謝です。

AjaxはHTML、XHTML、CSS、JavaScript、DOM、XML、XSLT、XMLHttpRequestオブジェクトなど既存の技術を組み合わせたものです。アプローチを指した言葉であり、Ajax自体がある種の技術という訳ではありません。

Ajaxは正式名称はAsynchronous Javascript And XMLです。XMLとありますがJSON、 HTML、テキストファイルなど、様々な形式の情報で送受信できます。最近ではXMLよりJSONの方がよく使われています。

方法

Ajaxを行う方法はいくつかあるのですが、今回はXMLHttpRequest APIを使う方法を紹介します。
最初にJavaScriptで書いた場合、次にjQueryで書いた場合を説明していきます。

JavaScriptで書いた場合

[common.js]

解説していきます。まずJavaScriptがサーバーにHTTPリクエストを送るために、XMLHttpRequestオブジェクトのインスタンスを作成します。

[common.js]

openメソッドでリクエストの初期化を行います。

引数は
・method: HTTPリクエストメソッド。 “GET”, “POST”, “PUT”, “DELETE”, など。
・url: リクエストの送り先のURL。
・async: 論理値。falseだと同期通信になる。既定値は true。
・user,password: ベーシックHTTP認証のユーザーとパスワード。既定値は null。
を取ります。

[common.js]

今回common.jsのパス/bar/foo.txtに対して、GET通信をしようとしています。

次にサーバーにリクエストを送ります。コードの順番と違うのですが、この部分ですね。

[common.js]

非同期の場合、リクエストが送信されるとメソッドはすぐ戻ります。結果は次のイベントによって配信されます。
同期の場合はメソッドはレスポンスを受け取るまで戻りません。

引数でリクエストの本文データを送ることができます。ただしリクエストメソッドがリクエストの本文を受け取れるものに限ります。リクエストメソッドが本文を受け取れない場合、引数は無視されてnullに設定されます。

最後にレスポンスに対するイベントハンドラを設定し、受動処理を指定します。

readyStateプロパティが変化するたびに、こちらの処理が走ります。
readyStateプロパティはXMLHttpRequestクライアントの状態を返します。要は非同期通信の状態を返しています。

XMLHttpRequestクライアントの状態について表にまとめてみました。

またstatusプロパティでHTTPステータスコードを取得しています。HTTPステータスコードとはサーバーのレスポンスの意味を表す3桁の数字コードです。これで非同期通信の処理の結果を取得してるのですね。
HTTPステータスコードの主な値を表にまとめてみました。

今回は、HTTPステータスコードが200の値を返す（処理が成功）ときにサーバーから受け取ったテキストをコンソールに出力します。それ以外の値なら、レスポンスメッセージをコンソールに出力します。

[common.js]

jQueryで書いた場合

BRISKでは主にjQueryでAjaxを扱うことが多いです。jQueryでの基本の書き方を説明したいと思います。

[common.js]

オプションの説明を下の表でまとめました。

$.ajax()はjqXHRオブジェクトを返します。jqXHRオブジェクトとはXMLHttpRequestオブジェクトのスーパーセットです。XMLHttpRequestオブジェクトを使いやすいように拡張したものみたいですね。

jqXHRオブジェクトはPromiseインターフェースを実装していています。なので受信したデータをコールバック関数で受け取ることなく、done()やfail()で取得できるのですね！

then()でもデータを取得できます。done()とfail()をまとめてかけるのがthen()です。

[common.js]

done()、fail()、always()の代わりにsccess()、error()、complete()で書いている場合がありますが、jQuery 1.8で非推奨になりました。

まとめ

サラッと書いてあるコードがこんな動きをしてたんですね。
調べながら書いていたのですが、ドンドン知らない単語が出てきて大変でした。Ajaxを理解するにはJavaScriptだけではなくHTTP通信の知識も必要で、Webの基礎知識が大切だと思いました。
リッチなサイトでは非同期処理はもはや欠かせないので、理解して使っていきたいですね。

これを読んで、少しでも非同期通信について理解が深まったら幸いです。

参考文献

MDN
現代の JavaScript チュートリアル ネットワークリクエスト XMLHttpRequest
jQuery.ajax()のまとめ
JavaScript 日本語リファレンス
jQuery 日本語リファレンス
山田祥寛,[改訂新版]JavaScript本格入門,技術評論社,2016