ajaxなボタンでDOMな仕組みをjQueryした

こんにちは
かねしろ@pinkrootです。

今日はボタンをクリックするとリロード(再読み込み)無しで画面内の数値を書き換える処理を書きました。
ajaxな動きです。
DOMとか言うらしいですが、よく分からないです。
唯一分かるのはjQueryを使っていることくらい。
なので、このようなエントリタイトルになってます(笑)

ぐぐってみるとDOMとはこんな感じらしいです。
wikipedia – Document Object Model
読んだけど曖昧な理解。。。
ここ読みこめば理解できるそうなので、後ほど取り組みます。

とりあえず使い方だけ備忘録。

HowTo

自分で作成するファイルは以下の2つ。

• ユーザが閲覧してボタンを押す画面(index.html)
• ボタンが押されたら呼び出されるjavascriptファイル(myFunc.js)

上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となります。
ここから1.7.2のMinifiedをダウンロードして使いました。
ダウンロードしてきたjquery-1.7.2.min.jsと自作のpost.jsはjsディレクトリを作成し、その中にまとめて置きました。

.ProjectDirectory
  index.html
  .js
    jquery-1.7.2.min.js
    myFunc.js
というようなディレクトリ構成。

index.html

index.htmlのコードは以下の通り。

ボタンがクリックされると、ajaxな仕組みのための関数(addFunc)が呼び出されます。
今回は引数としてボタンのナンバーを渡してあります。
この引数の意味や使い方についてはmyFunc.jsの説明時にしっかりと行いますね。

なお、このajaxな仕組みについてはPHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみたの方で詳しく説明してあります。
上記の記事を読むことで、以下のjsの動作についても理解が深まるはずです。

myFunc.js

myFunc.jsのコードは以下の通り。

まず、ajaxな動作なのでaddFuncの$.post()が動き出します。
第一引数の部分は値をPOSTする先のファイルなのですが、今回は特に値を何かに格納する必要はないので、空にしてみました。第二引数は渡す値なのですが、こっちも空で。
# 何かに渡すケースについては、こちらの記事を読むと参考になるはずです。

さて、$.postが動き出すと、その中にあるfunction(json)が働き始めます。
この中では、まず変更する値を特定するため、elmという変数を定義します。
受け取ったidを#buttonという文字列にくっつけるため、#button1か#button2かが判定できます。
そのあとにあるのが、numというクラスです。
これはHTMLを見てもらえば分かりやすいと思いますが、idがbutton1(もしくはbutton2)のtrに対して、子要素であるtdの中にあるnumクラスを指定している、という形になっています。
ここまでで、書き換えを行う値の場所を特定したことになります。

次の行

では、先ほど指定した箇所(elmに格納したnumの場所)に、「現状で書かれている文字列(数字)」を取得するという処理が行われます。
初期状態では0が入っているので0がcountに代入されますし、加算後であればその数値が格納されることとなります。

elm.fadeOutでは、elmで指定した箇所をフェードアウト(徐々に消える)して、その中のfunctionを呼び出します。
中のfunctionでは、countを＋1したものをelmの場所に表示し、それをフェードイン(徐々に現れる)で表示して、処理終了です。
先程はelm.text()で現状の文字列を取得しましたが、textのカッコの中に表示したい文字列を突っ込むと、それがサイト上で閲覧できる状態になるわけです。

なお、各ソースはgithubにアップしてあります。
git@github.com:pinkroot/ajax-dom-sample.git

挙動

ページにアクセスすると以下の様なボタンと、数値が見えます。

このボタンのうち、どちらかをクリックすると、ページのリロード無しでボタン横の数値が加算されて再表示されます。
このとき、一度フェードアウトで数値が消え、その後にフェードインで加算された数値が表示されるような挙動となります。

ボタンを押すたび数値が増えるよ！

この仕組みさえ使えておけば、いろいろな状態で役立てそうですね(`・ω・)