よりユーザビリティの高いWebアプリやサイトを作るには、非同期通信を用いる必要があります。そのためのツールの一つが「Ajax」です。Ajaxの使い方や使用例を紹介しますので、Ajaxを使ったサイトやアプリを作れるようになりましょう。

短期で基礎を習得できるオンライン・リモート講座(入門5日・基礎10日)はこちら

Ajaxについて学ぼう

Ajaxは、普段から利用しているWebサイトやアプリにもよく利用されています。Ajaxは、アプリやサイト開発をJavaScriptで開発するためには覚えておきたい機能の一つです。

JavaScript初心者の方には、Ajaxとは何かが分からない方もいるでしょう。まずは、Ajaxとはどのようなものかを解説します。

ジョブサポートのフロントエンド(HTML5・CSS・JavaScript)入門5日講座はこちら

Ajaxは非同期通信のための技術

「Asynchronous JavaScript XML」の略です。「Asynchronous」は「非同時性の、非同期の」という意味で、Ajaxを訳すと「JavaScriptとXMLを使ったサーバーとの通信」となります。

JavaScriptを利用してサーバーとの非同期通信を行い、受信をDocument Object Model（DOM）を経由してページに反映させるための技術のことを言います。

Ajaxのこの技術は、GoogleマップやGmail、Facebookなど、メジャーなWebサイトやツールではよく見かけるものです。

この技術がどういったものかについて理解するためには、「非同期通信」について理解を深める必要があります。

非同期通信とは？

通常、Webページで何かの操作をするときは、パソコンからリクエストをインターネットを通じてサーバーへと送り、サーバーからデータが返ってきて、リクエストを反映するという仕組みをとっています。

非同期通信とは、リクエストを出してからデータが返って来る前の処理を、ブラウザ上で行い、更新した部分だけをリクエストして処理を行う、という通信を行います。

非同期通信にはさまざまなメリットがあります。例えば、通常の通信ではリクエストを送ってからレスポンスが返ってくるまで操作が一切できなくなってしまいますが、非同期通信の場合は、レスポンスを待つことなく次の操作に移れます。

また、1回の通信量も少ないので、ブラウザ上の処理が早くなるという特徴もあるのです。

同期通信についても知っておこう

同期通信とは、サーバーにリクエストを送り、返って来る情報とブラウザ上のデータを完全に同期しながら、操作を行うという仕組みのことです。

同期通信では、サーバーからの返信を待っている間、操作ができません。更新をかけた際に、画面が真っ白になって何もできなくなるWebサイトを訪問したことはないでしょうか。あの処理が、同期通信を行っている場合の処理となります。

同期通信の場合、操作を要求するとページが再読込される、一つの処理が終わるまで次の処理ができないといった不便な部分があり、動的なサイトでは非同期通信がよく使われています。

Ajaxを使ったサービスの特徴

Ajaxは色々なサービスで利用されています。例えば、Web上で地図を表示した際に、カーソルに合わせて地図がスライドするようなシーンを見かけたことはあるでしょう。ページが真っ白にならず、地図を操作できる処理はAjaxの非同期通信によるものです。

他にも、Googleで検索した際にサジェストキーワードが表示されたり、Twitterのタイムラインなども、Ajaxが使われています。

■関連記事

Ajaxの書き方

AjaxはJavaScript上で使われますが、どのようにコードに記載すれば良いのでしょうか。Ajaxを利用するためのコードの書き方について学びましょう。

基本的な書き方

まずは、基本的な書き方について押さえておきましょう。

$.ajax({
　url: ‘××××’　//URLまたはディレクトリを記載
　})
　.done(function(data){ // 通信が成功したときの処理 
　})
　.fail(function(data){ // 通信が失敗したときの処理
　})
　.always(function(data){ //通信の成否にかかわらず実行する処理 
});

通信に成功したときの処理、失敗したときの処理、成否にかかわらず実行する処理、という三つのパターンを用意します。

POST・GETを使って書く

Ajaxの書き方は、jQuery2までとjQuery3以降では異なる点に注意が必要です。今回は、jQuery3以降の書き方について紹介します。

$.ajax({
　url: '××××', //アクセスするURLかディレクトリ
　type: 'postかget',
　cache: false, //cacheを使うかどうか
　dataType:'json', //data type scriptなどデータタイプの指定
　data:data, //アクセスするときに必要なデータを 記載
　})
　.done(function(response) { //通信が成功したときのコールバックの処理を書く
　})
　.fail(function(xhr) { //通信が失敗したときのコールバックの処理を書く
　})
　.always(function(xhr, msg) { //通信結果にかかわらず実行する処理を書く
});

基本的な書き方と比較して、タイプの選択など書くことは増えていますが、基本的な流れについては同じです。

GET通信とPOST通信の違い

GETとPOSTにどのような違いがあるのかについても把握しておきましょう。大きな違いは用途です。GETの場合、レスポンスがキャッシュされますが、POSTの場合はキャッシュされません。

GET通信の場合、その結果はキャッシュされ、次回以降に通信を行った場合はそのキャッシュを利用されます。そのため、GETから何度通信をしても、同じ結果が帰ってきます。

一方、POSTの場合は、サーバーにデータを送ることで、状態を変化させることが可能です。そのため、メッセージの書き込みやデータの更新など、内容を書き換える場合はPOSTを使います。

ブログで新しい記事を投稿したり、新しいデータを登録する場合はPOSTを、Googleの検索やWordPressで下書きを保存する際にはGETが使われます。

■関連記事

AjaxをJavaScriptに実装する方法

Ajaxを実際にJavaScriptに実装するために、どのような方法があるのかを解説します。エラーが出た場合のメッセージを取得する方法などと合わせて見ていきましょう。

「XMLHttpRequest()」による通信

JavaScriptでは、非同期通信を行うためのAPI「XMLHttpRequest()」が提供されているので、これを使います。

まずは、「XMLHttpRequest」のインスタンスを生成します。書き方は以下の通りです。

var xhr = new XMLHttpRequest();

次に、生成したxhrというインスタンスを使って、「どのサーバーに対して」「どんな方法で」「いつ」データを取得するのかを決定します。

var xhr = new XMLHttpRequest();
xhr.open(【どんな方法でデータを取得するか】, 【どのサーバーに対して】);
xhr.send();
xhr.onreadystatechange = function() {
　if(【いつデータを取得するか】) {  //データ取得後の処理内容 
　}
}

「readyState」を使った条件分岐

先述した「XMLHttpRequest」を使った方法ですが、そもそも通信が完了していなければデータを取得して良いタイミングが分かりません。

そこで、「XMLHttpRequest」のオブジェクトは、「readyState」もしくは「status」のプロバティで、通信の応答や状態を確認することができますので、これを使いましょう。

上記のコードの「if～」を、以下の文章に置き換えます。

if ( xhr.readyState === 4 ) {

これは、「readyState」が4の値であればデータを取得する処理を行う、という内容に書き換えるものです。

「readyState」の値は、次のようにサーバーと通信状態を表しています。

4の値になれば通信が完了している、というステータスになるので、処理を実行します。

エラーメッセージを取得

サーバーとの通信でエラーが起こった状態についても記述をしておきましょう。

これは、サンプルコードのif文の「readyState」と並行する形で、「status」を以下のように記述することができます。

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

「readyState」の値が4、「status」の値が200のとき、データ取得後の処理を実行する、という文章になります。

「status」の値と状態には、以下のようなものがあります。

消えているホームページなどで「404 not found」などと表示されるのは、ステータスが「404」の状態だからです。

200（通信成功）の状態のときだけ処理を実行する、それ以外はエラーメッセージを取得する、という処理にしておきましょう。

企業向け実績2500名以上,個別指導型の通年開講プロエンジニア育成コース(Java1~3ヶ月)はこちら

■関連記事

jQueryを利用する

JavaScriptを利用する上では、jQueryというライブラリを利用するととても便利です。jQueryを利用して、Ajaxの処理を行うことが可能です。

DX時代に活躍する人材育成を！ 若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

jQueryの概要や、jQueryの書き方についても学びましょう。

jQueryの概要

jQueryは、2006年にリリースされたJavaScriptのライブラリです。ライブラリは、プログラムがまとめられたファイルのことです。ライブラリを使うことで、プログラムを一から記載せず、よく使う機能などを簡単に追加することができます。

jQueryは扱い方も非常に簡単で、初心者から上級プログラマーまで重宝できるライブラリです。

jQueryを利用するメリット

jQueryを使うことでさまざまなメリットがあります。第一に、HTMLやCSSの操作を簡単に行えるという点です。

例えば、ボタンにマウスカーソルが乗ったときにボタンが変化したり、画面をスクロールするとデザインが変わっていくようなWebサイトを見たことがあるでしょう。このような機能を一から作ると、膨大なコードを記述しなければなりません。

jQueryを使うことで、非常に短いコードでこれらの機能を実装できます。

次に、Ajaxが簡単に扱えるという点です。jQueryを使うと、Ajaxの記述を簡易化することができます。

jQueryの書き方

jQueryでAjaxを実行するには、以下のように記載します。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$( function() {
　$.ajax( { //実行する処理内容
　} );
} );

scriptのタグ内に記述することができるので、そこまで難しくはありません。

■関連サイト

Ajaxを使って機能性の高いWebサイトを構築

Ajaxを使うことで、カーソルを動かしただけでそれに追従する形でスライドする地図や、新規登録フォーム、タイムラインなど多様的なWebサイトを構築することができます。

非同期通信は使うメリットも非常に大きく、JavaScriptを使っていくのであれば、Ajaxの使い方についても学んでおきたいところです。その際はPOST通信、GET通信の違いについての違いについても把握しておきましょう。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

jQueryを利用すれば、Ajaxの記述が簡単になります。jQueryもJavaScriptを使う上ではよく利用されるライブラリなので、合わせて使い方を覚えておきたいところです。