つい最近、「Ajaxを利用してjsonを取得し、画面上に内容を表示する」
という実装をおこないました。

・HTMLの1部分のみをクリック等のアクションで変更させたい・・・
・画面遷移するのはやだ・・・
という要望を持った人向けです。

ゆとり自身、バックエンドの開発経験はあるものの、
HTMLだのjavascriptだのjQueryだのは初めてなので、
手探りで進めていきます。

下記のQiita記事がわかりやすいです。

つまり、サーバーからのレスポンスと、
クライアントでの動きが同期しない処理→非同期処理ってことですね。（まんま）
サーバーの処理で画面全体の更新が走らないっていうのはいいもんですね。

利点として、
・サーバーからのレスポンスを待ってクライアント側の停止が起こらないこと
　（最近は割と停止時間も減りましたけどね）
・画面がリフレッシュしないため、現在のブラウザの状態がちゃんと残ること（スクロールの位置、入力内容等）
が大きいと思います。

こんな感じに作成しました。

説明を箇条書きにて。

・初期画面では、[画像][タイトル][URL] が2セット、以下の内容で2件表示されている
    画像：いつも使ってるこれ
    タイトル：初期サンプル１、２
    URL：https://example.com/
・下の[1][2][3]をクリックすると、Google Books APIs より
　「阿刀田高」の書籍情報を検索し、2件表示する
    画像：書籍サムネイル画像
    タイトル：書籍タイトル
    URL：Google Play書籍購入画面のURL
・書籍の検索条件についてはキーワード以外なし。適当。
    [1]をクリックすると検索結果の20ブロック目表示
    [2]をクリックすると検索結果の30ブロック目表示
    [3]をクリックすると検索結果の40ブロック目表示

See the Pen KKKYNYQ by ゆとり社員は考える (@shineyutori) on CodePen.

処理の流れ・・・

HTML：
■ulタグ（class : hoge-link）内のaタグクリック時にイベントが発火します。
　→void(0) でリンクは無効化済みです。

jQueryのイベント内処理：
■json取得用URLを作成します。
　・クリックしたaタグのdata-idが、json取得のstartIndexパラメータに設定されます。
　　json取得用URLはこちら
　　https://www.googleapis.com/books/v1/volumes?q=阿刀田高&maxResults=2&startIndex={data-idの値}

■Ajax内で、jsonの取得・データの取り出し・HTMLの書き換え処理が実行されます。
　・URLでjsonを取得し、取得したデータを配列に格納
　・hogehogeクラスのHTML要素内のエレメントを空白にする
　・配列をeachでループさせ、その中で各要素に値をセット
    > htmltextという空白の変数を設定し、テキスト形式で値を設定したHTML要素を文字列で追加
    > 設定後、hogehogeクラスのHTML要素内に、htmltextに文字列で設定したHTML要素を追加

→→hogehogeクラス内のHTML初期表示が削除され、
　　jsonより作成したHTMLに書き換えられている！

・・・意外と簡単でした。

今回、JavaScript自体初めて書いたので、手探り手探りでした。
なので、「とりあえず動かしたい！」という思いでとにかく手を動かしていたので、
ブログに残そうといろいろ推敲しているうちに修正点がボロボロ出てきて、
結局記事を書くのに丸1日かかってしまいました・・・。
それにしても、jQueryもAjaxもJavaScriptも書き始めるとめちゃくちゃ楽しいですね！
なんで今まで全然書いてなかったんだろう・・・
これからもたくさん書いていこうっと・・・

今回は例として、こんな2つのセレクトボックスを作成しました。

①「地方選択」セレクトボックスと「都道府県選択」セレクトボックスがある
②「地方選択」セレクトボックスで任意の地方を選択すると、
選択した地方に対応した都道府県が「都道府県選択」セレクトボックスに設定される

↓こんな感じです。

  
    <script>
    // 各地域ごとの都道府県の配列を設定
    var hokkaido = {1:'北海道'};
    var tohoku = {2:'青森県', 3:'岩手県', 4:'宮城県', 5:'秋田県', 6:'山形県', 7:'福島県'};
    var kanto = {8:'茨城県', 9:'栃木県', 10:'群馬県', 11:'埼玉県', 12:'千葉県', 13:'東京都', 14:'神奈川県'};
    var chubu = {15:'新潟県', 16:'富山県', 17:'石川県', 18:'福井県', 19:'山梨県', 20:'長野県', 21:'岐阜県', 22:'静岡県', 23:'愛知県'};
    var kinki = {24:'三重県', 25:'滋賀県', 26:'京都府', 27:'大阪府', 28:'兵庫県', 29:'奈良県', 30:'和歌山県'};
    var chugoku = {31:'鳥取県', 32:'島根県', 33:'岡山県', 34:'広島県', 35:'山口県'};
    var shikoku = {36:'徳島県', 37:'香川県', 38:'愛媛県', 39:'高知県'};
    var kyushu = {40:'福岡県', 41:'佐賀県', 42:'長崎県', 43:'熊本県', 44:'大分県', 45:'宮崎県', 46:'鹿児島県', 47:'沖縄県'};
    // 各地域を配列にまとめる
    var areaArray = [hokkaido, tohoku, kanto, chubu, kinki, chugoku, shikoku, kyushu];

    $(function() {
      // 地域選択用セレクトボックスが切り替わったら発動
      $('#areaSelect').change(function() {
        // 一旦、都道府県選択用セレクトボックスのoptionを消去
        $('#pref > option').remove();
        //　地域選択用セレクトボックスの値を取得
        var val = $(this).val();
        // 選択したvalue値を変数に格納
        var selectedArea = areaArray[val];
        // 選択した地域の都道府県をセレクトボックスのoptionに追加
        $.each(selectedArea, function(index, value){
          $('#pref').append($('<option>').html(value).val(index));
        })
      });
    });
    </script>

  <select class="areaSelect" id="areaSelect">
    <option>地域を選択してください</option>
    <option value="0">北海道</option>
    <option value="1">東北</option>
    <option value="2">関東</option>
    <option value="3">中部</option>
    <option value="4">近畿</option>
    <option value="5">中国</option>
    <option value="6">四国</option>
    <option value="7">九州</option>
  </select>

  <select class="pref" id="pref">
  </select>
  

↓同様の実装をされている方がいました。
こんな方法もあるようです。