jQueryのAjax処理について

jQueryのAjax処理についての基本的な紹介です。

🎉 書き方

jQuery 1.8以降では次のように記述します。

$.ajax({
    url: "http://jsrun.it/assets/E/H/Z/t/EHZt3"
}).done(function(data) { // 成功時
    alert('success!');
}).fail(function(data) {　// 失敗時
    alert('error!');
}).always(function(data) { // 常に実行
    alert('always!');
});

defferredを使うと次のように記述できます。

var Example = {
    search: function(query) {
        var defer = $.Deferred();
        $.ajax({
            url: "http://example.com/search.json",
            method: 'POST', // GET, PUT等定義変更
            data: {
                q: query
            },
            dataType: 'jsonp',
            success: defer.resolve,
            error: defer.reject
        });
        return defer.promise();
    }
};

$('#example-button').on('click', function() {
    Example.search('search-word').done(function(data) {
        $(data.results).each(function(k, v){
           $('#result').append(v.text + '
');
        });
    });
});