デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.load( )サーバーからhtmlコンテンツを取得して表示

構文

サーバーからhtmlコンテンツを取得してセレクタの要素に表示返値:jQueryオブジェクト
jQo.load( url [,object] [function] )ver1.0〜
・url:読む込むデータのurl
・object:サーバに送るデータを設定。値の型はobjectオブジェクト。
・function:通信後に実行される処理を設定。以下の引数を受け取る
 ・第1引数:取得したデータ
 ・第2引数:状態(success、error、notmodified、timeout、parsererror)
 ・第3引数:XMLHttpRequestオブジェクト

機能

jQueryオブジェクトで指定した要素にサーバーから受信した情報を「html」コンテンツとして読み込みます
第2引数にobjectオブジェクトを設定することで、サーバーにデータを送信することができます。
第3引数にfunctionを設定することで、読込が完了したら処理を実行することができます。このfunctionは引数として色々な情報を受け取ることができます。

loadメソッドはphpなどサーバーサイドのプログラムと連携することが可能だと思います(例えば「第2引数のobjectオブジェクトで渡したデータによって、返されるデータが変更される」など)。 しかし私がサーバーサイドの知識を持っていないため、サーバーサイドとの連携に関する説明はしていません

第2引数で渡すデータがobjectオブジェクトの場合はpost形式で送信され、それ以外の場合はget形式で送信されます。

解説

htmlコンテンツを取得する

まずは読み込むデータを確認します。読み込むデータの文字コードは「UTF-8」にしなければなりません。ブラウザで開いた際に文字化けした時は、文字コードを変更して確認して下さい。

読込データ(data/simple.txt)には2バイト文字(日本語)で2行のテキストデータになっています。そして1行目末には改行タグ(<br/>)が設定してあります。loadメソッドは読み込んだデータをhtmlコンテンツとして扱うので、このようなタグが利用できるのです。

サーバ上に配置した<br/>
シンプルなテキストデータです

サンプル(load/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとloadメソッドを利用して、セレクタで指定したdiv要素に読込データ(data/simple.txt)をhtmlコンテンツとして読み込みます。

$("button").click(function(){
	$("div").load("../data/simple.txt");
});

結果として、buttonをクリックするとdiv要素内に読み込んだデータが表示されます。htmlコンテンツとして表示するので改行タグ(<br/>)も機能します。

通信が成功したか否かをチェックする

引数に設定するfunctionを利用すると、データの読込の失敗などをチェックすることができます。functionでは以下の様に3つの引数が渡されます。第1引数の「受信データ」は読み込まれた内容になります。第2引数の「状態」は読込に成功すれば「success」、失敗すれば「error」、以前読み込んだ時から更新されていなければ「notmodified」、タイムアウトで「timeout」、パースに失敗すると「parsererror」が送られてきます。

loadの第3引数に設定するFunctionの構文
function 任意の名前(受信データ, 状態, XMLHttpRequest){
 読込が完了したら実行したい処理
}

サンプル(load/02.html)を開いてbody内の構成がload/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、以下の様にloadメソッドの引数にfunction「loadFunc」が追加されています。

$("button").click(function(){
	$("div").load("../data/simple.txt", loadFunc);
});

loadFuncは以下の様になっており、2つの引数(myData, myStatus)を受け取っています。myDataに渡されるデータは読み込まれる「data/simple.txt」の内容と同じなので、ここでは利用しません。利用するのはmyStatusの値で、appendメソッドを利用してbody内に表示します。

function loadFunc(myData, myStatus){
	$("body").append("myStatus = " + myStatus);
};

結果としてbuttonをクリックすると読込に成功し、div要素の下に「myStatus = success」と表示されます。

読込に失敗した例も紹介します。サンプル(load/02b.html)を開いてloadメソッドのurlが以下の様に変更されているのを確認して下さい。サーバー上に「no.txt」というデータは存在しないので、読込に失敗します。

$("button").click(function(){
	$("div").load("../data/no.txt", loadFunc);
});

buttonをクリックすると、div要素の下に「myStatus = error」と表示されることを確認して下さい。

ここまでのサンプルは分かりやすい様に、functionを作成してからloadメソッドに設定しました。しかしloadメソッドの引数に無名関数として設定することのほうが一般的なので、最後に紹介しておきます。
→サンプル(load/03.html

$("button").click(function(){
	$("div").load("../data/simple.txt", function (myData, myStatus){
		$("body").append("myStatus = " + myStatus);
	});
});

関連項目

loadメソッドは強制的にjQueryオブジェクトで指定した要素にデータが表示されます。読み込んだデータを表示しないで内部的に利用したい場合はjQuery.getメソッドを利用してください。

イベントにも同じ綴りでloadメソッドがありますが、全く異なるメソッドです。構文が異なるので混同しないと思いますが注意しましょう。

メモ

特定の部分を抜き出して読み込む

laodメソッドは読み込むデータの一部だけを読み込むことができます。読込データ(data/simple2.txt)を開いて、以下の様にid属性がtestと設定されたspan要素が追加されていることを確認して下さい。

サーバ上に配置した<br/>
シンプルなテキストデータです<br/>
<span id="test">このテキストはid属性がtestのspan要素に囲まれています。</span>

続いてサンプル(load/test01.html)のjQueryで以下の部分を確認して下さい。引数のurl内で読み込むデータのファイル名の後に「半角スペースを挟んで」読み込みたいセレクタ(ここではid属性がtest)を記述しています。

$("button").click(function(){
	$("div").load("../data/simple2.txt #test");
});

こうすることで特定の部分だけを読み込むことができます。実際にbuttonをクリックするとid属性がtestの部分しか読み込まれません。

XMLの苦手な方に良いかも

上記のテクニックを利用すれば、1つの外部データから簡単に好きな情報を読み込むことができます。まずは読み込むデータを確認して下さい。読込データ(load/test.txt)には以下の様に3つのspan要素があり、それぞれid属性にage,name,addressが設定されています。

<span id="age">18</span>
<span id="name">太郎</span>
<span id="address">東京</span>

続いて読み込むサンプル(load/test02.html)を開いてbody内の構成を確認して下さい。buttonが3つあり、それぞれにidが設定されています。読み込むデータのid名と対応させているのがポイントです。

<button id="age">年齢</button>
<button id="name">名前</button>
<button id="address">住所</button>

続いてjQueryが以下の様に記述されている事を確認して下さい。ポイントは2行目でクリックされた要素のid(this.id)を足している部分です。これでボタンのidに応じたデータを読み込むことができます。
その前にある半角スペースと#も忘れないで下さい。

$("button").click(function(){
	$("div").load("test.txt #" + this.id);
});

結果として、年齢のbuttonをクリックすれば18と表示され、名前のbuttonをクリックすれば太郎と表示されます。xmlよりも簡単に扱えるので、xmlになじみのない方でも利用できるのではないでしょうか?