スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

初回のテーマ:Ajaxについて

こんにちは。
このブログではコーディングの基礎知識やTipsを紹介していく予定です。
早速ですが、今回はAjaxの簡単なサンプルをご紹介したいと思います。

Ajaxはページ遷移をせずに、通信を伴ってページの一部だけを書き換える技術のことです。
JavaScriptだけでも表示を書き換えることは可能ですが、それに加えて、入力値をデータベースと照合して、その結果に応じて表示を変更したいときなどに使えます。

リンクをクリックした時、入力した login_id を取得し、(ここには書いていませんが)プログラム側でその値がデータベースに存在するかどうかチェックしています。
結果に応じて「使用されています」「未使用です」などの文字列が返ってくるようにしており、その文字列でページの一部を書き換えます。

サンプル(動きません)
 IDがご利用可能かチェックはここをクリック

他にも、掲示板のコメントフォームで投稿した時や、あるセレクトボックスを選択した時に子項目のリストを動的に取得したい場合 (国を選択したら都市のリストがセレクトで表示される) などにもよく使っています。

ちょっとした変更でいちいちページをリロードされるのは閲覧者にストレスにもなるので、効果的に使えるといいですね。
次回は関連した例として、検索ボックスでインクリメンタルサーチのためのAjaxの利用をご紹介できればと思います。

お読みいただきありがとうございました。