jQueryでAjaxをやるのって実際とても簡単なのです。
RSSリーダーやTwitterのFeed等を簡単に遅延読み込みとかできたり、ページ遷移無しに他のコンテンツをロードなど、色々できてしまいます。
load( url, data, callback )
超お手軽Ajax関数です。urlのページを表示します。また、urlの後ろにスペースを空け、続けてセレクタを書くと、その要素だけとってくることができます。
[js]
$("#loadArea").load("/hoge/ #hogehoge ul");
[/js]
で、/hoge/の
[html]
<div id="hogehoge">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
[/html]
ul以下を#loadAreaに表示します。
簡単ですよね?
jQuery.ajax()
jQueryでAjaxをやるときの親玉的存在です。
.load()のような手軽さは無いですが、色々細かい設定ができます。
[js]
$.ajax({
url: /hoge/,
context:this,
success:function(loadData){
var dataDom = $(loadData);
$(‘#hoge’, dataDom).appendTo("#loadArea");
},
error:function(){
$("#loadArea").html("エラーが発生しました");
}
});
[/js]
loadDataには、取得したテキストデータが格納されています。
また、jQuery1.5から
[js]
$.ajax({ url: "/hoge/" })
.success(function() {console.log("success");})
.error(function() {console.log("error"); })
.complete(function() {console.log("complete");});
[/js]
のような書き方ができるようになったみたいです。解りやすいですねー。
また、xmlとかもdataTypeを指定するととってこれるので、他のAPIとかとの連携も楽ちんです。
jQueryを使うとAjaxとかが、思いの外簡単にできてしまいます。これであなたも楽しいAjaxライフを満喫できること間違いなし!