jQueryの非同期通信($.ajax)

トップページ > Ajax > jQueryの非同期通信($.ajax)

初版2014/03/01：最終更新日2014/03/01

目次
・jQueryの非同期通信($.ajax) ・ソース

jQueryの非同期通信($.ajax)

jQueryには$.ajax関数が用意されています。以下、使い方です。
typeはデフォルトはgetなので、getの場合は省略可能です。

$.ajax({
  type:リクエストタイプ, GET/POST
  url:送信先ファイルパス, 具体的なファイル名
  data:送信する引数, 省略可能
  contentType:コンテントタイプ, application/json
  dataType:受信データ形式, json/xml/text/html/script
  success:成功時、実行される関数,
  error:失敗時、実行される関数
})

以下はJSON形式のデータを読み込む例です。
JSON形式のデータを送信する場合は、contentType:application/jsonは必須のようです。

$(function(){
    $.ajax({
    type:"get",
    url:"sample.json",
    dataType:"json",
    contentType:"application/json",
    success:successFnc,
    error:errorFnc
    });
  });
});

成功時、実行される関数の書き方は以下のように記述します。
今回は$.ajaxの外で記述する場合で、引数（今回はparam）に受信されたJSON形式のデータが渡されます。

var successFnc = function(param){
  var content = $("div#content");
  for(var i = 0;i < param.length;i++){
    content.append('<span>' + param[i].date + '</span><br>');
    content.append('<span>' + param[i].title + '</span><br>');
    content.append('<span>' + param[i].category + '</span><br>');
    content.append('<span>' + param[i].comment + '</span><br>');
  }
};

失敗時、実行される関数の書き方はは以下のように記述します。
今回は$.ajaxの外で記述する場合で、第3引数をthrowにすると文法エラーになるので、あえてthrownにしています。

var errorFnc = function(req,status,thrown){
  var content = $("div#content");
  content.text(status);
};

以下、JSON形式のデータです。JSONの記述方法です。

[
    {
        "date": "2013.09.30",
        "title": "社長からのメッセージ",
        "category": "社長",
        "comment": "体調管理に気をつけてください"
    },
    {
        "date": "2013.10.01",
        "title": "勤怠未承認",
        "category": "勤怠",
        "comment": "先月の勤怠が～～～"
    }
]

以下のボタンを押すとJSON形式のデータを非同期で読み込みます。押す度にデータが読み込まれます。

ソース

ボディ部に以下がある前提です。

<div id="loadarea"></div>
<div id="content"></div>

以下、jQueryソースです。

<script type="text/javascript">
$(function(){
var thisArea = $('#loadarea');

  thisArea.after('<button id="btn">ボタン</button>');

var thisBtn = thisArea.next('#btn');
  thisBtn.click(function(){
  
    $.ajax({
    type:"get",
    url:"sample.json",
    dataType:"json",
    contentType:"application/json",
    success:successFnc,
    error:errorFnc
    });
  });
  
    <!-- 成功時実行される関数 -->
    var successFnc = function(param){
      var content = $("div#content");
      for(var i = 0;i < param.length;i++){
        content.append('<span>' + param[i].date + '</span><br>');
        content.append('<span>' + param[i].title + '</span><br>');
        content.append('<span>' + param[i].category + '</span><br>');
        content.append('<span>' + param[i].comment + '</span><br>');
      }
    };
    <!-- 失敗時実行される関数 -->
    var errorFnc = function(req,status,thrown){
      $("span").text(status + "e");
    };
});

</script>

HOME