LoginSignup
30

More than 5 years have passed since last update.

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

Posted at

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

使うものは、

  • 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的な)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30