jQuery入門 | Ajaxの使用 | Ajaxメソッド $.ajax() $.get() .load()

Ajaxメソッド

$.ajax()メソッド

jQueryはAjaxに関する便利なメソッドを多数提供している。

その中でも$.ajax()メソッドは、すべてのjQuery Ajaxメソッドの中核となる統合的なメソッドである。
$.ajax()メソッドは、HTTPリクエストを作成する強力で直感的な方法を提供する。

形式

jQuery.ajax( url [, settings] ) >> バージョン1.5以上
jQuery.ajax( settings )  >> バージョン1.0以上

• url: リクエストURL。クライアントがHTTPリクエストを送るサーバーのアドレス。
• settings: key/valueペアで構成されるAjaxリクエスト設定(optional)。
  • url: リクエストURL。
  • data: リクエストと一緒にサーバーへ送るstringまたはjson。
  • success(data, textStatus, jqXHR): リクエスト成功時に実行されるcallback関数。
  • dataType: サーバーから返されるdataの形式(default: xml, json, script, text, html)。

メソッドチェーン(method chaining)

例

次の例は、$.ajax()メソッドで使用できる代表的なオプションを説明している。

$.ajax({
    url: "/rest/1/pages/245", // クライアントがHTTPリクエストを送るサーバーのURLアドレス
    data: { name: "山田太郎" },  // HTTPリクエストと一緒にサーバーへ送るデータ
    method: "GET",   // HTTPリクエストメソッド(GET、POSTなど)
    dataType: "json" // サーバーが返すデータの型
})
// HTTPリクエストが成功すると、要求したデータがdone()メソッドに渡される。
.done(function(json) {
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body");
})
// HTTPリクエストが失敗すると、エラーとステータスに関する情報がfail()メソッドに渡される。
.fail(function(xhr, status, errorThrown) {
    $("#text").html("エラーが発生しました。<br>")
    .append("エラー名: " + errorThrown + "<br>")
    .append("ステータス: " + status);
})
// 
.always(function(xhr, status) {
    $("#text").html("リクエストが完了しました!");
});

次の例は、$.ajax()メソッドの動作を示す簡単な例である。

var jqxhr = $.ajax("/rest/1/pages/245")
.done(function() {
  alert("成功");
})
.fail(function() {
  alert("失敗");
 })
.always(function() {
  alert("完了");
});
      
jqxhr.always(function() {
  alert("2回目の成功");
});

コードを実行

$.ajaxSetup()メソッド

共通の基本Ajaxリクエストを事前に設定するために使用する。

形式

jQuery.ajaxSetup( options )

• optional: デフォルトAjaxリクエストの設定値(key/value)。

例

次の例は、あらかじめ$.ajaxSetup()に基本設定を行った後、Ajaxをそれぞれ呼び出している。

$.ajaxSetup({  
  url: '/api/users',  
  global: false,   
  type: "POST"     
});  

$.ajax({  
  // url not set here; uses '/api/users'  
  data: {'name': 'Dan'}  
});

$.ajax({  
  // url not set here; uses '/api/users'  
  data: {'name': 'John'}  
}); 

$.get()メソッド

jQueryでは、Ajaxを使用してGET方式のHTTPリクエストを実装した$.get()メソッドを提供している。
このメソッドを使用すると、サーバーにGET方式のHTTPリクエストを送信できる。

形式

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

• url: リクエストURL。
• data: リクエストと一緒にサーバーへ送るstringまたはmap。
• success(data,textStatus,jqXHR): リクエスト成功時に実行されるcallback関数。
• dataType: サーバーから返されるdataの形式(default: xml,json,script,text,html)。

$.ajaxで表現

$.ajax({
  type: "GET",
  url: url,  
  data: data,  
  success: success,  
  dataType: dataType  
});  

次の例は、$.get()メソッドの動作を示す簡単な例である。

// GET方式でサーバーにHTTP Requestを送る。
$.get("/examples/media/request_ajax.php",
  { species: "猫", name: "ナビ", age: 3, }, // サーバーが必要とする情報も一緒に送る。
    function(data, status) {
      $("#text").html(data + "<br>" + status); // 受信したデータと送信成功の可否を表示する。
    }
   );
});

$.post()メソッド

jQueryでは、Ajaxを使用してPOST方式のHTTPリクエストを実装した$.post()メソッドを提供している。
このメソッドを使用すると、サーバーにPOST方式のHTTPリクエストを送信できる。

形式

$.post()メソッドの構文は次のとおりである。

$.post(URLアドレス[,データ][,コールバック関数]);

• URLアドレス: クライアントがHTTPリクエストを送るサーバーのアドレスである。
• データ: HTTPリクエストと一緒にサーバーへ送るデータを渡す。
• コールバック関数: HTTPリクエストが成功したときに実行する関数を定義する。

$.ajaxで表現

$.ajax({
  type: "POST",
  url: url,  
  data: data,  
  success: success,  
  dataType: dataType  
});  

例

次の例は、$.post()メソッドの動作を示す簡単な例である。

// POST方式でサーバーにHTTP Requestを送る。
$.post("/examples/media/request_ajax.php",
  { name: "山田太郎", grade: "A" },           // サーバーが必要とする情報も一緒に送る。
  function(data, status) {
    $("#text").html(data + "<br>" + status); // 受信したデータと送信成功の可否を表示する。
  }
);

$.getJSON()メソッド

サーバーにデータをHTTP GET方式で送信した後、サーバー側のレスポンスをJSON形式で受け取るときに使用する。

形式

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

• url: リクエストURL。
• data: リクエストと一緒にサーバーへ送るstringまたはmap。
• success(data,textStatus,jqXHR): リクエスト成功時に実行されるcallback関数。

$.ajaxで表現

$.ajax({  
  url: url,  
  dataType: 'json',  
  data: data,  
  success: callback  
});  

例

$.getJSON("example?foo=1",   
    {   
        tags: "mount rainier",   
        tagmode: "any",   
        format: "json"   
    },   
    function(data) {   
        $.each(data.items, function(i,item) {   
          $("<img/>").attr("src", item.media.m).appendTo("#images");   
          if ( i == 3 )
		      return false;   
        });   
    }); 

.load()メソッド

load()メソッドは、選択した要素から呼び出す唯一のjQuery Ajaxメソッドである。

load()メソッドはサーバーからデータを読み込んだ後、読み込んだHTMLコードを選択した要素に表示する。
また、セレクターをURLアドレスと一緒に送信すると、読み込んだHTMLコードの中でセレクターに一致する要素だけを配置する。

形式

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

• url: リクエストURL。
• data: リクエストと一緒にサーバーへ送るstringまたはmap。
• complete(responseText, textStatus, XMLHttpRequest): リクエスト完了時に実行されるcallback関数。

例

次の例は、.load()メソッドのさまざまな形式を示す簡単な例である。

// Html Contentをロード
$('#result').load('ajax/test.html');  
  
// Html Contentをロードした後にメッセージ
$('#result').load('ajax/test.html', function() {  
  alert('Load was performed.');  
});  
  
// Html Contentの#container Targetをロード
$('#result').load('ajax/test.html #container');  
  
// array parameterを渡してHtml Contentをロード
$("#objectID").load("test.asp", { 'choices[]': ["Jon", "Susan"] } );  

次の例は、.load()メソッドの動作を示す簡単な例である。

$(function() {
    $("#btnRequest").on("click", function() {
        // URLアドレスに存在するHTMLコードから<li>要素を読み込み、idが"list"である要素に配置する。
        $("#list").load("/examples.html li");
    });
});

参照

• https://api.jquery.com/jQuery.Ajax/
• https://api.jquery.com/jQuery.ajaxSetup/