Ajaxは画面遷移なしでインタラクティブな機能を実装できるもの。有名なのがGoogleMapですが、他にもページのリロードなしでコンテンツを読み込ませたり、Webアプリには欠かせない要素です。
このページではjQueryをつかったAjaxの実装をやってみます。
jQueryでAjaxをやる方法
jQueryでコンテンツを読み込むには.load()
メソッドを使用します。このメソッドはHTMLを読み込むもので、ファイルのURLと表示位置(セレクタ)を指定するだけで簡単に使用できます。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Ajax</title>
</head>
<body>
<h1>jQuery & Ajax</h1>
<a href="insert-content1.html">Home</a>
<a href="insert-content2.html">Lists</a>
<a href="insert-content3.html">Images</a>
<div id="contents">
<!-- この中にHTMLを読み込み -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jQuery-ajax.js"></script>
</body>
</html>
insert-content1.html
<div id="insert_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum vitae, delectus illum optio iste exercitationem doloribus nihil corporis, consequatur hic necessitatibus accusantium neque eligendi! Ut magnam facere soluta. Similique, nulla.</p>
</div>
javascript
$(function(){
$('a').on('click' , function(e){
e.preventDefault(); //リンクの停止
var url = this.href; //URLをhrefからとってくる
$('#contents').load(url + '#contents');
});
});
MAMPなどでローカル環境を作り、localhost
から実行するとAjaxの効果がでます。ベースとなるHTMLのa要素からリンクURLを取得し、その情報を元にページをロードしています。
Ajaxを使うことでWebアプリに求められるようなコンテンツの切り替えを行うことができるので、使いこなせるようになっておくと便利。
ここでは.load()
でHTMLを読み込んでみましたが、メソッドはこの他にも$.post()
や$.ajax()
などがあります。