別ページにある情報を「Ajax」で表示させる方法【JavaScript】
「別ページにある一部の情報を特定のページに表示させたい」
そう思った時どうしているでしょうか？？
HTMLに詳しい方であれば「iframe」を使われるとおもいます。
しかしiframeだとページ全体が表示されてしまいます。
今回ご紹介するのは【別ページにある情報を「Ajax」で表示させる方法】になります。
「HTML」と「JavaScript」の基本的な知識があれば簡単に実装できるので是非試してみてください。
「Ajax」とは？
「Ajax」とは「Asynchronous JavaScript + XML」の略です。
「Ajax」はクライアント側でさまざまなウェブ技術を使用して非同期ウェブ・アプリケーションを作成する一連のウェブ開発技術です。
「Ajax」を使用すると、Webアプリケーションは、既存のページの表示や動作を妨げることなく、非同期でサーバーからデータを送受信できます。
【参考サイト】
AJAX – 開発者ガイド | MDN
別ページを埋め込む方法：HTMLの「iframe」要素
HTMLの「iframe」要素は、他のHTMLページや外部コンテンツを現在のページに埋め込むためのタグです。
これを使うことで、1つのウェブページ内に別のページやコンテンツを表示することができます。
「iframe」は外部のコンテンツを埋め込むのに使われますが、同じドメイン内の別のページを埋め込むこともできます。
以下は「iframe」の一例です。
<iframe src="URL、またはファイルパス" width="幅" height="高さ"></iframe>「iframe」は指定したURLのページの全ての情報を表示します。
しかしこの方法では埋め込んだページ全体が表示されてしまい、「別ページの一部の情報」だけを表示させることはできません。
今回の実装までの手順
以下の流れで今回の実装が可能です。
【手順】
①表示したい情報がある「別のページのURL」を指定します。
※この時の注意点として【同一ドメインの別ページ（下層ページなど）】を指定してください。
②「JavaScript」を使って「①」のURLから情報を取得します。この時に「XMLHttpRequest」を使用します。
※「XMLHttpRequest」については以下のサイトに詳しく記載があります。
【mdn Web Docs】
XMLHttpRequest
③取得した情報を特定ページの適切な場所に表示させるための「HTML」を記述します。
④情報が表示されます。
別ページにある情報を「Ajax」で表示させる方法
別ページにある情報を「Ajax」で表示させていきます。
ローカルでは表示が確認できないので、表示の確認にはサーバーが必要になります。
Visual Studio Codeの拡張機能「Live Server」で表示が確認できるので、 Visual Studio Codeをお使いの方はお試しください。
「補足： Visual Studio Code の拡張機能「Live Server」」
Live Server
以下の【HTML】をコピペしてください。
⇩ ⇩ ⇩
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<title>Ajaxで別ページの情報を取得します</title>
</head>
<body>
<h1>Ajaxで別ページの情報を取得します</h1>
<div id="area"></div><!-- ここに情報を表示をさせます -->
<script>
document.addEventListener("DOMContentLoaded", function () {
let xhr = new XMLHttpRequest();
xhr.open("GET", "ここに「URL」を入力してください", true); // 表示させたいコンテンツがあるページのURL
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let parser = new DOMParser();
let htmlDoc = parser.parseFromString(xhr.responseText, "text/html");
let elements = htmlDoc.querySelectorAll("#wrap"); // 表示させたいコンテンツの要素を入力
let area = document.getElementById("area"); // 指定先の要素へ出力します
for (var i = 0; i < elements.length; i++) {
area.appendChild(elements[i].cloneNode(true));
}
}
};
xhr.send();
});
</script>
</body>
</html>
今回の実装の中心になっている「JavaScript」の記述が以下になります。
<script>
document.addEventListener("DOMContentLoaded", function () {
let xhr = new XMLHttpRequest();
xhr.open("GET", "ここに「URL」を入力してください", true); // 表示させたいコンテンツがあるページURL
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let parser = new DOMParser();
let htmlDoc = parser.parseFromString(xhr.responseText, "text/html");
let elements = htmlDoc.querySelectorAll("#wrap"); // 表示させたいコンテンツの要素を入力
let area = document.getElementById("area"); // 指定先の要素へ出力します
for (var i = 0; i < elements.length; i++) {
area.appendChild(elements[i].cloneNode(true));
}
}
};
xhr.send();
});
</script>JavaScriptのコードについての説明を簡単にします。
① xhr.open("GET", "ここに「URL」を入力してください", true); // 表示させたいコンテンツがあるページURL 【ここに「URL」を入力してください】とある箇所に表示させたいコンテンツがあるURLを記入してください。
例）https://example.com/abcdefg.html
② let elements = htmlDoc.querySelectorAll("#wrap"); // 表示させたいコンテンツの要素を入力上記の「②」で「取得した要素」を表示するための要素を指定します。
③ let area = document.getElementById("area"); // 指定先の要素へ出力します上記の「③」で出力先のid名を指定します。
さいごに
いかがだったでしょうか？？
URLの指定にテンプレートリテラルなどを活用すると、URLが複数に渡って指定することができます。
これまではiframeを使用して別のページから読み込みをしていましたが、iframeではページ全体が表示されてしまい、必要な部分のみの表示ができませんでした。
「Ajax」を使うことで、ページの必要な部分だけ表示をさせることができます。
より効率的に特定のコードを取得できるため、非常に便利です。
制作・開発の際の参考にしてください。
👑ごった煮ブログ人気記事 TOP3👑
1位
https://www.alta.co.jp/blog/post-1928/2位
3位
この記事を書いた人
だいすけ
だいすけです。 仕事ではWEB制作・SEO・WEBデザインをしています。 【スキルセット】HTML / CSS（Sass）/ JavaScript / jQuery / PHP / Wordpress / Photoshop / SEO 【保有資格】SEO検定1級・Google アナリティクス個人認定資格（GAIQ）