Web制作の現場で使えるjQuery　UIデザイン入門 ― 第10回

jQueryでAjaxを利用する基本チュートリアル

2009年09月11日 17時00分更新

文● 西畑一馬／to-R

load()で外部のHTMLを取得／表示する

　先ほどは外部のテキストファイルの内容を取得・表示する方法を紹介しましたが、外部のHTMLファイルの内容を取得・表示したい場合も、同じくload()を使います。

　たとえば次のようなHTMLファイルの内容を取得したいとしましょう。

▼サンプル02で取得するHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>sample2</title>
    </head>
    <body>
        <p>変更後</p>
    </body>
</html>

　単純にload()に「sample2_load.html」を指定すると、セレクターで指定したp要素の内側が、sample2_load.htmlの冒頭にある「<!DOCTYPE..」から、末尾の「</html>」までですべて置き換えられてしまいます。


$("p").load("./sample2_load.html");

　これでは困るので、HTMLの場合は、ファイル名（URL）の後ろにCSSセレクターを追加することで読み込みたい場所を絞り込めます。以下の例では、sample2_load.htmlの中のp要素だけを読み込みます。


$("p").load("./sample2_load.html p");

　ただし、上記のコードの場合、元のHTMLのp要素の中身をsample2_load.htmlのp要素に置き換えることになるため、実行すると以下のようにp要素が入れ子になってしまいます。


<p><p>変更後</p></p>

　そこで、次のようにp要素をdiv要素で包み、jQueryのセレクターでは外側のdiv要素を指定します。これなら意図どおり、sample2_load.htmlのp要素を読み込めます。


<div><p>変更前</p></div>


$("div").load("./sample2_load.html p");

▼サンプル02（HTML＋スクリプト部分）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>sample2</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
$(function(){
    $("button").click(function(){
        $("div").load("./sample2_load.html p");
    })
})
        </script>
    </head>
    <body>
        <button>変更</button>
        <div><p>変更前</p></div>
    </body>
</html>