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



ゼロから始めるJavaScript講座Vol23 Ajaxとは
目次
  1. ゼロから始めるJavaScript講座 Ajaxとは
  2. Webページの仕組み
  3. サーバとは
  4. Ajax

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

Webページの仕組み

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

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

  1. インターネット住所[User名.lesson.codecamp.jp]にあるalert.htmlファイルを見せてくださいと要求(リクエスト)する
  2. User名.lesson.codecamp.jpにあるサーバ(PC)がalert.htmlファイルを応答(レスポンス)する
この2つのやり取りが行われた結果として、alert.htmlファイルを閲覧しております。

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

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

ajax1-639

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

サーバとは

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

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

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

ajax2-639

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

Ajax

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

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

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

ajax3-639

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

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

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

ajax4-639

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

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

ajax5-639

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

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

ajax6-639

実際に利用していると意識することはないと思いますが、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

ajax7-639

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

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

ajax8-639

ajax9-639

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

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

ajax10-639

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

ajax11-639

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

ajax12-639

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]

ajax13-639

ajax14-639

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秒後に受け取った文字列の文字数をレスポンスしてくれる」という内容となっています。

ajax15-639

get_strlen.phpはJavaScriptではなくPHPというプログラミング言語を利用しているため、ソースコードの中身を理解する必要はありません。

JavaScriptはリクエストを受け取りレスポンスを返すサーバ側のプログラムとして動作させることは通常できず、このような処理にはPHPが適しています。

ajax16-639

asynchronous.htmlはasyncに「false」を指定しており、この通信は同期通信で行われています。このため、送信ボタンをクリックしリクエストをget_strlen.phpへ送信した後、レスポンスがあるまでWebページ上の操作を行うことができません。

次にasyncの値を「true」に変更し、同じくテキストボックスに値を入力した上で送信ボタンをクリックしてみましょう。

ajax17-639

送信ボタンをクリックした後もテキストボックスの値を入力したり、送信ボタンをクリックしたりできます。trueを指定することで非同期通信で通信が行われ、リクエストを送信した後にも他の操作(処理)を行うことができます。

ajax18-639

dataはリクエスト先のサーバに送信するデータを指定します。値の記述方法については受け取り側(サーバ側)の知識も関わってくるため詳細は割愛します。

Ajaxによる非同期通信はJavaScript特有のものであり、ユーザーにストレスを感じさせないWebページ作成には必須となります。

しかしasynchronous.htmlのようにデータをサーバへ送信しレスポンスを受け取る処理を完全に理解するためには、PHPのようなWebページ作成用のプログラミング言語の知識も必要となります。

NEXT LESSON ☛ PHPとは

PREV LESSON ☛ jQueryの書き方

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp