jQueryのAjax関数を使ってJavaScriptで非同期通信を行う

jQueryのAjax関数を使うと、JavaScriptのAjax処理が簡潔に記述できます。この記事では、jQueryのAjax関数を使ってJavaScriptで非同期通信を行う方法をサンプルを交えて紹介します。

構文

jQuery関数には3通りの記述方法がある。それぞれ記述方法が異なるだけで、機能はどれも同じである。

window.jQuery.ajax(properties)

jQuery.ajax(properties)

$.ajax(properties)

引数

jQuery.ajaxの引数には、Ajaxリクエストを設定するキーと値のペアのセットを次の形式で指定する。

{ key: value [, key: value ...] }

keyには次の表に示すキーのいずれかを指定する。

accepts

リクエストヘッダのACCEPTを指定する。

async

リクエストを非同期で送信するかどうかを指定する。

beforesend

リクエストを送信する前に呼び出されるコールバック関数を指定する。

cache

リクエストしたページをブラウザによってキャッシュさせるかどうかを指定する。

typeがGETの場合のみ指定が有効である。

デフォルト値はtrueなので注意が必要である(同一URLへの2回目以降のAjaxリクエストは実際にリクエストを発行するのではなく、キャッシュされた結果が使われる。つまり、サーバへリクエストを送信しない)。

cache に false を指定した場合、クエリパラメータに現在時刻(ミリ秒)が付加される。

ブラウザのキャッシュはURLが一致する場合にのみ行われるので、クエリパラメータに現在時刻を付加することで前回のAjaxのキャッシュは使われない。

たとえば、下記のサンプルコードの場合、クエリ文字列は https://segakuin.com/?foo=bar&_=1434101906455 のようになる。

$.ajax({
  url: "https://segakuin.com",
  data: {
    foo: "bar"
  },
  cache: false
});

complete

リクエストが完了したときに呼び出されるコールバック関数を指定する。success又はerrorが指定されている場合、それの後に呼び出される。

contentType

データをサーバへ送信するときに使用するコンテンツタイプ(MIMEタイプ)を指定する。

context

Ajax関連のコールバックのコンテキストを指定する。

$.ajax({
  url: "example.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

conveters

データ型のコンバータを含むオブジェクトを指定する。各コンバータの値は、レスポンスを返還した値を返す関数である。

crossDomain

クロスドメインリクエストを強制するかどうかを指定する。

data

サーバへ送信する値を指定する。

dataFilter

XMLHttpRequestの生の応答データをハンドルする関数を指定する。

dataType

サーバから返されるデータの型を指定する。

xml
html
script
json
jsonp
text

dataTypeを指定しなかった場合、jQueryがレスポンスの MIME タイプを元に判断する。

error

リクエストが失敗したときに呼ばれる関数を指定する。

global

グローバルなAjaxイベントハンドラをトリガするかどうかを指定する。

headers

HTTPリクエストに追加するヘッダを指定する。

ifModified

最後のリクエストからレスポンスが偏された場合のみリクエスト成功とするかどうかを指定する。

jsonp

JSONPリクエストのコールバック関数名を指定する。

jsonpCallback

JSONPリクエストのコールバック関数名を指定する。

https://segakuin.com/foo.jsというテキストファイルの中身が次のようになっているとする。

myCallback({"bar":"baz"})

JSONPを使ってこれをクロスドメインで取得するJavaScriptは次のようになる。

$.ajax({
  url: "https://segakuin.com/foo.js",
  dataType: "jsonp",
  jsonpCallback: "myCallback",
  cache: false
}).fail({
  alert("failed");
}).done(function(data){
  alert(data.bar);
});

mimeType

XHR MIMEタイプをオーバーライドする場合に指定する。

password

HTTPアクセス認証リクエストのパスワードを指定する。

processData

デフォルトcontentTypeに合わせてデータを変換するかどうかを指定する。

dataに指定したオブジェクトをクエリ文字列に変換するかどうかを指定する。

processData	説明
true (初期値)	dataに指定したオブジェクトをクエリ文字列に変換する。
false	dataに指定したオブジェクトをクエリ文字列に変換しない。

次に示すサンプルの場合、GETのURLは https://segakuin.com/?[object%20Object] となる。

$.ajax({
  url: "https://segakuin.com",
  data: {foo:"bar",baz:"qux"},
  dataType: "json",
  processData: false
});

次に示すサンプルの場合、GETのURLは https://segakuin.com/?foo=bar&baz=qux となる。

$.ajax({
  url: "https://segakuin.com",
  data: {foo:"bar",baz:"qux"},
  dataType: "json",
  processData: true
});

オブジェクトの値が配列の場合、jQueryは同じキーを持つ複数の値にシリアライズする。たとえば次に示すサンプルの場合、URLは https://segakuin.com?foo=bar&foo=baz となる。

$.jax({
  url: "https://segakuin.com",
  data: {
    ["bar", "baz"]
  },
  processData: true
})

scriptCharset

script通信でGETの場合、文字セットを指定する。

statusCode

HTTP応答のステータスコードと、その通信ハンドラをオブジェクトで指定する。

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});

success

リクエストが成功した場合に実行されるコールバック関数を指定する。

timeout

リクエストのタイムアウトをミリ秒で指定する。

type

HTTP の送信方法として GET または POST を指定する。

type	説明
GET	HTTPのGETメソッドで送信する。
POST	HTTPのPOSTメソッドで送信する。

GETを指定した場合、リクエスト結果がキャッシュされるので注意が必要である。同一URLへの2回目以降のAjaxリクエストは、実際にリクエストを発行するのではなく、キャッシュされた結果が使われる。つまり、サーバへリクエストを送信しない。

GETメソッドのAjax通信は、デフォルトでキャッシュが使われる。たとえば、「http://example.com/foo」に通信すると、取得データがキャッシュされ、次に同じURIにAjaxで通信しようとすると、実際にサーバと通信するのではなく、キャッシュした取得データが使われる。キャッシュはリクエストパラメータを含めたURIごとに管理される。Ajaxで「http://example.com/foo?p=1」にリクエストした後、Ajaxで「http://example.com/foo?p=2」にリクエストしてもキャッシュは使われない。

POSTメソッドのAjax通信ではキャッシュは使われない。

POSTメソッドでAjax通信を行うサンプルを示す。

jQuery.ajax({
  type: "POST",
  url: "ajax.php",
  data: {
   page: 2
  }
});

url

リクエストを送信するURLを指定する。

username

HTTPアクセス認証リクエストで使用されるユーザ名を指定する。

xhr

XMLHttpRequestオブジェクトを生成するコールバック関数を指定する。

xhrFields

XHRオブジェクトに設定するフィールド名とフィールド値を含めたオブジェクトを指定する。

戻り値

jQuery.ajax()は、戻り値としてXMLHttpRequest(jqXHT)オブジェクトを返す。

jQuery XMLHttpRequest(jqXHR)オブジェクトは、JavaScriptのXMLHttpRequestオブジェクトのスーパーセットであり、jQuery.ajax()の戻り値として返される。

jQuery XMLHttpRequestオブジェクトのメソッド
メソッド	説明
done	Ajax通信に成功した際に呼び出される。
fail	Ajax通信に失敗した際に呼び出される。
always	Ajax通信が完了した際に、done()やfail()が呼ばれた後に呼び出される。
then	Ajax通信に成功した際及びAjax通信に失敗した際に呼び出される。

done()

done()は、Ajax通信に成功した際に呼び出されるメソッドである。

done(function(data, textStatus, jqXHR) { /* 処理 */ } )

Ajax通信に成功したら、ダイアログを表示するサンプルを示す。

$.ajax({
  url: "http://segkuin.com/javascript/jquery/sample.json",
  dataType: "json"
}).done(function(data, textStatus, jqXHR){
  alert(data.foo);
})

fail()

always()は、Ajax通信に失敗した際に呼び出されるメソッドである。

fail(function(jqXHR, textStatus, errorThrown) { /* 処理 */ } )

always()

always()は、Ajax通信が完了した際に、done()やfail()が呼ばれた後に呼び出されるメソッドである。

always(function(data, textStatus, jqXHR) { /* 処理 */ } )

always(function(jqXHR, textStatus, errorThrown) { /* 処理 */ } )

then()

then()は、Ajax通信に成功した際及びAjax通信に失敗した際に呼び出されるメソッドである。

then(
  function(data, textStatus, jqXHR) { /* 処理 */ },
  function(jqXHR, textStatus, errorThrown) { /* 処理 */ }
)

第1引数には、Ajax通信が成功した際に呼び出されるコールバック関数を指定する。第2引数には、Ajax通信が失敗した際に呼び出されるコールバック関するを指定する。

jQueryでAjax通信を行うサンプル

jQuery.ajax()のサンプルを次に示す。

<a href="javascript:callAjax();">ここをクリックするとAjaxを実行します。</a>

<script>
  function callAjax() {
    $.ajax({
      url: "https://segakuin.com/javascript/jquery/example.json",
      dataType: "json"
    })
    .done(function(data, textStatus, jqXHR){
      alert(data.title);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
      alert("fail ");
    });
  }
</script>

example.json の内容は次のとおり。

{
  "isbn": "0241568811",
  "title": "Charlotte's Web: 70th Anniversary Edition",
  "author": "E. B. White"
}

上記サンプルの実行結果を次に示す。

ここをクリックするとAjaxを実行します。

クロスドメイン通信

IE8 IE9

Internet Explorer 8及びInternet Explorer 9でクロスドメイン通信を行う場合は、XMLHttpRequestではなく、XDomainRequestを使用する。AjaxでXMLHttpRequestの代わりにXDomainRequestを使うには、xdr.jsプラグインを使用する。