ハッカーを目指す白Tのブログ

夏は白のTシャツを着ています。ラジオが好きです。(ラジオネーム: 隠れキリジダン)

jQueryのajaxについてまとめてみた

jQuery

ユーザーにとって、ストレスレスで操作性の高いWEBアプリケーションを作るのにajaxは欠かせない技術である。今日は、jQueryのajaxについてまとめてみた。

1. そもそもajaxとは？

ajaxとは、WEBブラウザに実装されているJavaScriptのHTTP通信機能使って、Webページのリロードを伴わずにサーバーとデータのやりとりを行う処理である。ajaxは、asynchronous JavaScript + XMLの略である。asynchronousは「非同期」という意味であるが、ajaxは、非同期・同期両方の処理方式に対応していて、字面とは違い特徴は画面遷移を伴わない通信手段であるということに限定される。ユーザの操作と並行して、画面遷移なしでサーバと通信を行うことで、サーバの存在を感じさせないような、動的なWebアプリケーションを実現することができる。そんなajaxには、ブラウザの互換性やコードとデザインの分離を簡単に実現するいくつかのフレームワークがある。今日は、その中から、jQueryのajaxについて説明していきたい。jQueryでは、

$.ajax();

で、簡単にajax処理を実行することができる。

2. jQueryのajaxメソッドのオプションでできること一覧

jQueryのajaxメソッドは、複雑なajax処理を実装するための様々なオプションが設けられている。オプションは、以下のようにajaxメソッドの引数にhashで渡す。

$.ajax({
  type : 'GET',
  url : '/hoge/hoge.html',
  data: 'foo',
  dataType: 'json'
});

まずは、このオプションでできることを紹介していきたい。以下、その一覧。

1. HTTPリクエストの種類を指定する

//デフォルトは、'GET'
type: 'POST'　//HTTPリクエストの種類をpostにする

PUT, PATCH,DELETE等も指定することができるが、全てのブラウザでサポートされていないため、推奨されない。

2. 送信するdataの内容を指定する

//形式は、hash、string、またはarray.
data : 'hoge'

3. 通信方式を同期通信にする

//デフォルトは、trueで、非同期通信。
async: false

そもそも同期通信とは、リクエストが送られている間、ブラウザ内で他のいかなるアクションも実行できない通信方式のことで、非同期通信とは、リクエストが送られている間も、他のアクションを実行できる通信方式のことである。

4. サーバーから期待するレスポンスのデータ形式を指定する

dataType : 'json'
//併記して複数のデータ形式を期待することも可能
dataType : 'json text'

期待するレスポンスのデータ形式の種類としては、
・html
・text
・xml
・json
・script
・jsonp
が挙げられる。
この中で、jsonpとは、クロスドメインajax通信で扱うデータ形式で、取得するjsonを引数とする関数の形を取る。

//jsonデータ
{'key' : 'value', 'key2' : 'value2'}
//jsonpデータ(jsonを引数とする関数)
getJSONP({'key' : 'value', 'key2' : 'value2'})

jsonpデータは、クロスドメインXMLHTTPRequestにおける、セキュリティーの問題を解決する。

5. ajaxリクエストを送る前のコールバックを指定する

beforeSend : function(jqXHRオブジェクト、settings) {
  実行したい処理
}

例えば、９時〜１７時の営業時間外の場合、ajaxの処理を実行しないようにするには、以下のように書ける。

// 通信前に時刻をチェックし、時間外である場合は通信を中止
beforeSend: function(xhr) {
   var d = new Date();
   if (d.getHours() < 9 || d.getHours() > 17) {
     return false;
   }
 }

return false、または、jqXHR.abort()で、リクエストを中断することができる。

6. HTTP認証が必要な通信を行う

//usernameとpasswordの指定を行う
username : 'user',
password : 'password'

7. クロスドメイン処理を行う

//デフォルトはfalse
crossDomain : true

クロスドメイン処理とは、その名の通り異なるドメイン間のXMLHTTPRequestのことである。

8. 通信結果をcacheしない

//デフォルトは、true
cache : false

キャッシュとは、一度アクセスしたサイトのデータをブラウザで一時的に保管し、次回より同じページにアクセスした際の表示を速くする仕組みである。
ajax通信において、cacheをfalseにすべき処理とは一体どのようなものであろう。

3. jQueryのajax通信後の処理

次に、ajax通信後の処理について説明していきたい。jQueryでは、主に以下の３つのコールバックを用いて、ajax通信後の処理を指定する。

1. jqXHR.done(function( data, textStatus, jqXHR ) {});
　→ajax通信成功後に呼び出される
2. jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});　　　
　→ajax通信失敗後に呼び出される
3. jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });　
　→ajax通信完了後（成功後＋失敗後）に呼び出される

ここで、jqXHRオブジェクトとは、XMLHTTPリクエストの通信の状態等の情報を持つオブジェクトのことである。
またtextStatusは、エラー情報を文字列化したものである。

以下、コールバックを使ったajax通信の例。

var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );　//通信が成功した場合、successを表示
  })
  .fail(function() {
    alert( "error" ); //通信が失敗した場合、errorを表示
  })
  .always(function() {
    alert( "complete" ); //通信が完了した場合、completeを表示
  });

4. jQueryのDeffered

最後に、非同期処理を上手く扱うためのjQueryの標準モジュールであるjQuery.Defferedについて説明する。
これを使うことで、以下の３つの側面から非同期処理を扱いやすくなる。


1.同期処理を連結する際のコールバック地獄からの開放
2.エラー処理を上手く記述できる
3.一連の非同期処理を関数化して再利用しやすくできる

jQuery.Defferedについて詳しくは、以下の記事を参照して頂きたい。

参照サイト：
jQuery.ajax() | jQuery API Documentation

以上