.net column
.NET開発者のためのブログメディア

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

2021年01月07日

SE
loadメソッドについて詳しく教えてください。

PM
このメソッドはHTMLファイルを読み込んで必要な場所に表示できる大変便利なメソッドです。

jQueryのloadとは?


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

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

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

<script src=“https://code.jquery.com/jquery-3.5.1.min.js”></script>

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

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

<div></div>

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を以下のように変えてください。

<ol>
<li class=“row”>一行目</li>
<li class=“row”>二行目</li>
<li class=“row”>三行目</li>
</ol>

そして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だった場合は、

<li id=“row”>一行目</li>

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

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

jQueryを使わずにloadを行う

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

<body>

<div id=“target”></div>

<script type=“text/javascript”>
var req = new XMLHttpRequest(),
method = “GET”,
file = “header.html”;
var div = document.getElementById(“target”);

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ファイルの取り込みができるのです。

SE
loadを利用することで手軽にhtmlファイルを取得できるんですね。

PM
その通りです。大変メリットの多いメソッドですので、実際にコードを書いてぜひマスターしてください。

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs