jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

Javascript
jQuery
プログラミング言語

公開日時: 2021-01-07 　更新日時: 2022-06-06

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

この記事でわかること

システム エンジニア: loadメソッドについて詳しく教えてください。

プロジェクト マネージャー: このメソッドはHTMLファイルを読み込んで必要な場所に表示できる大変便利なメソッドです。

jQueryのloadとは？

jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複数のページで同じ部分を共通化できるといったような便利な使い方ができます。

PHPのincludeに近い機能ですが、jQueryのloadはサーバサイドのPHPとは違ってクライアント側で行えるという違いがあります。

なおこの記事のサンプルを実行する場合は、htmlのheadタグ内に以下のようなjQueryを読み込む処理を記述してください。

テキストファイルを読み込む

それではテキストファイルをloadで読み込んでみましょう。htmlには以下のように記述してください。

jQueryには以下のように記述します。$(document).ready(function(){～});はページを読み込んだらfunctionの処理を実行するという意味です。その中ではこのhtmlファイルと同じ階層にあるtest.txtを読み込んでいます。

$(document).ready(function(){
$(‘div’).load(‘test.txt’);
});

loadはサーバ上でしか実行できない

なお上のサンプルをローカルのPCで実行しようとしてもできません。Google Chromeの場合はF12キーを押すとDevToolsを使えますが、そのConsoleを見るとloadはhttpなどのプロトコルでしか処理できないというエラーが出ます。

loadはサーバ上でしか使えないということです。jQueryのほとんどの機能はローカルのhtmlで試すことができるのですが、loadは無理ということです。

htmlファイルを読み込む

loadは別のhtmlファイルのタグを表示することもできます。例えば以下の内容をheader.htmlという別ファイルの中に記述します。

<h1>共通ヘッダーです。</h1>
<p>ページの上部に共通する内容です。</p>

そしてjQueryは以下のように記述します。

$(‘div’).load(‘header.html’);

これでheader.htmlの中のタグが表示されます。複数のページがあるサイトで、ページの一部に同じ内容を表示したい時に使えます。

loadのパラメータにfunctionを追加

loadのパラメータには以下のようにfunctionを追加することができます。functionは読み込みが終わった後に実行されます。

$(document).ready(function(){
$(‘div’).load(‘header.html’ , function(data, status) {
if(status !== ‘success’) {
console.log(‘エラーが発生しました’);
}
});
});

functionのパラメータのdataは読み込んだデータ、statusは通信の結果でsuccess・error・notmodified・timeout・parsererrorのいずれかが返ります。このサンプルはsuccess（成功）以外だった場合にログを出力しています。ログは上で説明したDevToolsのConsole等で見られます。

タグを指定して一部だけ抽出できる

loadメソッドの文字列にはファイル名を指定していますが、追加で抽出したいタグ名を記述することができます。ここまでのサンプルで、以下のようにした場合、

$(‘div’).load(‘header.html p’);

「ページの上部に共通する内容です。」と表示されます。header.htmlのpタグだけが抽出されたということです。

さらに絞り込んで抽出する

さらに絞った抽出もできます。header.htmlを以下のように変えてください。

そしてjQueryは以下のようにします。

$(‘div’).load(‘header.html .row:first-child’);

実行すると、一行目だけが表示されます。.rowでclassを指定し、:first-childで一行目だけが選択されたということです。

CSSの表記法で様々な指定ができる

上のような表記法はCSSと同じです。以下のようにすると、

$(‘div’).load(‘header.html .row:last-child’);

「三番目」だけが表示されます。以下のようにすると、

$(‘div’).load(‘header.html .row:nth-child(2)’);

「二番目」だけが表示されます。また以下のようにclassではなくidだった場合は、

以下のように#で指定します。

$(‘div’).load(‘header.html #row:first-child’);

jQueryを使わずにloadを行う

jQueryを使わずにJavaScriptだけでloadを行う場合、どのようにすればいいのでしょうか。その場合は、htmlを以下のように記述します。

<body>

req.open(method, file, true);
req.onreadystatechange = function () {
if(req.readyState === 4 && req.status === 200) {
var rest = req.responseText;
div.innerHTML = rest;
}
};
req.send();
</script>

</body>

JavaScriptのHTTP通信で取得する

上のJavaScriptのコードを簡単に説明すると、まずXMLHttpRequestでHTTPリクエストの準備をします。対象はidがtargetのdivタグで、getElementByIdで取得します。HTTP通信を開始して、readyStateが4(DONE=操作完了)でstatusが200(OK)だった場合、通信が成功したと判断して、responseTextでheader.htmlの内容を取得します。

結果をdivタグのinnerHTMLに代入することで、header.htmlの内容を取り込むことができます。最後にsendで通信の終了を伝えます。

jQueryがあるおかげで簡単に外部ページの取り込みができる

jQueryのloadを使わない場合、かなり難しくなることがお分かり頂けたのではないでしょうか。HTTP通信の知識も必要で、コードの量も多くなります。jQueryのloadならたった1行で済むのですから、jQueryを使うメリットが分かったと思います。

なおloadの内部ではAjaxが使われています。AjaxはJavaScriptで非同期通信を行う技術で、GoogleMapなどで利用されています。loadを使わずにAjaxで記述するのも大変なのですが、jQueryがあるおかげで手軽に他のhtmlファイルの取り込みができるのです。

システム エンジニア: loadを利用することで手軽にhtmlファイルを取得できるんですね。

プロジェクト マネージャー: その通りです。大変メリットの多いメソッドですので、実際にコードを書いてぜひマスターしてください。

jQueryのloadはとても手軽で便利な機能

jQueryのloadについて解説しましたが、ご理解頂けましたでしょうか。jQueryの機能はJavaScriptで記述するのとあまり変わらないものもあるのですが、loadについてはjQueryの利点を感じて頂けたのではないかと思います。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介