更新日: 2017年3月14日
公開日: 2015年12月6日

ゼロから始めるJavaScript講座Vol23　Ajaxとは

ゼロから始めるJavaScript講座　Ajaxとは
Webページの仕組み
サーバとは
Ajax

ゼロから始めるJavaScript講座　Ajaxとは

Webページの仕組み

GoogleやYahooなどを代表とした無数にあるWebページは、それぞれの企業が管理しているサーバ(PC)のファイルをブラウザで見ています。

例えばhttp://User名.lesson.codecamp.jp/alert.htmlの場合、

インターネット住所[User名.lesson.codecamp.jp]にあるalert.htmlファイルを見せてくださいと要求(リクエスト)する
User名.lesson.codecamp.jpにあるサーバ(PC)がalert.htmlファイルを応答(レスポンス)する

この2つのやり取りが行われた結果として、alert.htmlファイルを閲覧しております。

ブラウザと企業が管理するサーバ(PC)の要求(リクエスト)と応答(レスポンス)のやり取りを図で表すと、次のページのようになります。

URL: http://User名.lesson.codecamp.jp/alert.html の表示

インターネットを通じて世界中のサーバ(PC)と繋がっており、URLで指定した住所にあるサーバ(PC)のファイルを取得できます。

サーバとは

インターネットを通じ世界中にあるサーバは繋がっていますが、サーバと皆さんが利用しているWindowsやMac等のPCは、基本的に同じものです。

Webページをインターネット上に公開して見れるようにするには専用のソフトウェアが必要であり、本講義で利用しているサーバでは、Apacheというソフトウェアを利用しています。

ApacheのようなWebページを見れるようにする専用のソフトウェアをインストールし、Webページを表示できるようにしたPCをWebサーバと呼びます。

つまり皆さんが使っているPCもApacheのようなソフトウェアをインストールし、インターネット上へ公開するために必要な設定を行うことでWebサーバとすることが可能です。

Ajax

Ajaxとは「Asynchronous JavaScript+XML」の略称で、日本語では一般的に「エイジャックス」と呼ばれます。AjaxはJavaScriptを利用しサーバとの間の通信(データのやり取り)を非同期で行うことができます。

Webの仕組みで説明した通り、Webページの表示はインターネットを通じてブラウザからサーバへデータのリクエストを行い、これに対しサーバがレスポンスを返すという処理が行われています。

サーバとの通信は「リクエスト&レスポンス」がセットになっており、データ取得には必ずこのやり取りが行われています。

通常、Webページはサーバとの通信を同期通信と呼ばれる内容で行っています。同期通信の場合、リクエストを行ってからレスポンスを受け取るまでの間、他の処理を行わず待ち続ける必要があります。

Webページを表示する際、画面が真っ白なまま表示まで時間がかかるという経験をしたことが1度はあると思いますが、これは同期通信で行っているためです。

サーバへ指定したURLのWebページを見せるようリクエストを送り、このレスポンスが返ってくるまでの間に他の処理を行うことができないため、真っ白なままとなります。

これに対し、サーバへリクエストを行ってからレスポンスを受け取るまでの間に他の処理を行うことができるのものを非同期通信

Ajaxによる非同期通信は色々なところで利用されていますが、利用頻度が高く有名なものにGoogleサジェストがあります。

Googleサジェストはテキストボックスに入力された文字列から検索キーワードを推測して、候補一覧を表示します。

おそらく頻繁に利用している機能だと思いますが、Googleサジェストはキーボードで文字を入力するごとにAjaxによりサーバと通信を行っています。

実際に利用していると意識することはないと思いますが、Googleサジェストの場合、テキストボックスに文字を1文字追加する度に、サーバへ検索候補のリクエストを行っています。このリクエストは非同期通信で行ってるため、レスポンスで検索候補が返ってこなくても他の処理を行うことができます。

このようにAjaxによる非同期通信はユーザの利便性を向上されるため、様々なところに利用されています。

実際にAjaxを利用したプログラムを作成してみましょう。

[code title="ajax.html"]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function get_text() {
            // Ajax通信処理
            $.ajax({
                // リクエスト送信先URLの設定
                url: 'http://codecamp.lesson.codecamp.jp/javascript/ajax.txt',
                // 非同期通信フラグ
                async: true,
                // Ajax通信成功時にレスポンスデータ受け取り&処理実行
                success: function(data) {
                    document.write(data);
                }
            });
        }

        $(document).ready(function() {
            setInterval(get_text, 2000);
        });
    </script>
</head>
<body>
</body>
</html>

[/code]

ajax.htmlは指定したURLのファイルを読み込み表示するプログラムです。読み込むデータは、こちらで用意したファイルを利用しています。
ファイル: http://codecamp.lesson.codecamp.jp/javascript/ajax.txt

直接URLにアクセスしてもらえれば分かりますが、中身は「Hello!」と1行のみ書いてある簡単なテキストファイルとなっています。

ajax.htmlを閲覧すると、2秒に1回「Hello!」という文字が追加表示されます。

jQueryに用意されている$.ajax関数を利用し、Ajaxによるサーバと通信を行っています。

$.ajax関数は引数に連想配列を指定し、キーと値の組み合わせにより通信のオプション設定ができます。

urlは値にリクエストを送信する先のURLを指定します。

asyncは値にtrue(非同期)orfalse(同期)を指定します。デフォルトだとtrueになっており、非同期通信の場合はasyncキーを記載する必要はありませんが、今回はサンプルのため記載しています。

sucessはAjaxによる通信が成功した場合に呼び出されるイベントで、値にイベント発生時の処理内容を記載します。またレスポンスデータはfunction()の引数で受け取れることが可能で、今回は変数dataにレスポンスデータを受け取っています。

以上がAjaxによりサーバと通信を行う際の処理となります。

$.ajax関数には今回利用した以外にもリクエストに失敗した場合の処理など、オプションが多数あります。

最低限「url」と「success」のオプションを指定すれば、Ajax通信によるリクエスト送信とレスポンス受け取りを実装することができます。

※実際のサービスでは最低限のみで実装することはまずありえません
次に「非同期」と「同期」の違いを確認してみましょう。

[code title="asynchronous.html"]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function get_strlen() {
            $.ajax({
                url: 'http://codecamp.lesson.codecamp.jp/javascript/get_strlen.php',
                async: false,
                data: 'req=' + $('#req').val(),
                success: function(data) {
                    $('#box').append('<p>' + data + '</p>');
                }
            });
        }

        $(document).ready(function() {
            $('#click').click(get_strlen);
        });
    </script>
</head>
<body>
    <input type="text" id="req">
    <button id="click">送信</button>
    <div id="box"></div>
</body>
</html>

[/code]

asynchronous.htmlはテキストボックスに入力されている文字列を指定URLへ送信し、レスポンスでこの文字数を受け取り表示するプログラムです。

文字数を計算し返すファイルはこちらで用意したものを利用しています。

[code title="http://codecamp.lesson.codecamp.jp/javascript/get_strlen.php"]

<?php
// レスポンスのデータ形式を指定
header("Content-type: text/html; charset=UTF-8");

// 5秒間遅延させる
sleep(5);

// reqが送られてきた場合
if (isset($_GET['req']) === TRUE) {
    // 送られてきたデータ(req)の文字数をレスポンス
    echo '送られてきた値の文字数は「' . mb_strlen($_GET['req'], 'UTF-8') . '」です';
} else {
    echo '値が送られてきませんでした';
}

[/code]

get_strlen.phpは「リクエストで送信されてきた文字列を受け取り、5秒後に受け取った文字列の文字数をレスポンスしてくれる」という内容となっています。