【jquery】ajax通信でjsonを取得する

サーバAPIを使用しての通信を行う場合にはajaxを使用する事が多いと思いますが、作る場合にはwebでのフロントではjqueryを使用して通信をすることが多いですよね?
jqueryを使用すれば簡単にajax通信が実装できてjsonなどのデータなどを取得出来たりするかと思います、また最近はTwitterやぐるなびなどでもWebApiが公開されておりAjaxでのデータ取得が行われたりします。
とりあえず今回は基本的な部分を取り上げてみたいと思います。

jqueryでのAjax通信

$.getや$.postを使用しての通信も可能ですが細かい設定などを使用したい場合には$.ajaxを使用する必要があります。

$.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
    success: function(data, textStatus){
      // 成功したとき
    },
    error: function(xhr, textStatus, errorThrown){
      // エラー処理
    }
});

AjaxでJavaScriptファイルの読み込みと実行

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

一応使わないと思いますがgetとpostのメソッドも書いておきます

$.getメソッド

$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

$.postメソッド

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

今回は簡単な通信方法のみでしたが、次はクロスドメインなどを取り上げたいと思います。

Follow me!