jQueryのajax()について
ajaxとは？
AsynchronousJAvascriptXmlの頭文字。
非同期のjavascriptによる(XMLを用いた)通信。
もう少し具体的にいうと、javascriptという言語で記述したプログラムによって、通常の通信と同期せずに(非同期に)、データの通信をする事。
昔はXMLという形式での通信が多く使われていたそうだが、現在はjson形式が多い。
jsonはrubyでいうハッシュのようなもので、キーとバリューでデータを管理している。とてもシンプルな形であり、他の言語への変換もしやすく、基本的な値のやりとりだけであればjsonで行うのが簡単。
書き方の基本
以下は基本的な書き方の例。
$.ajax({
url: 'https//....' //送信したい先のurl
type: 'POST', //HTTPメソッドの指定
data: {
id: 1 //送信したいデータ
}
dataType: 'json' //送信するデータの形式
})
.done(function( data ){
//通信に成功した時の処理
})
.fail(function( data ){
//通信に失敗した時の処理
})
.always(function( data ){
//必ず行いたい処理
})
以下は全体に共通する基本的な事項。
- 「:」の右辺に記述する文字が文字列の場合、''または""でくくる。数値や変数、真偽値はそのままで良い。
- オプションが下に続く場合は、各オプションの末尾に , をつける。一番最後は不要。
よく使うオプション
- HTTPメソッドの指定
HTTPのリクエストメソッド(GET/POST)を指定するには、type オプションを指定する。
$.ajax({
type: 'POST',
... - 送信先の指定
送信先のurl指定には url オプションを指定する。
$.ajax({
url: 'https://...',
... - 受け渡すデータの指定
data オプションにキーとバリューの形で指定してあげる。
$.ajax({
GETならクエリパラメータ(http://hoge/hoge.com?id=1&message=hi のようにurlにくっついた形)として、
data: {
id: 1,
message: 'hello'
},
....
POSTならbodyに格納されて、データが送信される。 - 受信データタイプの指定
受信データタイプは dataTypeオプションに設定する。
jsonデータを受信する場合は以下のようになる。
結果の受信
「done」「fail」「always」で結果を受信することができる。
「done」オプションは通信が成功した時、
「fail」オプションは通信に失敗した時、
「always」オプションは通信が完了した時に起動される。
$.ajax({
url: 'http://...',
data: {id: 1,
message: 'hi'
},
dataType: 'html'
})
.done(function( data ){
//...
})
.fail(function( data ){
//....
})
.always(function( data ){
//....
});
この「.done」「.fail」「.always」となっている部分の第一引数( data ) には、サーバーから返されたデータが入っている。
