デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.ajax( )サーバーからデータを取得(詳細設定が可能)

構文

サーバーからデータを取得(詳細設定が可能)返値:jqXHRオブジェクト
jQuery.ajax( object )ver1.0〜
jQuery.ajax( url [,object] )ver1.5〜

機能

jQuery.getメソッドの拡張版のようなメソッドです(実際はjQuery.ajaxメソッドから複雑な詳細設定を省き、簡単に利用できるようにしたのがjQuety.getメソッド)。ですので先にjQuery.getメソッドを理解するようにして下さい。大抵のケースではjQuery.getメソッドで充分だと思います。

jQuery.getメソッドと同じようにサーバーからデータを取得するために利用しますが、引数に設定するobjectオブジェクトを利用して、非常に詳細な設定をすることができます(解説を参照して下さい)。通信はせず、詳細設定だけをしたい場合はjQuery.ajaxSetupメソッドを利用して下さい(通信設定のデフォルト値が変更されるため、以降の全ての通信に設定が適用されます)。

v1.5からは第1引数にurlを設定することができるようになりました。urlの設定はobjectオブジェクトでも可能でしたが、すべての通信に必須な項目なので設定しやすいように変更されたのだと思います。

jQuery.ajaxメソッドはphpなどサーバーサイドのプログラムと連携することが可能です。しかし私がサーバーサイドの知識を持っていないため、サーバーサイドとの連携に関する説明はしていません

解説

引数にobjectオブジェクトを設定する

jQuery.ajaxメソッドは非常に詳細な設定が可能ですが、まずは最小限の設定で機能を確認します。最小限の設定は、データのurlと通信が成功した時に実行する処理の設定です。

サンプル(ajax/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとjQuery.ajaxメソッドを利用してサーバーからデータを取得します。

$("button").click(function(){
	$.ajax(ajaxObj);
});

引数に設定したajaxObjはobjectオブジェクトで以下の様に設定されています。urlプロパティはデータの取得先を設定します。successプロパティには通信が成功したら実行したい処理をfunctionで設定します。設定するfunctionは引数を受け取ることができます(successプロパティの詳細)。引数の内容はajaxSuccessメソッドとは異なるので注意してください。

このサンプルでは受信したデータ(myData)をhtmlメソッドを利用してdiv要素内に表示し、通信の状態(myStatus)をappendメソッドを利用してbody要素内に追加します。

var ajaxObj = new Object();
ajaxObj.url = "../data/simple.txt";
ajaxObj.success = function (myData, myStatus){
	$("div").html(myData);
	$("body").append("myStatus = " + myStatus);
};

結果としてbuttonをクリックするとdiv要素内に受信したデータが表示され、div要素の下に受信の状態が表示されます。jQuery.getメソッドと異なり、すべての設定をobjectオブジェクトでするのが特徴です。

引数に直接objectオブジェクトを作成することも可能です。→サンプル(ajax/01b.html

$.ajax({
	url:"../data/simple.txt",
	success:function (myData, myStatus){
		$("div").html(myData);
		$("body").append("myStatus = " + myStatus);
	}
});

v1.5からの構文を利用する

サーバーからデータを取得するためにはデータのurlを指定することが必須となります。なのでurlが設定しやすいようにv1.5から第1引数にurlを指定できるようになりました。それ以外の設定はこれまで通りobujectオブジェクトで行います。

サンプル(ajax/02.html)を開いてbody内の構成がajax/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にjQuery.getメソッドの第1引数にurlを設定している点だけです。

$("button").click(function(){
	$.ajax("../data/simple.txt", ajaxObj);
});

第1引数でurlを設定しているので、以下の様にobjectオブジェクトでurlを設定する必要はなくなります。

var ajaxObj = new Object();
ajaxObj.success = function (myData, myStatus){
	$("div").html(myData);
	$("body").append("myStatus = " + myStatus);
};

結果として、buttonをクリックするとajax/01.htmlと全く同じように動作します。

設定可能なプロパティの紹介

ここまで紹介してきた最小設定であれば、jQuery.getメソッドで十分です。jQuery.ajaxメソッドを利用するメリットは非常にたくさんの設定が可能な点です。この項ではobjectオブジェクトに設定することができるプロパティを紹介します(私がサーバーサイドの知識を持っていないため説明が不十分な部分があるかもしれません)。

幾つかのプロパティはjQuery.ajaxSetupメソッドでサンプルを紹介しています。

accepts設定する値:objectオブジェクト
デフォルト:データのタイプに依存
データタイプ(html,xml,jsonなど)ごとに受け入れるファイル形式を指定するのだと思う。例えばhtmlであれば.html以外にも.txtも受け入れるようにしたりなど。
async設定する値:true/false
デフォルト:true
非同期通信するかどうかを指定します。falseを設定して同期通信にすると、通信中はブラウザがロックされ他の処理を受け付けなくなります。クロスドメインとjsonpは同期通信を利用できません。v1.8以降ではjqXHR ($.Deferred) でasyncをfalseに設定するのは廃止されます。complete/success/errorのコールバックを利用して下さい。
beforeSend(jqXHR, settings)設定する値:function
デフォルト:true
通信する前に実行するfunctionを設定します(ヘッダの調整などに利用するそうです)。function内で「return false」すると送信を中止できます。v1.5以降は要求のタイプに関係なく呼び出されます。
cache設定する値:true/false
デフォルト:true(データタイプがscriptとjsonの場合はfalse)
ブラウザによるキャッシュを有効にするかどうかを設定します。
complete(jqXHR, textStatus)設定する値:function又は配列
デフォルト:なし
通信完了時に実行するfunctionを設定します。引数で渡される「textStatus」は「success/notmodified/error/timeout/abort or parsererror」の5種類となっています。v1.5以降では値に複数のfunctionを含む配列を設定できるようになりました。
contents設定する値:objectオブジェクト
デフォルト:なし
コンテンツタイプに応じて、どのようにパースするかを指定する文字列/正規表現のペアを設定します。
contentType設定する値:文字
デフォルト:application/x-www-form-urlencoded; charset=UTF-8
送信データのコンテンツタイプを設定します。
context設定する値:objectオブジェクト
デフォルト:なし
ajaxのイベント(completeなど)に設定するfunction内で利用する「this」の値を設定します。
converters設定する値:objectオブジェクト
デフォルト: {"* text":window.String, "text html":true, "text json":jQuery.parseJSON, "text xml":jQuery.parseXML}
データタイプごとのコンバーターを設定します。jsonならjQuery.parseJSON、xmlならjQuery.parseXMLなど。
crossDomain設定する値:true/false
デフォルト:同じドメインはfalse、異なるドメインはtrue
同じドメインにもかかわらず強制的にクロスドメインでリクエストしたい場合にtrueにします。他のドメインにリダイレクトする時などに利用するようです。
data設定する値:objectオブジェクト又は文字
デフォルト:なし
サーバーに渡したいデータを設定します。値が配列の場合は同じ変数名でシリアライズする必要があります。
dataFilter(data, type)設定する値:function
デフォルト:なし
サーバから受信したデータをフィルタリングします。有害なデータが含まれていたら対処(サニタイズ)したいときに利用するようです。引数のdataはサーバーから受信したデータ。typeはデータの形式です。
dataType設定する値:文字
デフォルト:xml,json,script,htmlの中から賢く選択
サーバから受け取るであろうデータの形式を設定します。設定しなくても自動判別してくれます。v1.5からは半角スペースを挟んで複数のタイプを設定できます。
error(jqXHR, textStatus, errorThrown)設定する値:function
デフォルト:なし
通信が失敗した時に実行するfunctionを設定します。textStatusには失敗した原因(timeout/error/abort/parsererror)がわたされます。errorThrownには「Not Found」や「Internal Server Error」のようなHTTPステータスが渡されます。v1.5以降では値に複数のfunctionを含む配列を設定できるようになりました。
global設定する値:true/false
デフォルト:true
グローバルイベントハンドラを実行するかどうかを設定できます(trueで実行可能)。
headers設定する値:objectオブジェクト
デフォルト:空のobjectオブジェクト
追加のヘッダ情報を設定します。beforeSendイベントが発生する前に設定されるので、設定した内容をbeforeSendのfunctionで利用できます。
ifModified設定する値:true/false
デフォルト:false
受信するデータが更新されている場合のみ、受信するようにするかどうかの設定。デフォルトはfalseで更新に関わらず受信します。
isLocal設定する値:true/false
デフォルト:現在のロケーション・プロトコルに依存
trueに設定するとサーバー上でもローカルと認識するように設定できます。
jsonp設定する値:文字
デフォルト:なし
JSONPリクエスト内のコールバック関数名をオーバーライドします。よく分からないので直訳..。
jsonpCallback設定する値:文字またはfunction
デフォルト:なし
JSONPの要求のためのコールバック関数名を指定します。よく分からないので直訳..。
mimeType設定する値:文字
デフォルト:なし
XHRのMIMEタイプをオーバーライドするMIMEタイプ。よく分からないので直訳..。
password設定する値:文字
デフォルト:なし
HTTPアクセスに認証が必要な場合は、このプロパティでパスワードを設定します。
processData設定する値:true/false
デフォルト:true
送信するデータをシリアライズするか否かを設定します。falseを設定するとシリアライズせずにそのまま送ります。
scriptCharset設定する値:文字
デフォルト:なし
get方式でデータタイプが「jsonp」か「script」の場合のみ、特定の文字コードに設定します。リモートとローカルが異なる文字コードの時に利用するようです。
statusCode設定する値:objectオブジェクト
デフォルト:空のobjectオブジェクト
特定のステータスコードの時に実行する処理を設定します。
success(data, textStatus, jqXHR)設定する値:function
デフォルト:なし
通信が成功した時に実行するfunctionを設定します。dataは受信したデータが渡されます。textStatusにはステータスが渡されます。v1.5以降では値に複数のfunctionを含む配列を設定できるようになりました。
timeout設定する値:数値
デフォルト:なし
タイムアウトの時間(ミリ秒)を設定します。fireFoxのv3以降でscriptやjsonpをリクエストした場合はタイムアウトによって処理がキャンセルされません。
traditional設定する値:true/false
デフォルト:false
古い形式でシリアライズするかを設定できます。古いシリアライズについてはjQuery.paramメソッドを参照してください。
type設定する値:string
デフォルト:getメソッド
送信形式(getメソッド/postメソッド)を設定します。
url設定する値:文字
デフォルト:現在のページのurl
リクエストの送信先のurlを設定します。
username設定する値:文字
デフォルト:なし
HTTPアクセスに認証が必要な場合は、このプロパティでユーザーネームを設定します。
xhr設定する値:function
デフォルト:ActiveXObjectが使える時は使う、使えない時はXMLHttpRequest
xhrオブジェクトを生成するfunctionを設定します。よく分からないので直訳..。
xhrFields設定する値:objectオブジェクト
デフォルト:なし
objectオブジェクト(fieldName:fieldValue)をネイティブXHRオブジェクトに設定します。よく分からないので直訳..。たぶんjavaScriptの通信に関するプロパティを設定するのだと思う。

jQuery.ajaxメソッドは以上のように非常に詳細な設定ができますが、大抵はjQuery.getメソッドloadメソッドで十分でしょう。より詳細な設定が必要な時のみjQuery.ajaxメソッドを利用しましょう。

関連項目

通信は行わず、以降に実行する通信の設定だけを行いたい場合はjQuery.ajaxSetupメソッドを利用します。
シンプルに通信を行いたい場合は簡易メソッドのメソッドを利用します。