【jQuery】Ajax | Webデザイナーを目指す人のブログ

今日から数回にわけてAjaxについて調べたことをまとめていきたいと思います。
そもそも私は今回のテーマであるAjaxというものを知らなかったわけなんですが、そんなド素人が噛み砕いて噛み砕いて噛み砕いて書いていきます。

Ajaxとは

まずAjaxとは一体なんなのか。
Asynchronous JavaScript + XML の略称で、
直訳すると非同期なJavaScriptとXMLとなります。
わかりやすくいうと「ページを移ること無くコンテンツを非同期に読み込んで、ページを書き換える」という意味になります。
全然わかりやすくないですね。

具体的な例で説明してみましょう。
例えば、このAjaxを広めたのは皆さんご存知Google先生。
Ajaxを利用したサイトは以前からあったようなんですが、Google先生がGmailやGoogle Map、Google suggestにAjaxを使ったことにより、世の中はAjaxすごいとなり、以前よりもたくさん使われるようになったそうなんです。

Ajaxが使われる前のGoogle Mapではマップを次の地点に移動させたいとき、
見たい場所をクリック→その場所の情報をサーバに渡す→サーバーが画像を作成→HTMLがリロードされる→表示
という過程をふむ必要がありました。

Ajaxが使われてからのGoogle Mapはリロードせずにマップをずらすだけですいすい見ることができます。
これが非同期通信なのです。

扱えるデータはhtml、xml、JSONなど様々です。
まぁJSONってなんだよって感じなんですけどね。
JSONとはJavaScript Object Notationの略で、
データを表現するための記法のことらしいです。
あぁ。ぶち当たってる。壁にぶち当たってるよ。
とりあえず、今回はJSONのことは見なかったふりをして、次に進みましょう。
JSONについてはまた改めてにします。

Ajaxを使ってみる

今回、同一サーバー上に別のhtmlファイル(other.html)があって、それをindex.htmlから読み込みたいという場合について説明していきます。
他のページから読み込む場合はloadメソッドを利用します。

$(“読み込む場所の要素”).load(“読み込むファイル”)

デモページ

<!-- index.htmlの記述 -->
<p>Ajaxを使ってみる</p>
<button>other.htmlを読み込んでid="place"に反映させる</button>
<div id="place"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function() {
			$("#place").load("other.html");
		});
	});
</script>

<!-- other.htmlの記述 -->
<p>#placeに読み込まれる</p>
<p id="red">#placeに読み込まれる</p>

無事に出来てよかった。。。

注意点

冒頭でもお伝えしていたようにAjaxは非同期通信です。
なので、other.htmlの内容をindex.htmlで書き換えるとなると注意が必要です。

先ほどの例を使って説明します。
index.htmlに読み込まれた後にid=”red”のp要素の色を赤に変更したい場合、以下の用に
$(“red”).css({“color”,”red”});を記述しても変更されません。

<!-- index.htmlの記述 -->
<p>Ajaxを使ってみる</p>
<button>other.htmlを読み込んでid="place"に反映させる</button>
<div id="place"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function() {
			$("#place").load("other.html");
			$("#red").css({"color","red"});
		});
	});
</script>

<!-- other.htmlの記述 -->
<p>#placeに読み込まれる</p>
<p id="red">#placeに読み込まれる</p>

これはother.htmlが読み込まれる前に$(“red”).css({“color”,”red”});が読み込まれてしまい、
id=”red”の要素がない状態のときに、id=”red”の要素を赤くしろ！と命令しているためです。
ないものの色を赤くすることはできません。

このように非同期通信では処理が終わる前に次の処理が始まるので、スクリプトを記述する際にも注意が必要です。

読み込んだhtmlの内容を変更する方法

ではどうすればother.htmlの内容をindex.htmlで書き換えることができるかですが、
loadメソッドに第二引数で関数を指定することで書き換えることができます。

$(“読み込む場所の要素”).load(“読み込むファイル”,function(){
//処理
};)

この第二引数の関数のことをコールバック関数と呼びます。

デモページ

<!-- index02.htmlの記述 -->
<p>Ajaxを使ってみる</p>
<button>other.htmlを読み込んでid="place"に反映させる</button>
<div id="place"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){
		$("button").click(function() {
			$("#place").load("other.html",function(){
				$("#red").css("color","red");
			});	
		});
	});
</script>

<!-- other.htmlの記述 -->
<p>#placeに読み込まれる</p>
<p id="red">#placeに読み込まれる</p>

きちんと赤くなった！！！

ということで今日はAjaxとは何かとloadメソッドについて書いていきました！
次回もAjaxについて書いていきます。
せば！