jQueryでAjax 画面遷移なしでデータを読み込む方法

2014-08-20

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()などがあります。