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

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

jQuery.get( )サーバーからデータを取得

構文

サーバーからデータを取得返値:jqXHRオブジェクト
jQuery.get( url [,object] [function] [type] )ver1.0〜
・url:読む込むデータのurl
・object:サーバに送るデータを設定。値の型はobjectオブジェクト。
・function:通信が「成功」したら実行される処理を設定。以下の引数を受け取る
 ・第1引数:取得したデータ
 ・第2引数:状態(success、error、notmodified、timeout、parsererror)
 ・第3引数:jqXHRオブジェクト
・type:予期されるデータの形式(省略してもxml,json,script,html位は判断してくれます)

機能

getメソッドはjQuery.ajaxメソッドを簡単に利用できるようにしたメソッドです。

loadメソッドはセレクタで指定した要素に強制的に読み込まれたデータを表示しますが、データによっては表示せずに内部的に利用したい場合があります。そのような場合にjQuery.getメソッドを利用します。

引数に設定する内容はloadメソッドと似ていますが異なります。まずfunctionは「通信が成功」したときしか実行されません。また最後にtypeが追加されています。これは内部的にデータを利用するため、読み込む形式はhtmlとは限らないからです。とはいえデータの形式からxml, json, script, html位は自動的に判断してくれるので省略して構わないでしょう。

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

解説

データを取得する

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

読込データ(data/simple.txt)には2バイト文字(日本語)で2行のテキストデータになっています。そして1行目末には改行タグ(<br/>)が設定してあります。jQuery.getメソッドは様々なデータを扱うことができ、自動的にデータの形式を判断してくれます。simple.txtはhtmlタグがあるため「html」データとして読み込まれます。

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

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

$("button").click(function(){
	$.get("../data/simple.txt", getFunc);
});

loadメソッドと異なり、読み込んだデータを要素に設定してはくれません。なのでデータを利用したい場合は、以下の様に引数にfunctionを設定します(サンプルではgetFuncを設定してます)。functionは読込が成功した時のみ実行され、失敗した場合は実行されません

$("button").click(function(){
	$.get("../data/simple.txt", getFunc);
});

getメソッドで利用できるfunctionは以下の様になっており、引数で様々な情報を受け取ります。

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

サンプルのgetFuncは以下の様に記述され、受信したデータ(myData)はhtmlメソッドを利用してdiv要素内に表示し、状態(myStatus)はappendメソッドを利用してbody要素内に追加します。

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

結果として、buttonをクリックするとdiv要素内に読み込んだデータが表示されます(htmlと判断され、改行タグ<br/>も機能します)。またdiv要素の下に状態「myStatus = success」が表示されます。

getメソッドの引数に設定したfunctionは無名関数で設定することが多いので、そのサンプルも用意しました。
→サンプル(get/01b.html

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

読み込むタイプを明示する

読み込むデータのタイプを指定したい場合はgetメソッドでfunctionの後の引数にデータ形式を設定します。
サンプル(get/02.html)を開いてbody内の構成がget/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にgetメソッドの引数にデータ形式の"html"が追加されている点だけです。

$("button").click(function(){
	$.get("../data/simple.txt", getFunc, "html");
});

結果として、サンプルget/01.htmlと同様に問題なくデータを読み込むことができます。

ついでにxmlデータを無理矢理htmlデータとして読み込むサンプルも作成しました。読み込むxmlデータは読込データ(data/simple.xml)でdataの中にnameしかないシンプルなものとなっています。

サンプル(get/03.html)では以下の様にgetメソッドの引数に「html」を設定しました。

$("button").click(function(){
	$.get("../data/simple.xml", getFunc, "html");
});

またgetFuncも以下の様に変更しています。表示するのはhtmlタグではないためtextメソッドを利用してdiv要素に表示するようにしました。

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

結果として、buttonをクリックするとxmlデータがテキストデータとしてdiv要素に表示されます。

正しく引数に「xml」と指定したサンプル(get/03b.html)も用意しました。

$("button").click(function(){
	$.get("../data/simple.xml", getFunc, "xml");
});

この場合はxmlとして読み込まれるため、buttonをクリックしてもdiv要素には[object Document]と表示されテキストとして確認することはできません。実際のデータと異なる形式を利用するのはデバッグなどで受け取ったデータをテキストとして確認する場合に便利かもしれません。

読込のエラーを検知するには

私が不思議に思うのは、loadメソッドはエラーを検知することができるのに、getメソッドは検知できない点です(第2引数に設定したfunctionは読込が成功した時にしか実行されません)。実際にエラーの時にはfunctionが実行されないか確認します。サンプル(get/04.html)を開いてbody内の構成がget/01.htmlと同じ事を確認して下さい。

jQueryは以下の様にファイル名を変更しました。このファイルは存在しないためエラーとなります。

$("button").click(function(){
	$.get("../data/test.txt", getFunc);
});

また実行するgetFuncは以下の様にシンプルにアラートを表示するだけにしました。実際にbuttonをクリックしてもアラートは表示されないため、やはり成功した時しかfunctionが実行されないことを確認できます。

function getFunc(){
	alert("error!");
};

もしgetメソッドで読込の失敗を検知したい場合はDeferredオブジェクトのfailメソッドを利用してください(failメソッドのページにサンプルがあります)。またはjQuery.ajaxErrorメソッドも利用可能です。

関連項目

特定の要素にデータを表示したい場合はloadメソッドを利用したほうが簡単です。

jQuery.getメソッドはjQuery.ajaxメソッドの機能を省き利用しやすくした簡略版のメソッドです。より詳細な設定を行いたい場合はjQuery.ajaxメソッドを利用して下さい。

メモ

jqXHRオブジェクトについて(promiseオブジェクトのメソッドを利用)

getメソッドの返値などで得られるjqXHRオブジェクトはpromiseオブジェクトを含むため、deferredオブジェクトのコールバックで紹介しているメソッドが利用できます(promiseオブジェクトなので状態を変化させるメソッドは利用できません)。

サンプル(get/test01.html)を開いてサンプルget/01.htmlと似ていることを確認してください。異なるのは以下の様にgetメソッドの返値(jqXHRオブジェクト)を変数myXHRに代入している点と、getメソッドの第2引数にfunctionを設定していない点です。

$("button").click(function(){
	myXHR = $.get("../data/simple.txt");
	myXHR.done(getFunc);
});

そしてポイントは3行目でjqXHRオブジェクト「myXHR」に対してdeferredオブジェクトのdoneメソッドを利用している点です。このメソッドは処理が完了したら、引数で指定したfunctionを実行します。

ここで設定したgetFuncはget/01.htmlと同じなので、結果としてget/01.htmlと同じ結果になります。しかし「done」というメソッド名から、処理が完了してからgetFuncを実行することが、より明示的になり分かりやすいと思います

deferredオブジェクトはメソッドチェーンが可能なので、さらに分かりやすくできます。
サンプル(get/test01b.html)では以下の様に、変数myXHRを介さずにメソッドチェーンでつなげています。

$.get("../data/simple.txt").done(getFunc);

jqXHRオブジェクトとXMLHTTPRequest

jqXHRオブジェクトはjavaScriptのXMLHTTPRequestが元になっているので、XMLHTTPRequest(wikipediaの説明)で利用できるプロパティも利用できます。

サンプル(get/test02.html)を開いて、ほとんどget/test01b.htmlと同じ事を確認してください。異なるのは読込が完了してから実行されるgetFuncです。以下の様に第3引数でjqXHRオブジェクトを受け取り、それに対してresponseTextプロパティを利用しています。

function getFunc(myData, myStatus, myXHR){
	$("div").html(myXHR.responseText);
};

responseTextはXMLHTTPRequestのプロパティですが、説明したようにjqXHRオブジェクトでも利用できるため、buttonをクリックすると受け取った情報をdiv要素内に表示することができます。

読み込んだXMLファイルはパース済です

JSONやjavaScriptの読込はjQuery.getJSONメソッドjQuery.getScriptメソッドで説明しているのですが、XMLの読込に特化されたメソッドはないので、ここでXMLデータの読込について説明します。

$.getメソッドでXMLデータを読み込んだ時のポイントとしては、読み込んだ時点でパースされXMLドキュメントになっているため、jQuery.parseXMLメソッドを利用しなくても操作できる点です。
※これはajaxメソッドのconvertersプロパティで設定されています。

サンプル(get/test03.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。まず6行目でsimple.xmlを読み込んでいます。読込が完了するとgetFuncが実行されるのですが、getFunc(1〜3行目)では読み込んだデータ「myData」に対しjQuery.isXMLDocメソッドを利用してXMLドキュメントかどうかをチェックしています。

function getFunc(myData, myStatus){
	alert($.isXMLDoc(myData));
};	
$(function () {
	$("button").click(function(){
		$.get("../data/simple.xml", getFunc);
	});
});

buttonをクリックするとアラートで「true」と表示されるため、すでにXMLドキュメントになっていることが確認できます。そのためjQueryメソッドでjQueryに変換すればjQueryの色々なメソッドで操作する事ができます。

サンプル(get/test03b.html)を開いてgetFunc内の処理外貨のように変更されているのを確認して下さい。2行目で読み込んだXMLデータをjQueryメソッドでjQueryに変換し、トラバースのfindメソッドを利用してnameタグの要素を取得し、textメソッドを利用してテキストノードを取得し、3行目でdiv要素に表示するようにしています。

function getFunc(myData, myStatus){
	var myName = $(myData).find("name").text();
	$("div").text(myName);
};

buttonをクリックするとdiv要素内に「bob」と表示され、XMLを操作できていることが確認できます。