jQueryを利用した通信処理

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第23話:jQueryを利用した通信処理

目次



マンガ








マンガ台詞

【1Page】
先生:Webページの操作を 劇的に簡単にする『jQuery』だが
    実はもう1つ 便利な機能がある
    それは通信機能だ
遊:通信機能?
先生:パソコンやサーバーから ファイルを読み込む機能だ
遊:どう便利なの?
先生:たとえば CSVのデータを 置いておく
    そのファイルを 必要に応じて 読み込めれば便利だ
        【data1.csv】
        遊,6,12,8
        麗,98,89,92
        守,73,82,74

        【data2.csv】
        安見 遊,女の子
        高美舎 麗,女の子
        内木 守,男の子
            CSVファイルは『UTF-8』で書く
            『UTF-8』については
            『WebページのJavaScript』の
            『「文字コード」について』を参照
【2Page】
        <html>
            <head>
                <script
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
                    type="text/javascript"
                ></script>
                <script type="text/javascript">
                <!--
                // 引数『no』を取る関数(引数に応じて『data1.csv』『data2.csv』を取得)
                function hyou(no) {
                    // 『jQuery』の『ajax』メソッド
                    // 引数は『{url:ファイルのパス, success:終了後の処理の関数}』の連想配列
                    $.ajax({
                        url: "data" + no + ".csv",    // ファイル名
                        success: function(result){
                            // 引数『result』を取る無名関数
                            // 『result』には取得した文字列が格納されている
                            $("#data").text(result);    // id『data』の要素の文字列に設定
                        }
                    });
                }
                // -->
                </script>
            </head>
            <body>
                <input type="button" onClick="hyou(1);" value="表の表示1">
                <input type="button" onClick="hyou(2);" value="表の表示2">
                <pre id="data"></pre>
            </body>
        </html>
        『data1.csv』を取得して id『data』内に挿入
        『data2.csv』を取得して id『data』内に挿入
遊:なるほど
    必要に応じて カンニングする ようなものね
先生:たとえが 悪いなあ
【3Page】
先生:それじゃあ少し 説明するぞ
    複雑に見えるけど やっていることは単純だ
        $.ajax({
            url: "data" + no + ".csv",
            success: function(result){
                $("#data").text(result);
            }
        });
    『ajax』メソッドの引数は 『{url:値,success:値}』
    という連想配列になっている
    『url』にはファイルのパスを
    『success』には成功時の処理を 無名関数で入れている
    取得した文字列『result』は 『jQuery』の『text』メソッドで
    id『data』の文字列にしている
先生:というわけで 動的にデータを読んだり 送ったりすることも
    『jQuery』で簡単にできる
遊:へー なんだか さらに達人になった 気がするわ



説明

この章では、『jQueryを利用した通信処理』について学びます。

前章で紹介したように、『jQuery』には、Webページに様々なエフェクトを加えたり、要素を操作したりする仕組みが用意されています。それだけでなく、『jQuery』は、ページを移動することなく、バックグラウンドでサーバーのファイルを読んだり、サーバーにデータを送ったりする仕組みを持っています。このような、ページ遷移を伴わない通信処理と、その仕組みを利用したWebページのプログラミングのことを、『Ajax』と呼びます。

それでは以下、『jQueryを利用した通信処理』と『Ajax』について解説していきます。



『Ajax』とは?

新しいWebページをロードすることなく、バックグラウンドでサーバーと通信を行い、Webページを動的に書き換える処理を『Ajax』と呼びます(『Ajax』は、エイジャックスという読み方が一般的)。

『Ajax』は『Asynchronous JavaScript + XML』の略です。日本語に訳すならば『非同期にJavaScript とXMLファイルを使って通信を行う』といった意味になります。『XML』は、HTMLのような、テキストファイルの形式の1つです。

『Ajax』は、現在では『XML』に限らず、サーバーとテキスト形式のファイルのやり取りを行いながら、Webページの情報を更新していく方法全般を指します。

『jQuery』には、この『Ajax』を手軽に行うためのメソッドが用意されています。以下、そのメソッドを使った通信方法を紹介していきます。



『jQuery』の通信処理

通信を行う『ajax』メソッドは、連想配列を引数に取ります。この引数の、いくつかのオプション(連想配列のキーと値)を紹介します。

$.ajax({
    url: "http://www.google.com/search",    // URL
    data: "q=crocro&lang=ja",    // 送信するデータ
    type: "GET",    // GETかPOST(非設定時はGET)
    cache: true,    // 通信結果をキャッシュするか(非設定時はtrue)
    timeout: 1000,    // タイムアウトのミリ秒
    username: "",    // 認証が必要な場合のユーザー名
    password: "",    // 認証が必要な場合のパスワード
    success: function(res, dataType){},    // 成功時に実行する関数
    error: function(XMLHttpRequest, textStatus, errorThrown){}    // 失敗時に実行する関数
});

『jQuery』には、『ajax』メソッド以外にも通信用のメソッドが用意されています。詳しくは、『jQuery』の解説サイトや解説本を参考にしてください。


参考:jQuery日本語リファレンス - jQuery.ajax(options)
参考:jQuery日本語リファレンス - Ajax/API/jQuery

用意するデータの『文字コード』

さて、『Ajax』でのファイルの取得ですが、「日本語の入ったファイル」を取得する場合には、注意が必要です。『Ajax』の通信処理は、ファイルの文字コードを『UTF-8』と想定して行われます。そのため、取得したファイルが『UTF-8』以外のファイルだった場合に、文字化けしたりします。

文字コードについては、以前学習した『WebページのJavaScript』の『「文字コード」について』を確認してください。

Windowsで、『UTF-8』のテキストファイルを作るには、文字コード変換ソフトを使います。検索すればいくつかソフトが出てきますので、持っていない場合は、いずれかをダウンロードして利用してください。


参考:Google検索 - 文字コード変換 ソフト



マンガ中のプログラムの解説

それでは、マンガ中に出てきたプログラムを元に解説を行っていきます。

 【data1.csv】
 遊,6,12,8
 麗,98,89,92
 守,73,82,74
 【data2.csv】
 安見 遊,女の子
 高美舎 麗,女の子
 内木 守,男の子

『data1.csv』『data2.csv』ともに、文字コードが『UTF-8』のテキストファイルです。

以下、プログラムです。

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        // 引数『no』を取る関数(引数に応じて『data1.csv』『data2.csv』を取得)
        function hyou(no) {
            // 『jQuery』の『ajax()』メソッド
            // 引数は『{url:ファイルのパス, success:終了後の処理の関数}』の連想配列
            $.ajax({
                url: "data" + no + ".csv",    // ファイル名
                success: function(result){
                    // 引数『result』を取る無名関数
                    // 『result』には取得した文字列が格納されている
                    $("#data").text(result);    // id『data』の要素の文字列に設定
                }
            });
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="hyou(1);" value="表の表示1">
        <input type="button" onClick="hyou(2);" value="表の表示2">
        <pre id="data"></pre>
    </body>
</html>

『jQuery』を利用した処理なので、まずは『<script>』タグの『src』属性を利用して、Googleのサーバーから『jquery.min.js』を読み込んでいます。

ブラウザでHTMLファイルを読み込むと、画面には『表の表示1』『表の表示2』という2つのボタンが表示されます。

『表の表示1』ボタンをクリックすると、『hyou』関数を利用して『data1.csv』を読み込んで、『<pre id="data"></pre>』のタグ内の文字列として表示します。『表の表示2』ボタンをクリックすると『data2.csv』を読み込んで、『<pre id="data"></pre>』のタグ内の文字列として表示します。

『hyou』関数内では『$.ajax()』という、『jQuery』の『ajax』メソッドを利用しています。このメソッドは、連想配列で引数を取ります。通信処理のように、条件によって多くの設定が必要になるメソッドの場合、引数に連想配列を取ることが多いです。

今回の処理では、『ajax』メソッドの引数の連想配列には『url』と『success』の2つのキーと値を設定しています。

『url』には、ファイルのパスを記入します。この場合、Webページと同じドメイン上のファイルは指定できますが、別のドメインのファイルは指定できません。これはセキュリティ上の制約です(本章のあとの項で詳しく説明します)。

『success』には、通信が成功した際の処理を関数で設定します。ここでは、『result』という引数を設定した無名関数を用意しています。引数『result』には、通信の結果取得したテキスト形式のデータが入ります。そのため、この変数をWebページ上に描画するようにすれば、取得したファイルを画面に表示することができます。

このプログラムでは、『$("#data").text(result)』とすることで、id『data』の要素の文字列部分に、引数『result』の文字列を挿入しています。



『非同期通信』

『ajax』の『success』に指定した関数は、ブラウザが通信を完了した後に実行されます。JavaScriptのプログラムは、この実行を待たずに、次の処理に進みます。

以下、実際に実行される順番を解説します。

// 領域1

$.ajax({
    type: "GET",
    url: "data1.csv",
    success: function(result){
        // 領域3
        $("#data").text(result);
    }
});

// 領域2
 【処理順番】
 1. 『領域1』が実行される。
 2. 『領域2』が実行される。
 3. 通信完了後に『領域3』が実行される。

このように、プログラムの処理とは独立して通信が行われることを『非同期通信』と呼びます。

こういった非同期な通信を行うことで、ブラウザは『通信が完了するまでブラウザが固まってしまう』といったことを防いでいます。



セキュリティ

『Ajax』で通信を行う際は、セキュリティに気をつける必要があります。

サーバー上のCGIとやり取りする場合は、特に注意が必要です。セキュリティに関しては、今回の講座の本題から外れますので説明は割愛します。

基本的には、クライアント側とサーバー側の両方で、データを送る時、受け取る時に、問題になるデータがないか確認する必要があります。

どういったデータがセキュリティ的に問題があるのかは、使用しているクライアントソフトとプログラム言語、またサーバー側のプログラム言語と使用ソフトによって異なります。開発者は、これらのセキュリティ情報を、日々集め続ける必要があります。

ネットのITサイトやセキュリティサイトを当たり、必要に応じて知識を増やしていってください。


参考:情報処理推進機構:情報セキュリティ対策
参考:情報処理推進機構
参考:Google検索 - javascript セキュリティ
参考:セキュリティ:ITpro



『クロスドメイン』

JavaScriptを使い、データをサーバーから取得する際には、セキュリティ上の制約があります。

JavaScriptでは、Webページが読み込まれた『ドメイン』としか通信ができません(『ドメイン』は、URLの『http://www.google.com/』の『www.google.com』の部分です)。

『Ajax』は、『XMLHttpRequest』というオブジェクトを利用して通信を行います。このオブジェクトは、Webページが読み込まれた『ドメイン』以外とは通信を行いません。そのため、それ以外の『ドメイン』にあるファイルには、アクセスできません。

Webページを読み込んだ以外の『ドメイン』と通信することは、『クロスドメイン』通信と呼ばれています。『クロスドメイン』通信は、JavaScriptでは基本的に行えませんので注意が必要です。



『JSON』

WebページのJavaScriptでデータを取得する際には、『JSON』や『JSONP』と呼ばれるデータ形式がよく使われます。

かつては『XML』形式のデータが多かったのですが、『XML』は冗長でファイルサイズが大きいので、最近では『JSON』や『JSONP』を使うケースが増えています。WebAPIと呼ばれる、Web上に公開されている便利なツールの多くが、『JSON』や『JSONP』に対応しています。

『JSON』は、JavaScriptの配列や連想配列のように書いたテキストデータです。

以下、サンプルとして、『data.json』というファイルの内容を掲載します。

{"seito" : [
    {
        "namae" : "Yasumi Yuu",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Takabisya Rei",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Utiki Mamoru",
        "seibetu" : "Man"
    }
]}

『Ajax』では、このファイルを読み込んだあと、JavaScriptの配列や連想配列に変換して利用します。

『JSON』の実例

上記のファイルを読み込んで、表示するプログラムを以下に示します。

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        function hyou() {
            $.getJSON("data.json", function(json){
                for (var i = 0; i < json.seito.length; i ++) {
                    var seito = json.seito[i];
                    $("#data")
                    .append(seito.namae + " : " + seito.seibetu)
                    .append("<br>");
                }
            });
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="hyou();" value="表の表示">
        <div id="data"></div>
    </body>
</html>

『jQuery』の『getJSON』というメソッドを利用しています。第1引数にはファイルのパスを、第2引数には、データ取得後の処理を、無名関数で記述しています。

データ取得後の処理を行う無名関数は、『json』という引数を取っています。この『json』には、取得した『data.json』を、JavaScriptの配列として解釈したデータが入っています。

この『json』の内容は、以下の値と同じです。

var json = {"seito" : [
    {
        "namae" : "Yasumi Yuu",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Takabisya Rei",
        "seibetu" : "Woman"
    },
    {
        "namae" : "Utiki Mamoru",
        "seibetu" : "Man"
    }
]};

このデータの内容をツリー状に表記すると、以下のようになります。

  • seito
    • seito[0]
      • seito[0]["namae"] = "Yasumi Yuu"
      • seito[0]["seibetu"] = "Woman"
    • seito[1]
      • seito[1]["namae"] = "Takabisya Rei"
      • seito[1]["seibetu"] = "Woman"
    • seito[2]
      • seito[2]["namae"] = "Utiki Mamoru"
      • seito[2]["seibetu"] = "Man"

取得したデータは、上記のような構造になっています。そのため、『for』文の中で、『json.seito』を配列として扱っています。

『json.seito.length』は、配列の要素数です。『var seito = json.seito[i];』の『var seito』は、『namae』と『seibetu』という2つのキーを持つ連想配列になります。そのため、以下は同じ内容になります。

var seito = json.seito[0];
var seito = {
    "namae" : "Yasumi Yuu",
    "seibetu" : "Woman"
};

このようにして取得した、『json』の各データを、id『data』の要素に追加しています。

$("#data")
.append(seito.namae + " : " + seito.seibetu)
.append("<br>");

『append』メソッドは、セレクタで選択した要素の配下に、指定のHTMLを追加する命令です。ここでは、『seito.namae + " : " + seito.seibetu』として、名前と性別を追加しています。また、『<br>』を加えることで、改行も追加しています。

この『JSON』の取得は、『XMLHttpRequest』というオブジェクトが利用されています。そのため、同じ『ドメイン』のファイルしか取得できません。



『JSONP』

『JSON』は便利ですが、『クロスドメイン』の制約があります。しかしプログラムによっては、他のドメインのサーバーからデータを読み込んで利用したい場合もあります。

そういった場合によく使われるのが、『JSONP』と呼ばれるデータ形式です。

『JSONP』は、『JSON』のデータを少しだけ変更したテキストデータです。

jsonCallback(
    {"seito" : [
        {
            "namae" : "Yasumi Yuu",
            "seibetu" : "Woman"
        },
        {
            "namae" : "Takabisya Rei",
            "seibetu" : "Woman"
        },
        {
            "namae" : "Utiki Mamoru",
            "seibetu" : "Man"
        }
    ]}
)

『JSON』との違いは、『jsonCallback』のように関数を記述して、その引数としてデータが書かれている点です。

この『JSONP』のデータは、完全なJavaScriptのプログラムです。そのため、『<script>』タグをプログラムから追加することで、外部JavaScriptファイルとして読み込むことができます。

外部JavaScriptファイルを読み込む際は、『ドメイン』が同じである必要はありません。そのため、『クロスドメイン』の制約に引っ掛からずに、データを読み込むことができます。

『JSONP』の内部処理の解説

さて、『JSONP』では、データ全体を関数の呼び出し形式でくくりました。このデータが読み込まれた際に、何が起こるのでしょうか?

データの読み込みが完了して、『<script>』タグがWebページに追加されると、『jsonCallback』関数が呼び出されます(この関数の名前は任意に決めて構いません)。

元々のプログラム中に『function jsonCallback(data) {}』という関数があれば、取得したデータを引数として、その関数を実行します。

その結果、『function jsonCallback(data) {}』関数の引数『data』は、受け取ったデータそのものになります。『jsonCallback』内では、この受け取ったデータを元にして、様々な処理を行います。

『Flickr』のWebAPIを使った『JSONP』の実例

以下、『Flickr』のWebAPIを使って猫の画像を表示するプログラムを示します。

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        function hyou() {
            $.getJSON(
                "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json&jsoncallback=?",
                function(json){
                    for (var i = 0; i < json.items.length; i ++) {
                        var item = json.items[i];
                        $("<img/>")
                        .attr("src", item.media.m)
                        .appendTo("#data");
                    }
                }
            );
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="hyou();" value="画像の表示">
        <div id="data"></div>
    </body>
</html>

(『Flickr』の戻り値によっては、Internet Explorerでエラーが起こるケースもあります。その際は、『tags=cat』の『cat』を、他の単語に変えるか、Google ChromeやMozilla Firefoxを使ってみてください)

上記のプログラムのポイントは2つです。

1つめは、指定しているURLのクエリーの一部が『jsoncallback=?』となっているところです。

WebAPIでは、コールバック用のメソッド名をCGIの引数として指定するようになっています。しかし、メソッド名を指定するパラメータが何なのかは、WebAPIによって異なります。

『Flickr』の場合、コールバック用のメソッド名を指定する場所は『jsoncallback=〜』となります。この場所に『jsoncallback=?』と書いておけば、『jQuery』は『?』の位置にメソッド名を書き込み、URLを完成させてから、ファイルを読み込みます。

この『?』の位置には、『jsonp1271964453817』のようなメソッド名が、自動で作成されて代入されます。

// コールバック関数の設定前のURL
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json&jsoncallback=?
// コールバック関数の設定後のURL
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json&jsoncallback=jsonp1271964453817

2つめは、『function(json)』の部分です。成功時に呼び出される関数の第1引数に、『JSONP』を解析したオブジェクトが入ってます。このオブジェクトを利用して、データを読むことができます。



サンプルの入手

以下は、今回出てきたサンプルです。

注意事項

 通信関係のプログラムは、ブラウザのセキュリティの関係で、ローカル上では動作せず、サーバー上でしか動作しません。

 そのため、実行する際は、適当なサーバー(レンタルサーバーなど)にアップロードするか、PCにサーバーソフトを導入して、実行することになります。

 簡易的にサーバーを実行するには、「HTTP Server Anywher」というソフトが、シンプルで使いやすいです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(『Ajax』によるデータの取得)を表示

data1.csv』(データ1)(右クリックから保存してください)

data2.csv』(データ2)(右クリックから保存してください)

sample2.html』(『JSON』によるデータの取得)を表示

data.json』(『JSON』データ)(右クリックから保存してください)

sample3.html』(『JSONP』によるデータの取得)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。