技術ブログ

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

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

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

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

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

説明を箇条書きにて。

・初期画面では、[画像][タイトル][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に書き換えられている！

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