AJAX通信とUI更新
ここまででかんたんなUIの実装の方法を見てきました。とあるHTMLに対して関連するJS + CSSを定義する。というやり方を紹介してきましたが、実際のWebサイトでは、より複雑な動きを持っている事が多いです。例えば・・
- 配送画面で郵便番号を入力すると、関連する住所を自動で入力(補完)する。
- ECサイトの商品一覧画面で絞り込み条件を買えると、商品が絞り込まれる。
このサンプルでは、Searchボタンを押すと、上部のテキスト欄に入力された値を元に、 検索を行います。(TV MAZEという海外のTV番組の検索サイトの無料のAPIを利用) 例えば Batman で検索すると Batman と関連するサイトが一覧表示されます。同様に Spider man などでも結果が出てくるかと思います。
細かい実装はCodePenのそれぞれのタブ(以下のボタンの部分)を押してみると見られるので、ご興味のある方は見てみてください。

今回はJSのAjaxの部分にフォーカスしてお話したいと思います。
// 検索ボタンがクリックされたら
$("#btn-search").on("click", (e) => {
// #search(= input要素)の値を取得する。
const value = $("#search").val();
// AJAXを使って、指定のURLにリクエストを送る。
$.ajax({
url: "https://api.tvmaze.com/search/shows",
data: {
// このAPIでは "q=検索文字列" としてパラメータを渡すと検索結果が絞り込まれる。
q: value
}
}).then((result) => {
// 検索結果を取得したら、HTMLとして整形する。
const listHtml = result
.map((row) => {
const show = row.show;
/* CSSを適用する事で、左に画像。右にTV番組のタイトル・説明が並ぶレイアウトになる。 */
return `
<div class="row">
<img src="${show.image.medium}">
<div>
<h4>${show.name}</h4>
<div class="summary">${show.summary}</div>
</div>
</div>
`;
})
.join("");
// #shows(div)要素の中身を生成したHTMLで更新する。
$("#shows").html(`<div>${listHtml}</div>`);
});
});
この
$.ajax
というものが今回の要点です。これはjQueryが用意しているAJAX通信を簡単に行うための関数となります。ブラウザの標準APIでは fetch
や XMLHttpRequest(古いブラウザ向け)
というAPIを使って実現できます。 $.ajax
は以下の引数を受け取ります。- url = AJAXリクエストを送信する先のAPIサーバのURL
- data = リクエストに付与するデータ。GETリクエストの場合はURLにクエリ文字列として付与され、POSTリクエストの場合はリクエストボディに付与される。
今回のTV MAZEのAPIでは
q="検索文字列"
を渡すことで検索を行えるので、テキスト欄に入力された値を q に渡す事で、検索を行っています。$.ajax
は戻り値として Promise
を返却します。Promiseは then()
というメソッドを呼ぶことで、結果を取得出来ます。 then()
の中では第一引数に検索結果(の配列)が渡されるため、後は以前のTab(タブ)のサンプルのように、HTMLを組み立てて $("#shows").html("HTML文字列")
とすることで、画面に検索結果を表示しています。このようにAJAX通信を使う事で、従来はブラウザのリロードを伴う遷移(リンクをクリック、フォームを送信する)でしか実現できなかった操作を非同期で(画面をリロードせずに)行うことが出来るようになります。利用者(ユーザ)にとっても使い勝手の良いUIを作る事が出来るので、試してみましょう。
最終更新 3yr ago