jqueryを使ってajaxを行う方法

ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。

.loadを使う

サンプルでnews.htmlの中の#news要素を読み込ませます。

jquery

$(function(){
	$("button").click(function(){
	$(".load").load("news.html #news");
	});
});

$("button").click(function(){

要素buttonをクリックしたときに命令が行われます。

$(".load").load("news.html #news");

セレクタで選んだ.loadの部分に
news.htmlの#newsを読み込ませて表示しています。

別ページにある部分を読み込ませたいという時にも使えますよ。

.ajaxを使う

サーバーからのリクエストやレスポンスを行うことができるメソッドです。
今回はこのホームページのRSSをサンプルで読み込んで表示させてみます。

jquery

$(function(){
	var options = {
	url:'feed.xml',
	dataType:'xml',
	success:function(data){
	$("item",data).each(function(){
	$("dl").append("<dt><a href='" + $("link",this).text() + "'>"
	+ $("title",this).text() + "</a></dt>"); 
	});
	}};
	$("button").click(function(){$.ajax(options);});
});

ajaxでは、いろいろなオプションを設定することができます。

url
読み込むurlを記述します。今回はfeed.xmlを読み込みます。

dataType
読み込むdateのタイプを指定します。今回はxml

success
読み込みが成功したときに行うことを指定します。

function(data){

xmlのデータを読みこんでいます。

$("item",data).each(function(){

xmlデータ中の<item></item>にある数だけ命令を実行します。

$("dl").append("<dt><a href='" + $("link",this).text() + "'>"
	+ $("title",this).text() + "</a></dt>"); 

htmlでdlの空要素を記述しているのですが、dl要素に対して.appendを使ってhtmlを挿入します。
$("link",this))、$("title",this)はxml中にある<item></item>内の
<link></link>、<title></title>の文字列を.text()を使って読み込んでいます。

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

最後にボタンをクリックしたときに$.ajaxに設定したoptionを読み込ませて実行させます。