JavaScriptのリクエスト手法に「XmlHttpRequest」というものがあります。
fetch関数に近い役割なのですが文法が全然違うので、新しいテーマとして初学者向けの解説をしていきたいと思います。
トレンドとしては少しずつ下火になってきたのですがメジャーどころだとGoogleフォームで使われており、Googleフォームを使ったお問合せ機能をサイトに実装する際には必要な知識になるでしょう。
また動画もあるので必要に応じて活用してください。
JavaScriptのXmlHttpRequestを使ってデータを読み込む方法
今回は例題としてテキストデータをXmlHttpRequestで読み込んでみたいと思います。
テストデータですconst xml = new XMLHttpRequest();
xml.addEventListener("load", (e) => {
const text = e.target.responseText;
console.log(text);
});
xml.open("get", "./test.txt");
xml.send();
// 「テストデータです」と出力されるXmlHttpRequestはまずインスタンス化する必要があります。
インスタンス化することによって、openメソッドとsendメソッドが使えるようになります。
・openメソッド：データの取得や投稿を行うためのメソッド。第一引数にアクション名、第二引数にデータのパスを指定する。
・sendメソッド：openメソッドで指定した内容を実行するためのメソッド。
openメソッドの第一引数のアクション名については既に決められた以下の4つの名前から選択することになっています。
①get：取得
②post：投稿
③put：更新
④delete：削除
これらの処理に加えてデータの読み込みが終わった時にコンソールに出力するには、インスタンス化したXmlHttpRequestにaddEventListenerを使います。
外部データを読み込む系の関数やライブラリは色々ありますが、どちらかと言うと書く量が増えがちなのがXmlHttpRequestの特徴かもしれません。
JavaScriptでデータを読み込む時にプログレスバーを動かす
せっかくなのでXmlHttpRequestでデータを読み込む作業と一緒に、画面に色んな情報を表示することをやってみたいと思います。
読み込む内容は先ほどと同じテキストデータにして、コンソールではなく画面に内容を出力してみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./script.js" defer></script>
</head>
<body>
<p id="xmlResult"></p>
</body>
</html>const xml = new XMLHttpRequest();
// ここを追加
const xmlResult = document.querySelector("#xmlResult");
xml.addEventListener("load", (e) => {
const text = e.target.responseText;
// ここを修正
xmlResult.innerHTML = text;
});
xml.open("get", "./test.txt");
xml.send();出力する場所をHTML上でpタグで作成しておき、addEventListenerの中でテキストデータの内容をHTMLで挿入する形です。
さらにボタンを用意してボタンをクリックしたらテキストデータの内容が画面に表示されるようにしてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./script.js" defer></script>
</head>
<body>
<p id="xmlResult"></p>
<!-- ここを追加 -->
<button id="btn">クリック</button>
</body>
</html>const xml = new XMLHttpRequest();
const xmlResult = document.querySelector("#xmlResult");
// ここを追加
const btn = document.querySelector("#btn");
xml.addEventListener("load", (e) => {
const text = e.target.responseText;
xmlResult.innerHTML = text;
});
xml.open("get", "./test.txt");
// ここを修正
btn.addEventListener("click", () => {
xml.send();
});HTML上でbuttonタグを使ってボタンを作成して、JS側ではボタンに対してaddEventListenerを使っています。
XmlHttpRequestは書くコードが多いですが結局はsendメソッドに辿り着かないことには実行されないので、addEventListenerの中に入れるのはsendメソッドの部分だけでOKです。
さらにプログレスバーを使ってちょっとしたアニメーションも表示してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./script.js" defer></script>
</head>
<body>
<!-- ここを追加 -->
<label for="">
<progress id="progress" max="100" value="0"></progress>
</label>
<p id="xmlResult"></p>
<button id="btn">クリック</button>
</body>
</html>const xml = new XMLHttpRequest();
const xmlResult = document.querySelector("#xmlResult");
const btn = document.querySelector("#btn");
// ここを追加
const progress = document.querySelector("#progress");
xml.addEventListener("load", (e) => {
const text = e.target.responseText;
console.log(text);
xmlResult.innerHTML = text;
});
xml.open("get", "./test.txt");
btn.addEventListener("click", () => {
xml.send();
});
// ここを追加
xml.addEventListener("progress", (e) => {
let loaded = e.loaded;
let total = e.total;
const rate = loaded / total;
progress.value = rate * 100;
});HTML側でprogressタグを使ってプログレスバーを用意し、JS側でプログレスバーにaddEventListenerを使っています。
またaddEventListenerの引数にはeventを取っていて、progressタグのeventには「loaded」「total」を取得できます。
・loaded：progressタグの中で使える処理の進捗具合を整数で返す
・total：progressタグの中で使える処理の総数を整数で返す
以上のことから「loaded / total」とすることで進捗率を計算することができます。
実際に動作させると以下のようになります。