jQuery Ajax

概要

Asynchronous JavaScript + XML
非同期通信
JavaScriptを使用し、ページ全体の再ロードを行わずにXMLデータだけをやり取りする技術

$.get(url, params, callback, type);
$.post(url, params, callback, type)
$ajax(url, options);

load()

$(~).load(url, data, complete(data, textStatus, xhr));
urlで指定したリソースをAjaxで読み込み、要素に格納
$(~).load("http://test.html");

↑urlにパラメーターを渡す
$(~).load("http://test.html", "prm1=aaa&prm2=bbb");
$(~).load("http://test.html", { prm1:"aaa", prm2:"bbb"});

↑読み込み完了後コールバック関数を指定
$(~).load("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $("#log").append("status = " + status + "<br/>");  //error等
  $("#log").append("xhr.status = " + xhr.status + "<br/>");  404等
  $("#log").append("xhr.statusText = " + xhr.statusText + "<br/>");  Not Found等
});

get()

load()と違い戻り値がない。
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

post()

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

getJSON()

dataがJSON形式で返ってくる
$.getJSON("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $.each(data, function(key, val){
    $("#log").append("Data:" + key + "=" + val + "<br/>");
  });
})

汎用

非同期通信

$(document).ready(function(){
 $('#add_cart').click(function(){

  /**
  * Ajax通信メソッド
  * @param type : HTTP通信の種類
  * @param url  : リクエスト送信先のURL
  * @param data : サーバに送信する値
  */
  $.ajax(
  {
   type: "POST", GETも可
   dataType: "json", TEXT、HTML等も可
   contentType: 'application/json', 他タイプも可
   url: "http://test.com/",
   data:
   {
    "id":5,
   },
   success: function(data)
   {
    alert(data.count);
   },
   error: function(XMLHttpRequest,textStatus,errorThrown)
   {
    alert('処理できませんでした');
   },
  });
  return false;
 });
});

同期通信

$(document).ready(function(){
  function test(){
    /**
    * Ajax通信メソッド
    * @param type : HTTP通信の種類
    * @param url  : リクエスト送信先のURL
    * @param data : サーバに送信する値
    * @param async : 非同期通信
    */
    return $.ajax(
    {
     type: "POST", GETも可
     dataType: "json", TEXT、HTML等も可
     contentType: 'application/json', 他タイプも可
     url: "http://test.com/",
     data:
     {
      "id":5,
     },
     async: false
    }).responseText;
   });
  }
  
  $('#add_cart').click(function(){
  
   var result = test();
  
   if (result != 0) {
    var ret = window.confirm('カートには同商品を登録ずみです。追加しますか?');
    if (ret) {
     return true;
    }else{
     return false;
    }
   }
  });
});

サーバ側処理

次の記事

ASP.NET MVC 流れ