クリック時、非同期でHTTPリクエストを投げる方法

概要（すぐ動くもの作りたい人はすっ飛ばしていいです）

使うものは、

• JavaScript
• Ajax
• jQuery

他のやり方もたくさんありそうだけど、学習コスト最小限で実装できそうなやり方を選んだ。
jQuery使わなくても、

• XMLHTTP
• XMLHttpRequest

とかいうオブジェクトを使えばできるが、ブラウザ依存らしいのでjQueryを使うことにした。

実装すること

1.まず、jQuery使うための準備

<script src="http://code.jquery.com/jquery.js"></script>

jQuery使う準備にはやり方が2通りある。

• url叩いて持ってくる
• ファイルをダウンロードしてきてそれを読み込む

上記ソースコードは前者。

2.クリックイベント発生時、非同期でHTTPリクエストを投げる

<script>
$('.[クラス名]').click(function() {
  $.ajax({
    type: "GET",
    url: "[URL名]",
    async: true //trueなら非同期処理。falseなら同期処理。
  });
});
</script>

• [クラス名]に対応する要素をクリックしたら、function() {}の中身が実行される
• クラス名だから.。ID名なら#（cssと一緒）
• $関数の機能は4つ（引数による）
• 文字列（cssセレクタ）：マッチする要素をjQueryオブジェクトとして返す
• 文字列（html）：書いたhtmlタグの要素として構築して、jQueryオブジェクトでラップして返す
• Elementオブジェクト：渡したElementオブジェクトをjQueryオブジェクトでラップして返す
• 関数オブジェクト：DOM構築後、自動で実行（onload的な）