【jQuery】Ajaxを使ってwebの表示を変更する

Ajaxとは？

Ajaxは非同期通信と呼ばれ、webサーバーからデータをJavaScriptを介して得る仕組みです。Ajaxを使わなければ、サーバーの情報の更新されればブラウザはいちいちページを読み込まなければなりません。Ajaxを使えば、処理結果をリロードしなくとも反映させることが可能です。

次のようなデータファイルを作成します。jsonはJavaScriptの配列に似た書き方をします。プロパティと値の書き方も同じです。ダブルクォートで囲むという点が違います

[
    {"id":"aaa","crowded":"yes"},
    {"id":"bbb","crowded":"no"},
    {"id":"ccc","crowded":"no"}
]

次のようなJavaScriptでデータファイルを読み込むことができます。

  $.ajax({url: 'data.json', dataType: 'json'})
    .done(function(date) {
        data.forEach(function(item, index) {
            console.log(item);
        });
    })
    .fail(function() {
        window.alert('読み込みエラー');
    });
});

$.ajaxメソッドとは？

＄.ajaxメソッドでは、( )内にデータの送受信に必要な設定をオブジェクトとして記しています。今回のファイルは「data.json」、dataTypeはjsonファイルなので「json」です。この設定はサーバー等によって変わってきます。

$.ajaxメソッドは指定したデータファイルをダウンロードします。

.done(function(){ })とは？

.doneでは、$.ajaxメソッドでダウンロードが終わり次第実行されるファンクションを記します。function()の()内はパラメーター名で、任意のものが指定できます。

.fail(function(){ })とは？

$.ajaxメソッドでダウンロードが失敗した時に実行するファンクションを示します。

.done(function(date ){})の中身

ファンクションのdateには、date.jsonのデータが保存されています。date.jsonは3項目を持つ配列で、それぞれには２つのプロパティ（id、crowded）を持つオブジェクトが含まれています。各配列を１つずつ読み込むにはforeachメソッドを使用します。

data.forEach(function(item, index) {
            console.log(item);
        });

{ }内ではdataパラメーターの項目を読み取ってitemに代入します。つまり、下の３つの項目が読み取られ、それぞれ出力されます。

　　{"id":"js","crowded":"yes"},
    {"id":"security","crowded":"no"},
    {"id":"aiux","crowded":"no"}

dataの中身によって表示を変える

それではいよいよ本題です。console.logを外して、crawdedの値がyesならば、idNameという定数に値が代入されます。もし、yesなら、# + item.idつまり、#jsの値が代入される形となります（id=”jsということですね）。

続いて、.findではidがjsを持つ要素の中から、checkクラスを持つ要素探し出します。

addClassではClassを加えることができ、crowdedのクラスを加えます。つまり、checkとcrowdedどちらのクラスも持つこととなります。

<ul class="list">
        <li class="seminar" id="js">
            <p class="check">JavaScript</p>
        </li>
        <li class="seminar" id="security">
            <p class="check">Security</p>
        </li>
        <li class="seminar" id="aiux">
            <p class="check">aiux</p>
        </li>
    </ul>

.crawded{
  color:red;
}

$(document).ready(function() {
    $.ajax({url: 'data.json', dataType: 'json'})
    .done(function(data) {
        data.forEach(function(item, index) {
            if(item.crowded === 'yes') {
                const idName = '#' + item.id;
                $(idName).find('.check').addClass('crowded');
            }
        });
    })
    .fail(function(){
        window.alert('読み込みエラー');
    });

ＣＳＳで.crawded{ color:red}などと指定しておけば、dataファイルの中身によってwebを変更することが可能となります。