- 索引
-
- ├ 目次
- ├ jQuery(selector)
- ├ jQuery(html)
- ├ jQuery(function)
- ├ jQuery.holdReady()
- ├ jQuery.noConflict()
- └ jQuery.sub()
- 他ページ参照
- └ jQuery.when()
-
- └ 目次
- 基礎
- ├ *(すべて)
- ├ element(html要素)
- ├ #id名(ID属性)
- ├ .class名(clas属性)
- ├ 複数のセレクタ(and)
- └ 複数のセレクタ(or)
- 階層関連
- ├ 先祖 子孫
- ├ >(子要素)
- ├ +(直近の後要素)
- └ ~(後要素)
- 属性
- ├ [属性名]
- ├ [属性名='値']
- ├ [属性名!='値']
- ├ [属性名^='値']
- ├ [属性名$='値']
- ├ [属性名*='値']
- ├ [属性名-='値']
- ├ [属性名|='値']
- └ 複数の属性
- 基本フィルタ
- ├ :root
- ├ :header
- ├ :lang()
- ├ :target
- ├ :animated
- ├ :first
- ├ :last
- ├ :even
- ├ :odd
- ├ :eq()
- ├ :gt()
- ├ :lt()
- └ :not()
- 子要素フィルタ
- ├ :first-child
- ├ :first-of-type
- ├ :last-child
- ├ :last-of-type
- ├ :only-child
- ├ :only-of-type
- ├ :nth-child()
- ├ :nth-of-type()
- ├ :nth-last-child()
- └ :nth-last-of-type()
- 可視性フィルタ
- ├
- └ :visible
- コンテンツフィルタ
- ├ :contains()
- ├ :has()
- ├ :empty
- └ :parent
- フォーム
- ├ :checked
- ├ :selected
- ├ :disabled
- ├ :enabled
- ├ :focus
- ├
- ├ :checkbox
- ├ :file
- ├ :image
- ├ :input
- ├ :password
- ├ :radio
- ├ :reset
- ├ :submit
- └ :text
-
- ├ .目次
- ├ .hasClass()
- ├ .addClass()
- ├ .removeClass()
- ├ .toggleClass()
- ├ .attr()
- ├ .removeAttr()
- ├ .prop()
- ├ .removeProp()
- └ .val()
-
- └ 目次
- ツリー(階層)
- ├ .siblings()
- ├ .next()
- ├ .nextAll()
- ├ .nextUntil()
- ├ .prev()
- ├ .prevAll()
- ├ .prevUntil()
- ├ .children()
- ├ .find()
- ├ .parent()
- ├ .parents()
- ├ .parentsUntil()
- ├ .offsetParent()
- └ .closest()
- フィルタリング
- ├ .eq()
- ├ .slice()
- ├ .first()
- ├ .last()
- ├ .filter()
- ├ .has()
- ├ .not()
- ├ .is()
- └ .map()
- その他
- ├ .add()
- ├ .andSelf()
- ├ .addBack()
- ├ .end()
- ├ .contents()
- └ .each()
-
- ├ 目次
- 要素の挿入
- ├ .after()
- ├ .before()
- ├ .append()
- ├ .prepend()
- ├ .insertAfter()
- ├ .insertBefore()
- ├ .appendTo()
- └ .prependTo()
- 要素の削除
- ├ .empty()
- └ .remove()
- ├ .detach()
- 要素を囲む
- ├ .wrap()
- ├ .wrapAll()
- └ .wrapInner()
- ├ .unwrap()
- その他
- ├ .text()
- ├ .html()
- ├ .clone()
- ├ .replaceAll()
- └ .replaceWith()
- 他ページ参照
- ├ .toggleClass()
- ├ .hasClass()
- ├ .addClass()
- ├ .removeClass()
- ├ .attr()
- ├ .removeAttr()
- ├ .prop()
- ├ .removeProp()
- ├ .val()
- ├ .css()
- ├ .offset()
- ├ .position()
- ├ .height()
- ├ .innerHeight()
- ├ .outerHeight()
- ├ .width()
- ├ .innerWidth()
- ├ .outerWidth()
- ├ .scrollLeft()
- └ .scrollTop()
-
- ├ 目次
- ├ jQuery.cssHooks
- ├ .css()
- ├ .height()
- ├ .innerHeight()
- ├ .outerHeight()
- ├ .width()
- ├ .innerWidth()
- ├ .outerWidth()
- ├ .offset()
- ├ .position()
- ├ .scrollTop()
- └ .scrollLeft()
- 他ページ参照
- ├ .addClass()
- ├ .hasClass()
- ├ .removeClass()
- └ .toggleClass()
-
- └ 目次
- マウスイベント
- ├ .click()
- ├ .dblclick()
- ├ .mousedown()
- ├ .mouseup()
- ├ .mouseover()
- ├ .mouseout()
- ├ .mouseenter()
- ├ .mouseleave()
- ├ .mousemove()
- ├ .hover()
- └ .toggle()
- キーイベント
- ├ .keydown()
- ├ .keypress()
- ├ .keyup()
- ├ .focusin()
- └ .focusout()
- フォームイベント
- ├ .focus()
- ├ .blur()
- ├ .change()
- ├ .select()
- └ .submit()
- ブラウザイベント
- ├ .resize()
- ├ .scroll()
- └ .error()
- ロードイベント
- ├ .load()
- ├ .unload()
- └ .ready()
- イベントハンドラアタッチ
- ├ .bind()
- ├ .unbind()
- ├ .live()
- ├ .die()
- ├ .delegate()
- ├ .undelegate()
- ├ .on()
- ├ .off()
- ├ .one()
- ├ .triggerHandler()
- └ .trigger()
- イベントオブジェクト
- ├ jQuery.Event
- ├ eo.type
- ├ eo.data
- ├ eo.pageX
- ├ eo.pageY
- ├ eo.timeStamp
- ├ eo.which
- ├ eo.result
- ├ eo.namespace
- ├ eo.target
- ├ eo.currentTarget
- ├ eo.delegateTarget
- ├
- ├ eo.stopPropagation()
- ├ eo.stopImmediateP...
- ├ eo.preventDefault()
- ├ eo.isPropagationSt...
- ├ eo.isImmediatePre...
- └ eo.isDefaultPreven...
-
- └ 目次
- 基礎
- ├ .hide()
- ├ .show()
- └ .toggle()
- スライド
- ├ .slideUp()
- ├ .slideDown()
- └ .slideToggle()
- フェード
- ├ .fadeOut()
- ├ .fadeIn()
- ├ .fadeTo()
- └ .fadeToggle()
- カスタム
- ├ .animate(prop)
- ├ .animate(prop,opt...
- ├ .stop()
- ├ .delay()
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ .finish()
- ├ jQuery.queue()
- ├ jQuery.dequeue()
- ├ jQuery.fx.interval
- └ jQuery.fx.off
-
- └ 目次
- 簡易メソッド
- ├ .load()
- ├ jQuery.get()
- ├ jQuery.getJSON()
- ├ jQuery.getScript()
- └ jQuery.post()
- グローバルイベントハンドラ
- ├ .ajaxComplete()
- ├ .ajaxSuccess()
- ├ .ajaxError()
- ├ .ajaxSend()
- ├ .ajaxStart()
- └ .ajaxStop()
- 低レベル・インターフェイス
- ├ jQuery.ajax()
- ├ jQuery.ajaxSetup()
- └ jQuery.ajaxPrefilt...
- お助け機能
- ├ jQuery.param()
- ├ .serialize()
- └ .serializeArray()
-
- └ 目次
- チェック
- ├ jQuery.contains()
- ├ jQuery.isArray()
- ├ jQuery.isEmptyO...
- ├ jQuery.isPlainO...
- ├ jQuery.isNumeric()
- ├ jQuery.isFunction()
- ├ jQuery.isWindow()
- └ jQuery.isXMLDoc()
- 配列/Object関連
- ├ jQuery.makeArray()
- ├ jQuery.inArray()
- ├ jQuery.grep()
- ├ jQuery.each()
- ├ jQuery.map()
- ├ jQuery.merge()
- ├ jQuery.extend()
- └ jQuery.unique()
- その他
- ├ jQuery.globalEval()
- ├ jQuery.noop()
- ├ jQuery.now()
- ├ jQuery.parseHTML()
- ├ jQuery.parseJSON
- ├ jQuery.parseXML()
- ├ jQuery.proxy()
- ├ jQuery.trim()
- ├ jQuery.type()
- ├ jQuery.support
- ├ jQuery.boxModel
- └ jQuery.browser
- 他ページ参照
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ jQuery.queue()
- ├ jQuery.dequeue()
- ├ jQuery.data()
- └ jQuery.removeData()
-
- ├ 目次
- ├ .data()
- ├ .removeData()
- ├ jQuery.data()
- ├ jQuery.removeData()
- └ jQuery.hasData()
- 他ページ参照
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ jQuery.queue()
- └ jQuery.dequeue()
-
- └ 目次
- deferredの作成
- └ jQuery.deferred()
- promiseの作成
- ├ jQuery.when()
- ├ .promise()
- └ deferred.promise()
- コールバックの設定
- ├ deferred.done()
- ├ deferred.fail()
- ├ deferred.always()
- ├ deferred.progress()
- ├ deferred.then()
- └ deferred.pipe()
- 状態の取得
- ├ deferred.state()
- ├ deferred.isReso...
- └ deferred.isReje...
- 状態の変更
- ├ deferred.resolve()
- ├ deferred.resolveW...
- ├ deferred.reject()
- ├ deferred.rejectW...
- ├ deferred.notify()
- └ deferred.notifyW...
-
- ├ 目次
- ├ jQuery.error()
- ├ .context
- ├ .jquery
- └ .pushStack()
jQuery.get( )サーバーからデータを取得
構文
- サーバーからデータを取得返値:jqXHRオブジェクト
-
jQuery.get( url [,object] [function] [type] )ver1.0〜
機能
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メソッドを利用しなくても操作できる点です。
サンプル(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を操作できていることが確認できます。
次のページ: jQuery.getJSON()