jQueryのload()を使えば、他のページからテキストなどを引っ張ってくることができます。
今回はコンテンツを引っ張ってくる方法、エラーの対処法や注意点などをお伝えします。
基本的な使い方
他のページからコンテンツを取得し、表示させます。
構文
jQuery
|
1 |
$('div').load('/page/ .post-content'); |
load()の引数に取得対象ページのURLと、取得したいコンテンツがあるclassを半角スペースを空けて指定しています。
それをセレクタで指定した要素に表示させます。
これだけで他のページよりコンテンツを引っ張ってくることができます。
ちなみにURLだけを指定するとそのページ全てが取得され、classの箇所はIDや要素名も指定できます。
HTML
|
1 2 3 |
<div> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // コンテンツを引っ張ってくる $('div').load('/immunity .post-content'); }); |
結果
当サイトの免責事項のページから、要素を引っ張って表示させました。
以下のように取得しています。
$( 取得したコンテンツを表示させる要素 ).load(‘取得するURL 取得するclass’);
サイトのヘッダーやフッターなどの共通項目をインクルードして使うなど、簡単に効率UPできます。
注意事項
load()で取得する際、以下の点にご注意ください。
- 別のドメイン、サブドメイン、ポート、プロトコルからは取得できない。
- 通常は
GETメソッドで通信されるが、配列やオブジェクトはPOSTメソッドになる。
Ajaxと同様、セキュリティ上、他のドメインからは取得できません。
さまざまな使い方
コールバックでエラー表示
コールバックを使って、取得できなかったらエラーメッセージを表示させてみましょう。
HTML
|
1 2 3 |
<div> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { // コンテンツを取得する際、ステータスも取得する $('div').load('/hogehoge/', function(response, status, xhr) { // もしステータスがエラーだったら if (status == 'error') { // エラーメッセージを変数に格納 var msg = '申し訳ありませんが、エラーであります： '; // 取得したエラーコードとエラーテキストを表示させる $('div').append(msg+xhr.status+'-'+xhr.statusText); } }); }); |
結果
わざと存在しないURLを指定したので、エラーメッセージが表示されるはずです。
通信状態のステータスも取得するためちょっと複雑ですが、以下のように動作しています。
1.ステータスも取得する
$(‘div’).load(‘/hogehoge/’, function(response, status, xhr) {
特定のURLのあとにfunction(response, status, xhr)と続いていますが、実際に取得したデータや通信状態を取得しています。
response…取得したデータ（HTMLであればHTMLソース）status…通信状態xhr…レスポンスデータ（XMLHttpRequest・404やタイムアウトなどの通信状態も含めて取得）
2.ステータスがエラーだったら実行
if (status == ‘error’) {
上記2.のstatusがerrorだったらエラーメッセージを表示させます。
statusは以下の5種類が返されます。
success…成功error…失敗notmodified…更新されていないtimeout…タイムアウトparsererror…パーサーエラー（構文エラー）
1、2はよく使うかと思います。
パーサーエラーは;（セミコロン）が抜けてたり}（カッコ）の閉じ忘れなどの構文エラーです。
3.取得したhttpステータスコードを表示させる
$(‘div’).append(msg+xhr.status+’-‘+xhr.statusText);
上記で取得したxhrの中から以下のように特定のデータを取得しappend()で<div>要素に出力しています。
xhr.status…200や404、500などのhttpステータスコードxhr.statusText…Not FoundやForbiddenなどのステータステキスト
xhrはオブジェクト形式なので、statusやstatusTextといったプロパティを取得するためには、以下のようにオブジェクト名とプロパティ名を.（ドット）で繋ぐだけです。
オブジェクト名 . プロパティ名
jQueryを読み込む際のloadイベントについて
今回ご紹介しているload()メソッドとは別に、読み込みのタイミングに関するloadイベントがありますが、別物です。
以下の記事でご紹介していますので、ご確認ください。
参考：jQueryのready()やload()のタイミングの違い
