tosumalog～ IT的備忘とパパ的備忘を書き綴ります ～

tosumalog

～ IT的備忘とパパ的備忘を書き綴ります ～

トップ > Business > Ajaxの使い方

Ajaxの使い方

Business Business-IT

こんにちは、tosumaです。


今回はAjaxを使って画面の一部情報のみを更新する方法について出来るだけ簡単にご紹介します。

1｜まえおき

Ajaxは「聞いたことはあるけど何か難しそう」みたいな印象をよく持ちがちな技術ですよね。

Web開発者の壁の1つじゃないでしょうか、といってもAjaxそのものは難しいわけではないですが、Ajaxを実現するためにアーキテクチャの理解をはじめ、JavascriptやDOMやDBなどの必要になる事が多いため、総合的に難しいといった感じでしょうか。

Ajaxだけ理解しても中々実装にまで結びつけるのは遠いですよね。苦笑

2｜Ajaxとは

Ajaxは非同期通信の事で「Asynchronous JavaScript + XML」の略です。

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

※Wikipediaより引用

3｜非同期通信とは

非同期通信は簡単に言うとリクエストに対して画面全体ではなく画面の一部のみを更新するものです。

Ajaxを用いない同期通信の場合だとWebページで検索など行った際にサーバーへリクエストが発生し、サーバーの処理後に画面全体が更新されるような流れになります。

それに対してAjaxを用いた非同期通信の場合はWebページで検索など行った際にサーバーへリクエストが発生し、サーバーの処理後に画面の一部分のみが更新されるような流れになります。

一般的によく見かけるAjaxを使った画面はGoogleマップやサジェスト(予測変換)ですね。

こういったものも毎回毎回画面の更新は発生せずに必要最低限の部分のみが更新されています、なので日頃から割と生活の中で自然とこのテクノロジーに触れているわけです。

4｜サンプルプログラム

説明読んでも良くわからないと思うので、実際にサンプルプログラムで理解します。

以下のようなサンプルプログラムを作成します、シリーズを選択するとキャラクターの一覧が更新されるようなイメージです。

ファイルは全部で3つで構成されており、以下のような関係性になっています。

4.1.list.html

HTMLファイルは以下のような形になります。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <script src="ajax.js"></script>
        <h3>シリーズ</h3>
        <select name="series" id="select_series">
            <option value="">未選択</option>
            <option value="01">FF1</option>
            <option value="02">FF2</option>
        </select>
        <h3>キャラクター</h3>
        <select name="character" id="select_character">
            <option value="">未選択</option>
        </select>
    </body>
</html>

jqueryを使うため、３行目にライブラリの参照を行っています。
６行目で4.2のJavascriptを参照しています。
7～12行目はシリーズのセレクトボックスを定義しています、ここは当サンプルでは固定値にしています。
13～16行目はキャラクターのセレクトボックスを定義しています、ここがシリーズの選択値に応じて部分的に更新されるオブジェクトになります。

4.2.ajax.js

Javascriptファイルは以下のような形になります。

$(function(){
    $('#select_series').on('change', function(){
        getCharacterList($(this).val());
    });
});

function getCharacterList(pNumbering) {
    $.ajax({
        url: 'get.php',
        type:"POST",
        data:{
            numberingid: pNumbering
        }
    }).done(function(html){
        $("#select_character").append(html);
    }).fail(function(html) {
        alert("error");
    });
}

1～5行目はシリーズのセレクトボックス(select_series)が変更イベントをトリガーに動作します、関数[getCharacterList]を呼出しており、引数として選択された値を渡しています。
7～１９行目はPHPファイル[get.php]を呼出しています、変数[pNumbering]をPostするようになっています。
また、get.phpからの処理が返ってくるとキャラクターのセレクトボックス(select_character)のオブジェクトを差替するようになっています。

4.3.get.php

PHPファイルは以下のような形になります。

<?php
    //パラメータ
    $numberingid = $_POST['numberingid'];
    //DB情報
    $DBHOST = "A";
    $DBPORT = "B";
    $DBNAME = "C";
    $DBUSER = "D";
    $DBPASS = "E";
    //DB接続
    $dbh = new PDO("pgsql:host=$DBHOST;port=$DBPORT;dbname=$DBNAME;user=$DBUSER;password=$DBPASS");
    //SQL作成
    $sql = "";
    $sql = $sql." select";
    $sql = $sql."     character_id seq";
    $sql = $sql."   , '<option value=\"' || character_id || '\">' || character_name || '</option>' html_value";
    $sql = $sql." from";
    $sql = $sql."     character_list";
    $sql = $sql." where";
    $sql = $sql."     numbering_id = '".$numberingid."'";
    $sql = $sql." order by";
    $sql = $sql."     seq";
    //SQL実行
    foreach ($dbh->query($sql) as $row) {
        $html .= $row['html_value'];
    }
    //データベースへの接続を閉じる
    $dbh = null;
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($html);
?>

3行目でPostされた値を受け取っています。
4～11行目はDBへの接続を行っています、このサンプルではPostgreSQLへPDOで接続する例です。
12～26行目はテーブル[character_list]からPostされたシリーズ情報を元にSQLにてキャラクターの一覧を取得しています。
この際にHTMLの形式で結果を組み立てています。
30行目は取得結果をjson形式でajax.jsへ返しています。


Ajaxで非同期通信を用いた画面更新が実施できたらストレスも軽減しますし、なにより便利ですよね。
本記事が何かしらの参考になれば幸いです。

それでは皆さんも良いテクニカルライフを！！


お読み頂き有難うございました。