2011年6月17日金曜日

jQueryでAjax

「DroidgapでWebアプリをAndroidアプリに変換してみる 」で書いたJavascriptがjQueryらしくなかったので書き直す。jQuery.ajax()を使えば非同期HTTPリクエストを行えたんね。ajax使うように書き直すと、こんな感じ。
function a() {
    var appid = '<ヤフーアプリケーションID>';
    var query = $("#query").val();
    $.ajax({
        dataType: "jsonp",
        data: {
            "appid": appid,
            "query": query
        },
        url: "http://auctions.yahooapis.jp/AuctionWebService/V2/json/search",
        success: function (data) {
            $("#result_list li:gt(0)").remove();
            if (data.ResultSet["@attributes"].totalResultsReturned > 0) {
                $.each(data.ResultSet.Result.Item, function(i,item){
                    var row = $("#result_template").clone();
                    row.removeAttr("style");
                    row.appendTo("#result_list");
                    row.find("#image").attr("src", item.Image);
                    row.find("#link").attr("href", item.AuctionItemUrl);
                    row.find("#title").text(item.Title);
                    row.find("#price").text(parseInt(item.CurrentPrice) + "円");
                });
            }
        }
    });
}
前回のでは、自分でqueryをencodeURIしてやってたけど、ajaxのdataでは不要。dataにcallbackは不要でsuccessに処理を記述する。jQueryでcallbackパラメータ付けてくれてリクエストしている模様。
ラベル: ,