2009年8月2日日曜日

5分で理解する!jQueryで簡単AJAX

jQueryを覚えたてでAJAXをやってみようとする時、マニュアル に色々メソッドあってどれを使っていいのか分からない!というのが最初のハードルだったりします。

jQueryでAJAXをする時は、原則 jQuery.ajax のみ使用すればOK!というのが個人的な印象です。

jQuery.getJSON や jQuery.post は結局のところjQuery.ajaxのショートカットメソッドです。
ajaxCompleteやajaxErrorなどのAjax Eventsも、利用できるシーンは以外と限られてるのではないかと思っています。(使いこなせば便利ですが)

とにかく、jQuery.ajax の使い方さえ覚えてしまえばやりたいことのほとんどは達成できるはずです。

jQuery.ajax({key: value});

jQuery.ajaxはAJAXといっても全然難しいことはなく、単純にkey-valueペアのオブジェクトを引数に渡すだけです。

で、その引数ですが、マニュアル にはだーっと並んでいてどれを使っていよいのかよく分かりません。

ここでは思い切って、これだけ知っとけば80%大丈夫!(たぶん) というオプションを紹介します。


url
リクエスト先のURLです。これがなければはじまりません。
基本ですが、AJAXの場合は今開いているページと同じドメインしか指定できません。

data
リクエストURLに付加するクエリストリングです。 '&foo=bar1&foo=bar2'
key-valueペアのオブジェクトを指定することも可能です。
data: {
foo1: 'bar1',
foo2: 'bar2'
}

dataType
サーバーから受け取るデータの種類です。
xml, script, json, jsonp, text
以上5つが指定可能です。 jsonhtml を指定することが多いのではないでしょうか。

success
リクエストが成功した場合のコールバック関数です。
引数の型はdataTypeによって変わります。
success: function (obj) {
console.log(obj);

// dataTypeが'html'の場合はHTMLの文字列になります。
// <p>foo</p>
// dataTypeが'json'の場合はkey-valueペアのオブジェクトになります。
// {foo1: 'bar1', foo2: 'bar2'}
}

当たり前ですが、htmlにしろjsonにしろ、サーバー上にそれを返すスクリプトを置いておく必要がありますのでお忘れなく。

error
リクエストが失敗した場合のコールバック関数です。
error: function () {
alert('error!');
}



基本となるコードは下のようになります。
$.ajax({
url: 'ajax.php',
data: {
foo1: 'bar1',
foo2: 'bar2'
},
dataType: 'json',
success: function (obj) {
console.log(obj);
},
error: function () {
alert('error!');
}
});

リンクをクリックした時にAJAXでリクエストを送信する場合の例はこちら
<a href="#" id="id_of_link">LINK</a>

<script type="text/javascript">
$('#id_of_link').click(function (e) {
e.preventDefault();
$.ajax(...);
});
</script>


jQueryでJSONPをやるのはちょいとばかし毛色が違います。
詳しくは下記の記事をごらんください。

jQueryでJSONP
http://blog.mudaimemo.com/2008/09/jqueryjsonp.html


ファイルのアップロードをAJAXでやりたい場合はこちらの記事をどうぞ

Ajax + jQueryで超簡単にファイルをアップロードするためのメモ
http://blog.mudaimemo.com/2009/05/ajaxfileuploadajaxjquery.html

0 件のコメント: