Ajaxとか非同期通信など。JQueryやJavascriptの話


今更感があるけれど、最近ようやくAjaxを覚えた。
Ajax無しのウェブは、画面をリロードするなりリンクを遷移しないと表示が更新されない。画面遷移のタイミングで表示を更新するサイトになる。
例えば、昔のチャットや掲示板は、リロードで内容を更新していたものである。
Ajaxを使えば、ユーザのアクションに応じて、画面の一部分だけを更新するみたいなことができる。
リロードのタイミングで、サーバサイドに戻って全体を再描画するのではなく、Javascriptからサーバーサイドのメソッドを呼んでデータを取得し、HTML要素の一部分だけを新しいデータに更新するみたいなことができる。


典型的にはonclick()なりonChange()なりにJavascriptのfunction呼び出しを指定して、そのfunctionの中でAjaxを使い、得られた返り値をdocument.getElementById()とかで指定した特定の箇所に対し$().prepend()などを使って追加していく。

Ajax

function test(){
    $.ajax({
        url: '呼びたいメソッドのurl'
        success: function(response){
            return response;
        },
        error: function(response){
            return response;
        });
}

のような構文で書かれる。urlと同じスコープに色々設定を指定できるので、type:にGETリクエストなりPOSTリクエストなりサーバーサイドへのリクエストの種類をセットし、urlで呼び出すメソッドのurlを記述し、
dataTypeに返り値のデータの型を指定するなどなど諸々調整できる。
するとこのfunctionのリクエストは画面遷移無しで走って、メソッドから返り値を返してくれる。successの中でresponseに入ってきている返り値を
うまいこと料理して、http://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9
にあるようなDOM操作の処理に渡してあげると、いちいちリロードしないで画面に更新内容が反映される。
例えばGETリクエストであれば、urlの後ろに?変数名=中身&変数名2=中身みたいなGETパラメータを指定してやれば、
メソッドにAjaxで値を渡せるので、その渡された値に基づいてサーバ側はDBへの問い合わせを行い、結果をreturnしてやる。その結果は上のサンプルコードでいうところのresponseに入ってくるので、
responseの中身をDOM操作で表示に反映してやる処理を、successの中に書くという感じである。
ただ、非同期通信なので、successに入った時点でまだ結果が返ってきておらず値が反映できない場合もある。
そんな時は、async: falseで同期通信にもできるし、

function test(){
    return $.ajax({
        type: 'GET',
        url: 'http://kitagawa.keiko'
    })
}

test().done(function(result) {
    なんか処理
}).fail(function(result) {
    なんか処理
});

のような形で非同期のまま確実に返り値を取れるようにできるらしい。
脱線するけど、下記に、JQueryプラグインの作り方が解説されている。こういうのを作ってGitHubに公開するのは楽しそうだなと思う。
https://gist.github.com/maepon/4754210